<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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; }