LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.preloader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.preloader .square {
  position: relative;
  width: 20%;
  height: 33.3333%;
  float: left;
}
.preloader .square-inner {
  width: 101%;
  height: 100%;
  margin-right: -1px;
  background-color: #2ecc71;
}
.preloader .square-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0;
}
JS
var site = site || {};
site.window = $(window);
site.document = $(document);

var PageTransition = function() {

   var self = this;

   site.window.on('resize', function(){
     //self.resize();
   });

   //self.resize();

   TweenMax.set('.square', { perspective: '600px' });
  
   TweenMax.set('.square-inner', { backfaceVisibility: 'hidden' });

   TweenMax.set('.from-bottom', { perspectiveOrigin: '50% 100%' });
   TweenMax.set('.from-bottom .square-inner', { force3D: true, transformOrigin: '50% 100% 0' });

   TweenMax.set('.from-right', { perspectiveOrigin: '100% 50%' });
   TweenMax.set('.from-right .square-inner', { force3D: true, transformOrigin: '100% 50% 0' });

   TweenMax.set('.from-left', { perspectiveOrigin: '0 50%' });
   TweenMax.set('.from-left .square-inner', { force3D: true, transformOrigin: '0 50% 0' });

   self.hide();
  
   return self;
}

// Hide transition
PageTransition.prototype.hide = function() {   

   var self = this;

   self.pagetransitionTL = new TimelineMax({ yoyo:true, repeat: -1, onComplete: function() {
      //complete
   }});

   var transitionTime = .3;
   var transformPerspective = 0;
   var easeEffect = 'Linear.easeNone';
   //var easeEffect = 'Power2.easeOut';
  //var easeEffect = 'Expo.easeInOut';
   var degrees = 92;
   var opacity = .6;

   self.pagetransitionTL
   .to('.square-1 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl0")
   .to('.square-1 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl0")
   
   .to('.square-2 .square-inner, .square-6 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl1")
   .to('.square-2 .square-overlay, .square-6 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl1")

   .to('.square-3 .square-inner, .square-7 .square-inner, .square-11 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl2")
   .to('.square-5 .square-inner', transitionTime, { rotationY: degrees, ease: easeEffect }, "tl2")
   .to('.square-3 .square-overlay, .square-7 .square-overlay, .square-11 .square-overlay, .square-5 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl2")

   .to('.square-8 .square-inner, .square-12 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl3")
   .to('.square-4 .square-inner', transitionTime, { rotationX: degrees, ease: easeEffect }, "tl3")
   .to('.square-10 .square-inner', transitionTime, { rotationY: degrees, ease: easeEffect }, "tl3")
   .to('.square-8 .square-overlay, .square-12 .square-overlay, .square-4 .square-overlay, .square-10 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl3")
   
   .to('.square-13 .square-inner', transitionTime, { rotationY: -degrees, ease: easeEffect }, "tl4")
   .to('.square-9 .square-inner', transitionTime, { rotationX: degrees, ease: easeEffect }, "tl4")
   .to('.square-15 .square-inner', transitionTime, { rotationY: degrees, ease: easeEffect }, "tl4")
   .to('.square-13 .square-overlay, .square-9 .square-overlay, .square-15 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl4")

   .to('.square-14 .square-inner', transitionTime, { rotationX: degrees, ease: easeEffect }, "tl5")
   .to('.square-14 .square-overlay', transitionTime, { opacity: opacity, ease: easeEffect }, "tl5");

}

PageTransition.prototype.resize = function() {

    squareW = Math.floor(site.Width / 5);
    squareH = Math.floor(site.Height / 3);

    $('.square').width(squareW).height(squareH);
}

site.pt = new PageTransition();
Host Instantly Drag and Drop Website Builder

 

Description

Experimenting with a new transition between pages
Term
Mon, 11/27/2017 - 22:15

Related Codes

Pen ID
Pen ID
Pen ID