Skip to content

Instantly share code, notes, and snippets.

@mihaisavezi

mihaisavezi/index.html

Created November 6, 2018 04:07
Show Gist options
  • Save mihaisavezi/3c1e9e5b6c6af271b44f7e98e8583bea to your computer and use it in GitHub Desktop.
Save mihaisavezi/3c1e9e5b6c6af271b44f7e98e8583bea to your computer and use it in GitHub Desktop.
Download ZIP
@keyframers 1.1.0 | Sliced Slides
Raw
index.html
<div id="app" data-state="photos" data-prev-state>
<div class="ui-layer -photos">
<h1 class="ui-heading">
<span data-flip-key="heading">SHAW DÅVID KEYFRÅMERS</span>
</h1>
<h2 class="ui-subheading _fade">Out Of Order Magazine</h2>
<div class="ui-photos">
<div class="ui-photo" data-photo="https://images.unsplash.com/photo-1507184915978-447ac6ab3ecb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2b6fc6dd7f60aea56f5c4a6f8f7efea7&auto=format&fit=crop&w=400&q=60" style="background-image:url('https://images.unsplash.com/photo-1507184915978-447ac6ab3ecb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2b6fc6dd7f60aea56f5c4a6f8f7efea7&auto=format&fit=crop&w=400&q=60')">
<div class="ui-img"></div>
</div>
<div class="ui-photo" data-photo="https://images.unsplash.com/photo-1455424910085-054164782adc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc133c753312fcf826f47111d3e4cf3e&auto=format&fit=crop&w=400&q=60" style="background-image:url('https://images.unsplash.com/photo-1455424910085-054164782adc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc133c753312fcf826f47111d3e4cf3e&auto=format&fit=crop&w=400&q=60')">
<div class="ui-img"></div>
</div>
<div class="ui-photo" data-photo="https://images.unsplash.com/photo-1513246335643-4b363cb1230b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=38e4bad665c51eae152dd59e953201e2&auto=format&fit=crop&w=400&q=60" style="background-image:url('https://images.unsplash.com/photo-1513246335643-4b363cb1230b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=38e4bad665c51eae152dd59e953201e2&auto=format&fit=crop&w=400&q=60')">
<div class="ui-img"></div>
</div>
<div class="ui-photo" data-photo="https://images.unsplash.com/photo-1447783333881-70715fdf7aa3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=229cd6581d6c07d96ca69e2dfeee0e07&auto=format&fit=crop&w=400&q=60" style="background-image:url('https://images.unsplash.com/photo-1447783333881-70715fdf7aa3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=229cd6581d6c07d96ca69e2dfeee0e07&auto=format&fit=crop&w=400&q=60')">
<div class="ui-img"></div>
</div>
</div>
</div>
<div class="ui-layer -photo">
<h1 class="ui-heading">
<span data-flip-key="heading">SHAW DÅVID KEYFRÅMERS</span>
</h1>
<div class="ui-photo" data-cols="5" style="background-image:url('https://images.unsplash.com/photo-1455424910085-054164782adc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bc133c753312fcf826f47111d3e4cf3e&auto=format&fit=crop&w=1000&q=60')">
<div class="ui-img"></div>
</div>
</div>
</div>
<a href="https://youtu.be/qIsRBfo1TRI" target="_blank" data-keyframers-credit></a>
Raw
keyframers-1-1-0-sliced-slides.markdown
Raw
script.js
console.clear();
SplittingImage('[data-rows], [data-cols], [data-image]');
const app = document.querySelector('#app');
const machine = {
initial: 'photos',
states: {
photos: {
on: {
SELECT: 'photo'
}
},
photo: {
on: {
CLICK: 'photos'
}
}
}
};
let currentState = machine.initial;
const transition = (state, event) => {
return machine.states[state].on[event] || state;
}
const flipping = new Flipping({
duration: 1500
});
const send = (event) => {
const prevState = currentState;
currentState = transition(currentState, event);
flipping.read();
app.setAttribute('data-prev-state', prevState);
app.setAttribute('data-state', currentState);
flipping.flip();
}
document.body.addEventListener('click', () => {
send('CLICK');
});
const photoEls = document.querySelectorAll('.ui-layer.-photos .ui-photo');
const selectedPhotoEl = document.querySelector('.ui-layer.-photo .ui-photo')
Array.from(photoEls).forEach(photoEl => {
photoEl.addEventListener('click', e => {
e.stopPropagation(); selectedPhotoEl.style.setProperty('background-image', `url(${photoEl.getAttribute('data-photo')})`);
send('SELECT');
});
});
Raw
scripts
<script src="https://unpkg.com/splitting-image@0.5.3/splitting-image.min.js"></script>
<script src="https://unpkg.com/flipping@1.0.0/dist/flipping.web.js"></script>
<script src="https://codepen.io/shshaw/pen/QmZYMG"></script>
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
[data-keyframers-credit] { color: #FFF; }
$easing: cubic-bezier(.5, 0, .5, 1);
$duration: 1s;
// $duration: 0s;
$offset: 0.15s;
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Playfair Display, serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #272727;
}
#app {
width: 90vw;
height: 50vw;
min-width: 500px;
min-height: 350px;
background-color: #fff;
&[data-state="photo"] {
.ui-photos > .ui-photo {
animation: container-move $duration $easing both;
will-change: transform;
&:nth-child(2n) {
animation-delay: $offset;
> .ui-img {
animation-delay: $offset;
}
}
@keyframes container-move {
0% { transform: translateY(0); animation-timing-function: linear; }
25%, 100% { transform: translateY(-2em); }
}
}
.ui-photos > .ui-photo > .ui-img {
animation: image-move $duration $easing both;
will-change: transform;
@keyframes image-move {
0% { transform: translateY(0); animation-timing-function: linear; }
25% { transform: translateY(2em); }
100% { transform: translateY(100%); }
}
}
.ui-layer.-photo .ui-photo {
&,
.ui-img { visibility: hidden; }
.split-cell {
visibility: visible;
animation: fall-in $duration $easing both;
animation-delay: calc(#{$offset} * var(--col-index) + #{$duration});
@keyframes fall-in {
from { transform: translateY(-100%); }
}
.split-cell__inner {
animation: inherit;
animation-name: inner-fall-up;
transform: translate(
calc(-1 * var(--col-size) * var(--col-index)),
calc(-1 * var(--row-size) * var(--row-index))
);
@keyframes inner-fall-up {
from { transform: translate(
calc(-1 * var(--col-size) * var(--col-index)),
calc(-1 * var(--row-size) * var(--row-index))
) translateY(100%); }
}
}
}
}
.ui-layer.-photos .ui-heading {
display: none;
}
}
&[data-state="photos"] {
&[data-prev-state="photo"] {
.ui-layer.-photo {
.ui-heading {
display: none;
}
.ui-photo {
&, .ui-img { visibility: hidden; }
}
}
.ui-photos > .ui-photo {
animation: container-move-reverse $duration $duration $easing both;
will-change: transform;
&:nth-child(2n) {
animation-delay: calc(#{$offset} + #{$duration});
> .ui-img {
animation-delay: inherit;
}
}
@keyframes container-move-reverse {
100% { transform: translateY(0); animation-timing-function: linear; }
0%, 75% { transform: translateY(-2em); }
}
}
.ui-photos > .ui-photo > .ui-img {
animation: inherit;
animation-name: image-move-reverse;
will-change: transform;
@keyframes image-move-reverse {
0% { transform: translateY(100%); }
75% { transform: translateY(2em); }
100% { transform: translateY(0); animation-timing-function: linear; }
}
}
.ui-layer.-photo .ui-photo {
.split-cell {
visibility: visible;
animation: fall-out $duration $easing both;
animation-delay: calc(#{$offset} * var(--col-index));
@keyframes fall-out {
to { transform: translateY(100%); }
}
.split-cell__inner {
animation: inherit;
animation-name: inner-fall-out;
transform: translate(
calc(-1 * var(--col-size) * var(--col-index)),
calc(-1 * var(--row-size) * var(--row-index))
);
@keyframes inner-fall-out {
to { transform: translate(
calc(-1 * var(--col-size) * var(--col-index)),
calc(-1 * var(--row-size) * var(--row-index))
) translateY(-100%); }
}
}
}
}
}
&:not([data-prev-state="photo"]) {
.ui-layer.-photo {
.ui-heading {
display: none;
}
.ui-photo {
&, .ui-img { display: none; }
}
}
}
}
&[data-state="photo"] .ui-layer.-photos,
&[data-state="photos"] .ui-layer.-photo {
._fade {
opacity: 0;
}
}
}
.ui-layer {
position: absolute;
display: grid;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
> * { pointer-events: auto; }
&.-photos {
grid-template-columns: 4rem 1fr;
grid-template-rows: 4rem 1fr 3fr;
> .ui-heading,
> .ui-subheading {
text-align: center;
grid-column: 2 / -1;
grid-row: 2 / 3;
margin: 1rem 0;
}
> .ui-heading {
align-self: start;
}
> .ui-subheading {
align-self: end;
font-size: 1rem;
}
}
&.-photo {
grid-template-columns: 4rem 1fr 1fr 1fr;
grid-template-rows: 4rem 1fr 8rem;
> .ui-heading {
grid-column: 1 / 3;
grid-row: 1 / 2;
font-size: 1rem;
margin: 1rem;
}
> .ui-photo {
grid-column: 3 / 4;
grid-row: 1 / -1;
}
}
}
.ui-heading {
white-space: nowrap;
font-size: 1.75rem;
> span {
display: inline-block;
}
}
.ui-photos {
grid-column: 2 / -1;
grid-row: 3 / -1;
overflow-x: auto;
overflow: hidden;
margin-bottom: -2em;
display: flex;
flex-direction: row;
> .ui-photo {
width: 30%;
cursor: pointer;
}
}
.ui-photo {
background-color: rgba(red, .1);
flex-shrink: 0;
overflow: hidden;
contain: paint;
background-size: cover;
background-position: center center;
visibility: hidden;
}
[data-state="photos"] .ui-photos > .ui-photo {
$transition-duration: .3s;
&:before, &:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
visibility: visible;
z-index: 1;
pointer-events: none;
}
&:before {
background-color: rgba(black, 0.5);
opacity: 0;
transition:
opacity $transition-duration linear;
}
&:after {
background: white;
display: flex;
justify-content: center;
align-items: center;
content: 'View Goat';
font-weight: bold;
margin: 2rem 1rem;
transform: translateY(1em);
opacity: 0;
transition:
transform $transition-duration $easing,
opacity $transition-duration linear;
bottom: 40%;
}
&:hover,
&:focus {
&:before { opacity: 1; }
&:after { opacity: 1; transform: none; }
}
}
.ui-img {
background: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: visible;
will-change: transform;
}
._fade {
transition: opacity $duration / 2 linear;
}
html {
font-family: Times New Roman, serif;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
Raw
styles
<link href="https://unpkg.com/splitting-image@0.5.3/splitting-image.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment