Skip to content

Instantly share code, notes, and snippets.

@shshaw shshaw/index.html
Created Aug 16, 2018

Embed
What would you like to do?
SplittingImage Palette
<div class="palette" data-cols="10" data-rows="10"></div>
console.clear();
SplittingImage('.palette');
<script src="https://unpkg.com/splitting-image/splitting-image.js"></script>
<script src="https://codepen.io/shshaw/pen/epmrgO"></script>
.palette .split-cell{
/* Generate the rainbow! */
background: hsl(
calc( 360 * var(--col-index) / var(--col-total) ),
75%,
calc( 5% + (90% * (1 - var(--row-index) / var(--row-total))) )
);
visibility: visible; /* The split-cell is hidden by default for background-image based SplittingImage uses */
}
/* Hover Effect */
.palette .split-cell {
transition: transform 0.2s cubic-bezier(.75,0,.15,1);
transition-property: transform, box-shadow;
box-shadow: 0 0em 0em transparent;
}
.palette .split-cell:hover {
transform: scale(1.25);
box-shadow: 0 1em 2em rgba(0,0,0,0.3);
z-index: 2;
}
/* //////////////////////////////////////// */
.palette {
width: 100%;
height: 100%;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
<link href="https://unpkg.com/splitting-image/splitting-image.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.