LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  • Barichara

    La Abuelita
  • Tayrona

    La playa
  • Santa Marta

    El Burro
  • Salento

    La vista
CSS
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background-color: #000;
  font-family: 'industry';
}

.slideShow {
  height: 100%;
  width: 75%;
  min-width: 750px;
  margin: 0 auto;
  overflow: visible;
}
.slideShow__container {
  height: 100%;
  width: 100%;
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  position: relative;
}
.slideShow__slide {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}
.slideShow__image {
  display: block;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.slideShow__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(225deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(225deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}
.slideShow__titleWrap {
  font-size: 1rem;
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  color: #fff;
}
.slideShow__slideTitle {
  font-weight: 300;
  z-index: 500;
  color: #fff;
  font-size: 5em;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0 0 .5rem;
  opacity: 0;
}
.slideShow__slideSubTitle {
  font-size: 1.5em;
  text-transform: uppercase;
  font-family: sans-serif;
  padding-left: .5rem;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0;
}
.slideShow__next, .slideShow__prev {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 5em;
  line-height: 1em;
  color: #fff;
}
.slideShow__next i, .slideShow__prev i {
  display: block;
  float: left;
}
.slideShow__next {
  right: 1rem;
  cursor: pointer;
}
.slideShow__prev {
  left: 1rem;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.slideShow__prev.is-inactive {
  opacity: 0.3;
  cursor: default;
}
JS
// Debounce
function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}}

var SlideShow = function() {
  
  var
    slider,
    slide,
    nextButton,
    prevButton,
    slideAmount,
    sliderWidth,
    title,
    subTitle,
    clickCounter,
    slideCounter;
  
  var _init = function () {
    slider        = document.getElementsByClassName('slideShow__container')[0];
    slide         = document.getElementsByClassName('slideShow__slide');
    slideAmount   = slide.length;
    nextButton    = document.getElementsByClassName('slideShow__next')[0];
    prevButton    = document.getElementsByClassName('slideShow__prev')[0];    
    title         = document.getElementsByClassName('slideShow__slideTitle');    
    subTitle      = document.getElementsByClassName('slideShow__slideSubTitle');    
    sliderWidth   = parseInt(getComputedStyle(slider).width);
    clickCounter  = 0;  
    slideCounter  = 0;  
    
    _eventHandlers();
    _navButtons();
    _animateSlideIn(slideCounter);
  }
  
  var _eventHandlers = function() {
    nextButton.addEventListener('click', _slideNext, false);
    prevButton.addEventListener('click', _slidePrev, false);
    window.addEventListener('resize', _resize, false);
  } 
  
  var _navButtons = function () {
    if (clickCounter === 0 ) {
      prevButton.classList.add('is-inactive')
    } else {
      prevButton.classList.remove('is-inactive')
    }
  }  
  
  var _slideNext = function() {  
    clickCounter++;    
    slideCounter = clickCounter-1;
    if(clickCounter >= slideAmount) {
      clickCounter = 0;
      slideCounter = slideAmount - 1;
    }  
    var tl = new TimelineLite();
    tl 
      .add(_animateSlideOut(slideCounter))
      .to(slider, .9, {x:-clickCounter*sliderWidth, ease: Power2.easeOut})  
      .add(_animateSlideIn(clickCounter))
    _navButtons();    
  }
  
  var _slidePrev = function() {
    if(clickCounter > 0 ) {
      clickCounter--;
      
      // _getPreviousSlide(clickCounter +1)
      var tl = new TimelineLite();
      tl
      .add(_animateSlideOut(clickCounter+1))
      .to(slider, .9, {x:'+='+sliderWidth, ease: Power2.easeOut}, '-=0.2')
      .add(_animateSlideIn(clickCounter));
      
    }    
    _navButtons();    
  }
  
  var _animateSlideIn = function(index) {
    var currentSlide  = slide[index];
    var title         =  currentSlide.children[1].children[0];
    var subTitle      =  currentSlide.children[1].children[1];
    var image         =  currentSlide.children[0];
    
    var splitTitle = new SplitText(title);
    var revertTitle = function() {
      splitTitle.revert(); 
    }
    
    TweenLite.set(title, {perspective:400});
    
    var tl            = new TimelineLite({onComplete:revertTitle });    
    tl      
      .set(title, {opacity: 1})
      .staggerFrom(splitTitle.chars, 0.8, {
        opacity:0, 
        scale:0, 
        y:80, 
        rotationX:180, 
        transformOrigin:"0% 50% -50",  
        ease:Back.easeOut
      }, 0.03)
      .fromTo(subTitle, 0.6, {y:50, opacity: 0},{y:0, opacity:1}, '-=0.3')  
      .to(image, 0.4, {scale: 1, ease:Power2.easeOut},'-=0.6' )
    return tl;
  }
  
  var _animateSlideOut = function(index) {
    var currentSlide = slide[index];
    var title         =  currentSlide.children[1].children[0];
    var subTitle      =  currentSlide.children[1].children[1];
    var image         =  currentSlide.children[0];
    
    var tl = new TimelineLite();
    tl
      .to(title, 0.3, {opacity: 0})
      .to(subTitle, 0.3, {y:50, opacity: 0}, '-=0.3')
      .to(image, 0.4, {scale: 0.8, ease:Power2.easeIn}, '-=0.3' )
    return tl;      
  }
  
  var _resize = debounce(function() {    
    sliderWidth   = parseInt(getComputedStyle(slider).width);
    sliderOffset = sliderWidth * clickCounter;
    slider.style.transform = 'matrix(1, 0, 0, 1, -'+ sliderOffset + ', 0)'
  }, 50)
  
   return {
    init: _init
  }
  
}();

SlideShow.init();
Host Instantly Drag and Drop Website Builder

 

Description

A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax.
Term
Mon, 11/27/2017 - 21:38

Related Codes

Pen ID
Pen ID
Pen ID