<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<main>
<section id="slideshow">
<div class="slide active intro" data-index="1">
<div class="slide__inner"></div>
<h2 class="slide__title">Nowhere Near</h2>
<figure class="slide__img">
<div class="slide__img-curtain"></div>
<img src="https://images.unsplash.com/photo-1519405530001-3b5e82ba4dac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=925&q=80" alt="">
</figure>
<div class="slide__number"></div>
</div>
<div class="slide" data-index="2">
<div class="slide__inner"></div>
<h2 class="slide__title">Somewhere Close</h2>
<figure class="slide__img">
<div class="slide__img-curtain"></div>
<img src="https://images.unsplash.com/photo-1504916490405-6a71ff3679d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80" alt="">
</figure>
<div class="slide__number"></div>
</div>
<div class="slide" data-index="3">
<div class="slide__inner"></div>
<h2 class="slide__title">Way Over There</h2>
<figure class="slide__img">
<div class="slide__img-curtain"></div>
<img src="https://images.unsplash.com/photo-1519335337423-a3357c2cd12e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80" alt="">
</figure>
<div class="slide__number"></div>
</div>
<div class="slide" data-index="4">
<div class="slide__inner"></div>
<h2 class="slide__title">Really, Really Far Away</h2>
<figure class="slide__img">
<div class="slide__img-curtain"></div>
<img src="https://images.unsplash.com/photo-1499006619764-59e5b0c0e7ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1069&q=80" alt="">
</figure>
<div class="slide__number"></div>
</div>
<div class="slideshow-nav">
<button class="slideshow-nav__btn slideshow-nav__btn--prev disabled">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 407.436 407.436" style="enable-background:new 0 0 407.436 407.436;" xml:space="preserve">
<polygon points="315.869,21.178 294.621,0 91.566,203.718 294.621,407.436 315.869,386.258 133.924,203.718 "/>
</svg>
</button>
<button class="slideshow-nav__btn slideshow-nav__btn--next">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 407.436 407.436" style="enable-background:new 0 0 407.436 407.436;" xml:space="preserve">
<polygon points="112.814,0 91.566,21.178 273.512,203.718 91.566,386.258 112.814,407.436 315.869,203.718 "/>
</svg>
</button>
</div>
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script>
if(window.innerWidth < 750){
const menuIcon = document.querySelector('.menu-icon');
const menuIconLines = menuIcon.querySelectorAll('.menu-icon__line')
const navMenu = document.querySelector('#navBar');
const header = document.querySelector('.header');
const main = document.querySelector('.main');
// const closeBtn = document.querySelector('.nav__close');
const navItems = navMenu.querySelectorAll('a');
const masterNavTL = new TimelineMax({paused:true, reversed: true});
function navMenuAnimation(){
const tl = new TimelineMax();
tl.set(navMenu, {className: '+=open'})
.to(navMenu, 0.7, {opacity: 1, ease: Expo.easeOut})
.staggerFromTo(navItems, 1.2, {opacity: 0, y:16}, {opacity: 1, y:0, ease: Power1.easeOut}, -0.1);
return tl;
}
function menuIconAnimation(){
const tl = new TimelineMax();
tl.to( menuIconLines[0], 1, {background: 'white'}, 0)
.fromTo( menuIconLines[2], .5, {transform: 'rotate(45deg)', ease: Expo.easeOut}, {transformOrigin: 'left', transform: 'rotate(-45deg) translateY(-1px) translateX(4px)', background: 'white', ease: Expo.easeOut}, 0)
return tl;
}
setTimeout( () => {
masterNavTL.add(navMenuAnimation(), 0)
.add(menuIconAnimation(), 0);
}, 2000);
menuIcon.addEventListener('click', () => masterNavTL.reversed() ? masterNavTL.play(): masterNavTL.reverse().timeScale(1.4));
}
const nextBtn = document.querySelector('.slideshow-nav__btn--next');
const prevBtn = document.querySelector('.slideshow-nav__btn--prev')
const slides = [...document.querySelectorAll('.slide')]
const introItems = [...document.querySelectorAll('.intro')]
const theBody = document.body;
const init = () => {
//hide all slides that arent active
slides.forEach(slide => {
if (!slide.classList.contains('active')) {
TweenLite.set(slide, {autoAlpha: 0});
}
});
// TweenMax.set(prevBtn, {className: '+=disabled'});
}
function goToNextSlide(currentSlide, nextSlide, direction) {
const mainTL = new TimelineMax();
// current slide items
const currentTitle = currentSlide.querySelector('.slide__title');
const currentImgCurtain = currentSlide.querySelector('.slide__img-curtain');
const currentImg = currentSlide.querySelector('.slide__img img');
//next slide items
const nextTitle = nextSlide.querySelector('.slide__title');
const nextImgCurtain = nextSlide.querySelector('.slide__img-curtain');
const nextImg = nextSlide.querySelector('.slide__img img');
const titleAnimationTL = () => {
const tl = new TimelineMax();
tl.to(currentTitle, 0.8, {y: direction == 'next' ? -40 : 40, opacity: 0})
.fromTo(nextTitle, 0.8, {y:direction == 'next' ? 40 : -40, opacity:0}, {y: 0, opacity: 1, ease: Expo.easeOut})
return tl;
}
const imageAnimationTL = () => {
const tl = new TimelineMax();
tl.fromTo(currentImgCurtain, 0.4, {transform: direction == 'next' ? 'translateX(-101%)' : 'translateX(101%)'}, {transform: 'none', ease: Circ.easeInOut}, 0)
.set(currentImg, {autoAlpha: 0}, 0.4)
.set(nextImg, {autoAlpha: 1}, 0.4)
.fromTo(nextImg, 0.8, {scale: 1.3}, {scale: 1}, 0.5)
.to(currentImgCurtain, 0.4, {transform: direction == 'next' ? 'translateX(101%)' : 'translateX(-101%)', ease: Expo.easeOut}, 0.5)
}
mainTL.set(currentSlide, {className: '-=active'})
.set(nextSlide, {className: '+=active', autoAlpha: 1})
.set(nextImg, {autoAlpha: 0})
//title animation
.add(titleAnimationTL, 0)
//image curtain animation
.add(imageAnimationTL, 0)
}
nextBtn.addEventListener('click', function(){
const currentSlide = document.querySelector('.slide.active');
const nextSlide = currentSlide.nextElementSibling;
goToNextSlide(currentSlide, nextSlide, 'next');
if (nextSlide.dataset.index == slides.length) {
nextBtn.classList.add('disabled');
} else {
prevBtn.classList.remove('disabled');
}
})
init();
prevBtn.addEventListener('click', function(){
const currentSlide = document.querySelector('.slide.active');
const prevSlide = currentSlide.previousElementSibling;
goToNextSlide(currentSlide, prevSlide, 'prev');
if (prevSlide.dataset.index == 1) {
prevBtn.classList.add('disabled');
} else {
nextBtn.classList.remove('disabled');
}
})
setTimeout( () => {
document.body.classList.remove("loading");
document.body.classList.add("is-ready");
setTimeout( () => {
introItems.forEach( item => item.classList.remove('intro') );
// prevBtn.classList.add('disabled');
}, 2000 )
} , 2000)
</script>
@import url("https://use.typekit.net/zai6xre.css");
:root {
--futura: futura-pt, sans-serif;
--miller: miller-banner, serif;
--black: #000000;
--white: #ffffff;
}
#slideshow {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slide {
grid-column: 1/13;
grid-row: 1/13;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slide__img {
grid-column: 4/13;
grid-row: 3/span 6;
position: relative;
margin: 0;
overflow: hidden;
}
@media only screen and (min-width: 750px) {
.slide__img {
grid-row-start: 4;
}
}
@media only screen and (min-width: 1080px) {
.slide__img {
grid-column: 6/12;
grid-row: 4/span 7;
}
}
.slide__img-curtain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--black);
transform: translateX(-101%);
z-index: 2;
}
.slide__img img {
width: 100%;
height: 100%;
object-fit: cover;
max-width: 100%;
}
.intro .slide__img img {
transition: all 1.5s 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.loading .intro .slide__img img {
transform: scale(1.3);
opacity: 0;
}
.slide__title {
position: relative;
grid-column: 2/12;
grid-row: 4/span 3;
font-family: var(--miller);
font-weight: 300;
font-size: 42px;
font-style: normal;
z-index: 2;
margin: 0;
}
.intro .slide__title {
transition: all 1.5s 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.loading .intro .slide__title {
transform: translateY(40px);
opacity: 0;
}
@media only screen and (min-width: 750px) {
.slide__title {
font-size: 90px;
grid-row-start: 5;
}
}
@media only screen and (min-width: 1080px) {
.slide__title {
grid-column-start: 4;
font-size: 100px;
}
}
@media only screen and (min-width: 1080px) {
.slide__link {
grid-column: 4/span 2;
}
}
.slideshow-nav {
position: absolute;
right: 5vw;
bottom: 10vh;
}
@media only screen and (min-width: 1080px) {
.slideshow-nav {
position: relative;
grid-column: 6/12;
grid-row: 11/13;
right: unset;
bottom: unset;
display: flex;
justify-content: flex-end;
margin-right: -4px;
}
}
.slideshow-nav__btn {
background: none;
border: none;
margin: 0 8px;
cursor: pointer;
transition: all 0.8s 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.slideshow-nav__btn--next {
transition-delay: 0.8s;
}
.slideshow-nav__btn:focus {
outline: none;
}
.slideshow-nav__btn.disabled {
pointer-events: none;
opacity: 0.3;
}
@media only screen and (min-width: 1080px) {
.slideshow-nav__btn {
margin: 0;
padding: 0;
}
.slideshow-nav__btn:first-of-type {
margin-right: 16px;
}
}
.slideshow-nav__btn svg {
width: 24px;
height: 24px;
}
