LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS
body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  background: url(http://andrewashley.co.nz/code-examples/Christmas/res/bg.jpg) bottom right no-repeat;
  background-size: cover;
  position: relative;
  opacity: 0;
}
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}
.merry-christmas {
  width: 80vmin;
  position: absolute;
  top: 10%;
  left: 10%;
}
.snowmen {
  width: 21vw;
  position: absolute;
  bottom: 0;
  left: 0;
}
.hand {
  width: 4vw;
  position: absolute;
  right: 1vw;
  bottom: 5.2vw;
  z-index: -1;
}
.sleigh {
  width: 80vmin;
  position: absolute;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.house {
  width: 45vw;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 500;
}
.santa {
  width: 2.5vw;
  position: absolute;
  bottom: 20vw;
  right: 20.5vw;
  z-index: 400;
}
JS
var tlBody = new TimelineMax(),
	  tlWave = new TimelineMax({repeat: -1, yoyo: true,}),
		tlSanta = new TimelineMax({repeat: -1, delay: 1, repeatDelay:10, yoyo: true}),
		tlSleigh = new TimelineMax({delay: 1, repeat: -1, repeatDelay:20});


function init() {
	var w = window.innerWidth,
			h = window.innerHeight,
			w2 = w * 2,
			sleigh = document.getElementsByClassName('sleigh'),
			hand = document.getElementsByClassName('hand'),
			santa = document.getElementsByClassName('santa'),
			sleighTime = w / 150;

	// Functions
	function getRandomIntInclusive(min, max) {
			min = Math.ceil(min);
			max = Math.floor(max);
			return Math.floor(Math.random() * (max - min + 1)) + min;
	}


	
	tlBody.to($('body'), 1, { opacity: 1 });
	tlWave.to(hand, 1, { rotation: -20, transformOrigin: "left bottom",  ease: Power0.easeNone });
	tlSanta.fromTo(santa, 1, { css: { bottom: "20vw" } }, { css: { bottom: "23.3vw" },  });
	tlSleigh.to(sleigh, sleighTime, { x: w2, ease: Power0.easeNone,  });
}

init();



(function($,sr){
  // debouncing function from John Hann : http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;
      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null; 
          };
          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);
          timeout = setTimeout(delayed, threshold || 100); 
      };
  }
	jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');


$(window).smartresize(function(){
	tlBody.restart();
	tlWave.restart();
	tlSanta.restart();
	tlSleigh.restart();
});
Term
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv