<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="video-bg">
<div class="text-content">
<div class="par">That's it folks, thanks for coming!<br>Follow me for more awesome interaction like this in the future.</div>
<button class="close">Go back</button>
</div>
</div>
<div class="translucent-ctr">
<div class="translucent"></div>
</div>
<div class="slider-ctr">
<div class="text-content">
<div class="title">Select Movies</div>
<div class="par detail">Scroll horizontally to navigate</div>
</div>
<div class="slider-scroll">
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image deadpool" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>Deadpool</figcaption>
</div>
</figure>
</div>
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image godfather" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>The Godfather</figcaption>
</div>
</figure>
</div>
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image goodbadugly" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>The Good, Bad, and Ugly</figcaption>
</div>
</figure>
</div>
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image darkknight" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>The Dark Knight</figcaption>
</div>
</figure>
</div>
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image godfather2" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>The Godfather 2</figcaption>
</div>
</figure>
</div>
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image twelveangrymen" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>12 Angry Men</figcaption>
</div>
</figure>
</div>
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image django" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>Django Unchained</figcaption>
</div>
</figure>
</div>
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image wallflower" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>The Perks of being Wallflower</figcaption>
</div>
</figure>
</div>
<div class="slide">
<figure>
<div class="image-ctr">
<div class="image shawshank" data-index="{#i}">
<div class="light"></div>
</div>
<figcaption>Shawshank Redemption</figcaption>
</div>
</figure>
</div>
</div>
</div>
<script>
function $(elem){
return document.querySelector(elem);
}
function $$(elem){
return document.querySelectorAll(elem);
}
// beep
var audio = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/beep3.wav");
var imagesCtr = $$(".image-ctr"),
images = $$(".image"),
imagesLength = images.length - 1;
// nodelist to array
imagesCtr = [].slice.call(imagesCtr);
var sliderCtr = $(".slider-ctr"),
videoBg = $(".video-bg"),
title = $(".title"),
detail = $(".detail");
// get the next siblings of selected element
function nextSiblings(x, y){
var arr = [];
for(y; y < x; x--){
arr.push(x);
}
return arr.reverse();
}
// get the previous siblings of selected element
function prevSiblings(x){
var arr = [];
for(var y = -1, x = x - 1; y < x; x--){
arr.push(x);
}
return arr;
}
var tl = new TimelineMax(),
tlText = new TimelineMax(),
tlAdditional = new TimelineMax();
images.forEach(function(image){
image.addEventListener("click", function(){
setTimeout(function(){
videoBg.classList.add("active");
}, 600);
var index = parseInt(this.getAttribute("data-index")),
yAnim = -40,
thisImage = this;
console.log(this)
tlText
.staggerTo([title, detail], .15, {
y: -15,
opacity: 0
}, -.15)
.set([title, detail], {
y: 15
})
tl
.set(thisImage, {
className: "+=selected disabled"
})
.to(thisImage, .05, {
scale: 1,
easing: Elastic.easeOut
})
.to(thisImage, .15, {
opacity: 0,
y: yAnim,
onComplete: nextTl
})
.set(thisImage, {
y: yAnim * (-1),
})
prevSiblings(index).map(function(x){
tl.set(imagesCtr[x], {
className: "+=disabled"
}).to(imagesCtr[x], .15, {
opacity: 0,
y: yAnim
}).set(imagesCtr[x], {
y: yAnim * (-1),
})
});
function nextTl() {
nextSiblings(imagesLength, index).map(function(x){
tlAdditional.set(imagesCtr[x], {
className: "+=disabled"
}).to(imagesCtr[x], .15, {
opacity: 0,
y: yAnim
}).set(imagesCtr[x], {
y: yAnim * (-1),
})
})
}
});
image.addEventListener("mouseenter", function(){
this.children[0].classList.add("light-on");
});
image.addEventListener("mousemove", function(e){
var w = this.offsetWidth,
h = this.offsetHeight,
o = 9 - e.offsetX / w * 18,
a = 9 - e.offsetY / h * 18,
n = e.offsetX - w / 2,
r = e.offsetY - h / 2,
s = Math.atan2(r, n),
t = 180 * s / Math.PI - 90,
transform = "translateY(" + -o + "px) translateX(" + -a + "px) rotateX(" + -a + "deg) rotateY(" + -o + "deg)";
this.style.MozTransform = transform;
this.style.WebkitTransform = transform;
this.children[0].style.background = "linear-gradient(" + t + "deg, rgba(255,255,255," + e.offsetY / h / 2 + ") 0%,rgba(255,255,255,0) 60%)";
});
image.addEventListener("mouseleave", function(e){
this.style.MozTransform = "none";
this.style.WebkitTransform = "none";
this.children[0].classList.remove("light-on");
});
});
var closeBtn = $(".close");
closeBtn.addEventListener("mouseenter", function(){
audio.play();
});
closeBtn.addEventListener("click", function(){
videoBg.classList.remove("active");
var imageSelected;
imagesCtr.filter(function(x){
if(x.classList.contains("selected")){
return imageSelected = x;
}
});
var index = parseInt(imageSelected.children[0].getAttribute("data-index"));
tlText.staggerTo([title, detail], .15, {
y: 0,
opacity: 1
}, .15)
tl
.to(imageSelected, .15, {
delay: .15,
opacity: 1,
y: 0,
onComplete: nextTl
})
.set(imageSelected, {
className: "-=selected disabled",
attr: {"style": "none"}
})
prevSiblings(index).map(function(x){
tl
.to(imagesCtr[x], .15, {
opacity: 1,
y: 0,
delay: -.05
})
.set(imagesCtr[x], {
className: "-=disabled",
attr: {"style": "none"}
})
});
function nextTl() {
nextSiblings(imagesLength, index).map(function(x){
tlAdditional
.to(imagesCtr[x], .15, {
opacity: 1,
y: 0,
delay: -.05
})
.set(imagesCtr[x], {
className: "-=disabled",
attr: {"style": "none"}
})
})
}
});
balapaCop("Apple TV Interaction", "rgba(255,255,255,.8)");
</script>
@font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
html,
body {
position: relative;
height: 100%;
}
body {
font-family: "San Francisco";
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(1600px);
-moz-transform: perspective(1600px);
-ms-transform: perspective(1600px);
-o-transform: perspective(1600px);
transform: perspective(1600px);
overflow: hidden;
}
.video-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
display: table;
pointer-events: none;
opacity: 0;
transition: .3s all ease;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.video-bg.active {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
pointer-events: auto;
}
.video-bg .text-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.video-bg .par {
color: #fff;
line-height: 1.5;
margin-bottom: 40px;
font-size: 20px;
opacity: .8;
}
.video-bg button {
padding: 15px 40px;
border: none;
font-size: 16px;
background: #fff;
color: #000;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25);
transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
will-change: transform;
}
.video-bg button:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.video-bg button:active {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.video-bg button:focus {
outline: none;
}
.translucent-ctr {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
filter: blur(30px);
-webkit-filter: blur(30px);
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/yosemite.jpg") no-repeat center center/cover;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.translucent-ctr .translucent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #f5f5f5;
opacity: .5;
}
.slider-ctr {
overflow: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
scroll-snap-type: proximity;
scroll-snap-destination: 30px 0;
z-index: 9;
}
.slider-ctr.disabled {
pointer-events: none;
}
.slider-ctr .text-content {
position: fixed;
top: 60px;
left: 60px;
}
.slider-ctr .title {
font-size: 30px;
margin-bottom: 10px;
color: #555;
}
.slider-ctr .par {
color: #777;
}
.slider-scroll {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 3060px;
padding: 0 30px;
box-sizing: content-box;
}
.slider-scroll .slide {
width: 340px;
height: 100%;
float: left;
box-sizing: border-box;
padding: 0 30px;
display: table;
scroll-snap-coordinate: 0 0;
}
.slider-scroll figure {
display: table-cell;
vertical-align: middle;
width: 100%;
}
.slider-scroll .image-ctr {
width: 100%;
position: relative;
transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
will-change: transform;
}
.slider-scroll .image-ctr.disabled {
pointer-events: none;
transition: none;
}
.slider-scroll .image-ctr:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.slider-scroll .image-ctr figcaption {
position: absolute;
right: 0;
bottom: -40px;
left: 0;
font-size: 16px;
line-height: 40px;
text-align: center;
color: #fff;
letter-spacing: 1px;
opacity: 0;
transition: .15s opacity ease;
}
.slider-scroll .image-ctr:hover figcaption {
opacity: 1;
transition: .15s opacity ease .1s;
}
.slider-scroll .image {
box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25);
border-radius: 3px;
width: 100%;
height: 417px;
position: relative;
background: no-repeat center center / cover;
}
.slider-scroll .image .light {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
opacity: 0;
transition: .15s opacity ease;
border-radius: 3px;
}
.slider-scroll .image .light.light-on {
opacity: 1;
}
.slider-scroll .image:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
transition: .15s all ease-out;
opacity: 0;
border-radius: 5px;
}
.slider-scroll .image:hover:before {
opacity: 1;
}
.slider-scroll .image.shawshank {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/shawshank.jpg");
}
.slider-scroll .image.godfather {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/godfather.jpg");
}
.slider-scroll .image.godfather2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/godfather2.jpg");
}
.slider-scroll .image.darkknight {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/darkknight_copy.jpg");
}
.slider-scroll .image.twelveangrymen {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/twelveangrymen.jpg");
}
.slider-scroll .image.django {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/django.jpg");
}
.slider-scroll .image.goodbadugly {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/goodbadugly.jpg");
}
.slider-scroll .image.deadpool {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/deadpool.jpg");
}
.slider-scroll .image.wallflower {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/wallflower.jpg");
}
.copyright {
z-index: 99;
}
