Parallax.Js Test
How do I make an parallax.js test?
Matthew Wagerfield & Claudio Guglieri Parallax.js test.. What is a parallax.js test? How do you make a parallax.js test? This script and codes were developed by Shak Daniel on 24 September 2022, Saturday.
Parallax.Js Test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax.Js Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul id="scene"> <li class="layer" data-depth="0.0"><img src="http://www.wultim.com/demo/wp-content/uploads/2013/05/Color_Splash1.png"/></li> <li class="layer" data-depth="0.2"><img src="http://upload.wikimedia.org/wikipedia/en/e/ec/Bowser_-_New_Super_Mario_Bros_2.png"/></li> <li class="layer" data-depth="0.4"><img src="http://th05.deviantart.net/fs70/PRE/f/2013/120/7/b/png_monsters_inc_by_upinflames12-d63nx7i.png"/></li> <li class="layer" data-depth="0.9"><img src="http://images1.wikia.nocookie.net/__cb20120317184555/mario/images/thumb/5/5c/Jumping_Mario_Artwork_-_New_Super_Mario_Bros._Wii.png/881px-Jumping_Mario_Artwork_-_New_Super_Mario_Bros._Wii.png"/></li>
</ul>
<svg> <filter id="blur1"> <feGaussianBlur stdDeviation="8"></feGaussianBlur> </filter> <filter id="blur2"> <feGaussianBlur stdDeviation="5"></feGaussianBlur> </filter> <filter id="blur3"> <feGaussianBlur stdDeviation="2"></feGaussianBlur> </filter> <filter id="blur4"> <feGaussianBlur stdDeviation="0"></feGaussianBlur> </filter>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Parallax.Js Test - Script Codes CSS Codes
html,
body { height: 80%; width: 80%; padding: 10%;
}
img { display: block; width: 30%; height: auto; margin: auto;
}
.scene { position: relative; max-width: 500px; margin: auto; padding: 0;
}
.layer:nth-child(1) { opacity: 0.75; -webkit-filter: url("#blur1"); filter: url("#blur1");
}
.layer:nth-child(2) { opacity: 1; -webkit-filter: url("#blur2"); filter: url("#blur2");
}
.layer:nth-child(3) { opacity: 1; -webkit-filter: url("#blur3"); filter: url("#blur3");
}
.layer:nth-child(4) { opacity: 1; -webkit-filter: url("#blur4"); filter: url("#blur4");
}
.layer:after { content: ''; background: rgba(255,255,255,0.3);
}
Parallax.Js Test - Script Codes JS Codes
/********************************
https://twitter.com/Shak_Dizzle
http://instagram.com/shak_dizzle
http://dribbble.com/shakdaniel
********************************/
// Code below is by Matthew Wagerfield
(function(t,i,e){function s(t,i){this.element=t,this.layers=t.getElementsByClassName("layer");var e={calibrateX:this.data(this.element,"calibrate-x"),calibrateY:this.data(this.element,"calibrate-y"),invertX:this.data(this.element,"invert-x"),invertY:this.data(this.element,"invert-y"),limitX:this.data(this.element,"limit-x"),limitY:this.data(this.element,"limit-y"),scalarX:this.data(this.element,"scalar-x"),scalarY:this.data(this.element,"scalar-y"),frictionX:this.data(this.element,"friction-x"),frictionY:this.data(this.element,"friction-y")};for(var s in e)null===e[s]&&delete e[s];this.extend(this,a,i,e),this.calibrationTimer=null,this.calibrationFlag=!0,this.enabled=!1,this.depths=[],this.raf=null,this.ox=0,this.oy=0,this.ow=0,this.oh=0,this.cx=0,this.cy=0,this.ix=0,this.iy=0,this.mx=0,this.my=0,this.vx=0,this.vy=0,this.onMouseMove=this.onMouseMove.bind(this),this.onDeviceOrientation=this.onDeviceOrientation.bind(this),this.onOrientationTimer=this.onOrientationTimer.bind(this),this.onCalibrationTimer=this.onCalibrationTimer.bind(this),this.onAnimationFrame=this.onAnimationFrame.bind(this),this.onWindowResize=this.onWindowResize.bind(this),this.initialise()}var n="Parallax",o=30,a={calibrationThreshold:100,calibrationDelay:500,supportDelay:500,calibrateX:!1,calibrateY:!0,invertX:!0,invertY:!0,limitX:!1,limitY:!1,scalarX:10,scalarY:10,frictionX:.1,frictionY:.1};s.prototype.extend=function(){if(arguments.length>1)for(var t=arguments[0],i=1,e=arguments.length;e>i;i++){var s=arguments[i];for(var n in s)t[n]=s[n]}},s.prototype.data=function(t,i){return this.deserialize(t.getAttribute("data-"+i))},s.prototype.deserialize=function(t){return"true"===t?!0:"false"===t?!1:"null"===t?null:!isNaN(parseFloat(t))&&isFinite(t)?parseFloat(t):t},s.prototype.offset=function(t){for(var i=0,e=0;t&&!isNaN(t.offsetLeft)&&!isNaN(t.offsetTop);)i+=t.offsetLeft-t.scrollLeft,e+=t.offsetTop-t.scrollTop,t=t.offsetParent;return{top:e,left:i}},s.prototype.camelCase=function(t){return t.replace(/-+(.)?/g,function(t,i){return i?i.toUpperCase():""})},s.prototype.transformSupport=function(s){for(var n=i.createElement("div"),o=!1,a=null,r=!1,h=null,l=null,p=0,m=this.vendors.length;m>p;p++)if(null!==this.vendors[p]?(h=this.vendors[p][0]+"transform",l=this.vendors[p][1]+"Transform"):(h="transform",l="transform"),n.style[l]!==e){o=!0;break}switch(s){case"2D":r=o;break;case"3D":o&&(i.body.appendChild(n),n.style[l]="translate3d(1px,1px,1px)",a=t.getComputedStyle(n).getPropertyValue(h),r=a!==e&&a.length>0&&"none"!==a,i.body.removeChild(n))}return r},s.prototype.ww=null,s.prototype.wh=null,s.prototype.hw=null,s.prototype.hh=null,s.prototype.portrait=null,s.prototype.desktop=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),s.prototype.vendors=[null,["-webkit-","webkit"],["-moz-","Moz"],["-o-","O"],["-ms-","ms"]],s.prototype.motionSupport=!!t.DeviceMotionEvent,s.prototype.orientationSupport=!!t.DeviceOrientationEvent,s.prototype.orientationStatus=0,s.prototype.transform2DSupport=s.prototype.transformSupport("2D"),s.prototype.transform3DSupport=s.prototype.transformSupport("3D"),s.prototype.initialise=function(){this.transform3DSupport&&this.accelerate(this.element);var i=t.getComputedStyle(this.element);"static"===i.getPropertyValue("position")&&(this.element.style.position="relative");for(var e=0,s=this.layers.length;s>e;e++){var n=this.layers[e];this.transform3DSupport&&this.accelerate(n),n.style.position=e?"absolute":"relative",n.style.display="block",n.style.height="100%",n.style.width="100%",n.style.left=0,n.style.top=0,this.depths.push(this.data(n,"depth")||0)}this.updateDimensions(),this.enable(),this.queueCalibration(this.calibrationDelay)},s.prototype.updateDimensions=function(){this.ox=this.offset(this.element).left,this.oy=this.offset(this.element).top,this.ow=this.element.offsetWidth,this.oh=this.element.offsetHeight,this.ww=t.innerWidth,this.wh=t.innerHeight,this.hw=this.ww/2,this.hh=this.wh/2},s.prototype.queueCalibration=function(t){clearTimeout(this.calibrationTimer),this.calibrationTimer=setTimeout(this.onCalibrationTimer,t)},s.prototype.enable=function(){this.enabled||(this.enabled=!0,this.orientationSupport?(this.portrait=null,t.addEventListener("deviceorientation",this.onDeviceOrientation),setTimeout(this.onOrientationTimer,this.supportDelay)):(this.cx=0,this.cy=0,this.portrait=!1,t.addEventListener("mousemove",this.onMouseMove)),t.addEventListener("resize",this.onWindowResize),this.raf=requestAnimationFrame(this.onAnimationFrame))},s.prototype.disable=function(){this.enabled&&(this.enabled=!1,this.orientationSupport?t.removeEventListener("deviceorientation",this.onDeviceOrientation):t.removeEventListener("mousemove",this.onMouseMove),t.removeEventListener("resize",this.onWindowResize),cancelAnimationFrame(this.raf))},s.prototype.calibrate=function(t,i){this.calibrateX=t===e?this.calibrateX:t,this.calibrateY=i===e?this.calibrateY:i},s.prototype.invert=function(t,i){this.invertX=t===e?this.invertX:t,this.invertY=i===e?this.invertY:i},s.prototype.friction=function(t,i){this.frictionX=t===e?this.frictionX:t,this.frictionY=i===e?this.frictionY:i},s.prototype.scalar=function(t,i){this.scalarX=t===e?this.scalarX:t,this.scalarY=i===e?this.scalarY:i},s.prototype.limit=function(t,i){this.limitX=t===e?this.limitX:t,this.limitY=i===e?this.limitY:i},s.prototype.clamp=function(t,i,e){return t=Math.max(t,i),t=Math.min(t,e)},s.prototype.css=function(t,i,s){for(var n=null,o=0,a=this.vendors.length;a>o;o++)if(n=null!==this.vendors[o]?this.camelCase(this.vendors[o][1]+"-"+i):i,t.style[n]!==e){t.style[n]=s;break}},s.prototype.accelerate=function(t){this.css(t,"transform","translate3d(0,0,0)"),this.css(t,"transform-style","preserve-3d"),this.css(t,"backface-visibility","hidden")},s.prototype.setPosition=function(t,i,e){i+="%",e+="%",this.transform3DSupport?this.css(t,"transform","translate3d("+i+","+e+",0)"):this.transform2DSupport?this.css(t,"transform","translate("+i+","+e+")"):(t.style.left=i,t.style.top=e)},s.prototype.onOrientationTimer=function(){this.orientationSupport&&0===this.orientationStatus&&(this.disable(),this.orientationSupport=!1,this.enable())},s.prototype.onCalibrationTimer=function(){this.calibrationFlag=!0},s.prototype.onWindowResize=function(){this.updateDimensions()},s.prototype.onAnimationFrame=function(){var t=this.ix-this.cx,i=this.iy-this.cy;(Math.abs(t)>this.calibrationThreshold||Math.abs(i)>this.calibrationThreshold)&&this.queueCalibration(0),this.portrait?(this.mx=(this.calibrateX?i:this.iy)*this.scalarX,this.my=(this.calibrateY?t:this.ix)*this.scalarY):(this.mx=(this.calibrateX?t:this.ix)*this.scalarX,this.my=(this.calibrateY?i:this.iy)*this.scalarY),isNaN(parseFloat(this.limitX))||(this.mx=this.clamp(this.mx,-this.limitX,this.limitX)),isNaN(parseFloat(this.limitY))||(this.my=this.clamp(this.my,-this.limitY,this.limitY)),this.vx+=(this.mx-this.vx)*this.frictionX,this.vy+=(this.my-this.vy)*this.frictionY;for(var e=0,s=this.layers.length;s>e;e++){var n=this.layers[e],o=this.depths[e],a=this.vx*o*(this.invertX?-1:1),r=this.vy*o*(this.invertY?-1:1);this.setPosition(n,a,r)}this.raf=requestAnimationFrame(this.onAnimationFrame)},s.prototype.onDeviceOrientation=function(t){if(!this.desktop&&null!==t.beta&&null!==t.gamma){this.orientationStatus=1;var i=(t.beta||0)/o,e=(t.gamma||0)/o,s=this.wh>this.ww;this.portrait!==s&&(this.portrait=s,this.calibrationFlag=!0),this.calibrationFlag&&(this.calibrationFlag=!1,this.cx=i,this.cy=e),this.ix=i,this.iy=e}},s.prototype.onMouseMove=function(t){this.ix=(t.pageX-this.hw)/this.hw,this.iy=(t.pageY-this.hh)/this.hh},t[n]=s})(window,document),function(){for(var t=0,i=["ms","moz","webkit","o"],e=0;i.length>e&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),s=Math.max(0,16-(e-t)),n=window.setTimeout(function(){i(e+s)},s);return t=e+s,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}();var scene =
document.getElementById('scene');
var scene = document.getElementById('scene');
var parallax = new Parallax(scene, { calibrateX: false, calibrateY: true, invertX: false, invertY: true, limitX: false, limitY: false, scalarX: -50, scalarY: 100, frictionX: .1, frictionY: .1
});
Developer | Shak Daniel |
Username | shakdaniel |
Uploaded | September 24, 2022 |
Rating | 3.5 |
Size | 5,766 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Halloween CSS Candy | 3,155 Kb |
Fancy menu toggle | 2,458 Kb |
Cool Blur Effect | 2,603 Kb |
A Pen by Shak Daniel | 3,347 Kb |
Cute Loading | 2,589 Kb |
My CSS Logo | 2,703 Kb |
Pure CSS Terminal | 2,951 Kb |
Prescreen | 3,235 Kb |
Drag -n- Blur | 2,827 Kb |
Use a finger | 2,318 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Modal Dialog | Gigaleet | 2,251 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!