<section class="Hero js-Hero">
<a href="#0" class="Button js-Button">next</a>
</section>
@import url("https://fonts.googleapis.com/css?family=Roboto");
$white: #fff;
$black: #000;
html {
height: 100%;
width: 100%;
}
body {
background-color: $black;
color: $white;
font-family: 'Roboto';
height: 100%;
width: 100%;
position: relative;
}
.Hero {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url("https://unsplash.it/1000/800?image=974");
animation-name: none;
&.is-shrinking {
animation: shrink 1.5s forwards;
}
&.is-growing {
animation: grow 1.5s;
}
}
.Button {
background-color: #000;
border-radius: 4px;
padding: 1em 2em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -52px;
margin-top: -24px;
&, &:visited, &:hover, &:active {
color: $white;
text-decoration: none;
}
}
@keyframes shrink {
from {
-webkit-clip-path: circle(100%);
clip-path: circle(100%);
opacity: 1;
}
to {
-webkit-clip-path: circle(0%);
clip-path: circle(0%);
opacity: 0;
}
}
@keyframes grow {
from {
-webkit-clip-path: circle(0%);
clip-path: circle(0%);
opacity: 0;
}
to {
-webkit-clip-path: circle(100%);
clip-path: circle(100%);
opacity: 1;
}
}
View Compiled
const baseUrl = 'https://unsplash.it/1000/800?image=';
const imgIds = [974, 903, 940, 881];
const link = document.getElementsByClassName('js-Button')[0];
const hero = document.getElementsByClassName('js-Hero')[0];
let index = 1;
function preLoadImages() {
for(let id of imgIds) {
let img = new Image();
img.src = `${baseUrl}${id}`;
}
}
preLoadImages();
function whichAnimationEvent(){
var a;
var el = document.createElement('fakeelement');
var animations = {
'animation': ['animationend', 'animationName'],
'OAnimation':['oAnimationEnd', 'animationName'],
'MozAnimation':['animationend', 'animationName'],
'WebkitAnimation': ['webkitAnimationEnd', 'WebkitAnimationName']
}
for(a in animations){
if( el.style[a] !== undefined ){
return [animations[a][0], animations[a][1]];
}
}
}
function loadImage(url, callback) {
const img = new Image();
img.onload = function() {
callback();
}
img.src = url;
}
const whenImgLoaded = function() {
hero.style.backgroundImage = `url("${baseUrl}${imgIds[index]}")`;
hero.classList.remove('is-shrinking');
hero.classList.add('is-growing');
if(index >= imgIds.length-1) {
index = 0;
} else {
index++;
}
}
link.addEventListener('click', function (ev) {
ev.preventDefault();
const animationEvent = whichAnimationEvent();
const animationEnd = animationEvent[0];
const animationNamePrefix = animationEvent[1];
hero.style.webkitAnimationName = 'shrink';
hero.classList.add('is-shrinking');
animationEnd && hero.addEventListener(animationEnd, function a(event) {
this.style.webkitAnimationName = '';
if(event.animationName === 'shrink') {
loadImage(`${baseUrl}${imgIds[index]}`, whenImgLoaded);
hero.removeEventListener(animationEnd, a);
} else {
hero.classList.remove('is-growing');
}
});
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.