LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  background: #3a2660;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
  
  align-items: center;
  justify-content: center;
}

#face{
  height: 100vh;
  position: absolute;
}

#binoculars {
  height: 107vh;
  position: absolute;
}

#stars {
  height: 100vh;
  position: absolute;
}
JS
!function(a,b,c,d){
  
  "use strict";
  
  function e(b,c){
  this._name= f,
  this._defaults= g,
  this.element= b,
  this.options= a.extend({},g,c),
  this.init()}
  var f="parallaxmouse",
      g={range:100,elms:[],invert:!1};
      a.extend(e.prototype,{init:function(){this.element=a(this.element),this.setInitialPositions(this.options.elms),this.parallaxElms(this.options.elms)},setInitialPositions:function(){a(this.options.elms).each(function(a,b){var c=b.el.position();b.el.hasClass("left")?(b.x=c.left,b.left=!0):(b.x=parseInt(b.el.css("right").replace("px")),b.left=!1),b.el.hasClass("top")?(b.y=c.top,b.top=!0):(b.y=parseInt(b.el.css("bottom").replace("px")),b.top=!1)})},parallaxElms:function(){var b=this;this.element.on("mousemove",function(c){var d=b.element.outerWidth(),e=b.element.outerHeight(),f=c.clientX,g=c.clientY,h=f/d,i=g/e;a(b.options.elms).each(function(a,c){var d=b.options.invert,e=b.options.range*h,f=b.options.range*i,g=d?c.x+e:c.x-e,j=d?c.y+f:c.y-f,k=g*c.rate,l=j*c.rate;c.left?c.el.css("left",c.x+-1*k):c.el.css("right",c.x+k),c.top?c.el.css("top",c.y+-1*l):c.el.css("bottom",c.y+l)})})}}),a.fn[f]=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);

$(document).ready(function(){

	$(window).parallaxmouse({
                invert: true,
                range: 350,
                elms: [

     {el: $('#face'), rate: 0.03}, 
     {el: $('#binoculars'), rate: 0.05},  
     {el: $('#stars'), rate: 0.07},                                  ]
            });
});

Description

SVG in the night! Stars, darkness and adventure. Experiments in gradient animation and a small parallax effect
Term
Wed, 11/29/2017 - 14:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv