JQuery Parallax Plugin
How do I make an jquery parallax plugin?
Simply use .parallax(); on any absolute element with a background you'd like to parallax. What is a jquery parallax plugin? How do you make a jquery parallax plugin? This script and codes were developed by Matt Wisniewski on 03 December 2022, Saturday.
JQuery Parallax Plugin Previews
JQuery Parallax Plugin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Parallax Plugin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html lang="en-US">
<head> <meta charset="UTF-8"><!doctype html>
<html lang="en-US">
<head> <meta charset="UTF-8"> <title>jQuery Parallax Plugin</title> <script src="https://codeorigin.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="parallax.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Molle:400italic' rel='stylesheet' type='text/css'> <link href="http://mattscode.io/files/bcl/bcs.css" rel="stylesheet" type="text/css">
</head>
<body>
<style type="text/css"> body{ -webkit-background-size: 30px 0px; -moz-background-size: 30px 30px; background-size: 30px 30px; /* Controls the size of the stripes */ background-color: #ac0; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } .parent{ width:500px; height:450px; margin: 0 auto; background: url('http://mattscode.io/files/jQueryParallax/stary/bg.png') 70% ; position: relative; overflow: hidden; } .child1{ position: absolute; left:0; width: 500px; height: 500px; background: url('http://mattscode.io/files/jQueryParallax/stary/mtn.png') 50%; z-index: 1; } .child2{ position: absolute; left: 0; width: 500px; height: 500px; background: url('http://mattscode.io/files/jQueryParallax/stary/city.png') 50%; z-index: 2; } .child3{ position: absolute; left: 0; width: 500px; height: 500px; background: url('http://mattscode.io/files/jQueryParallax/stary/tree.png') 50%; z-index: 3; } .parent h1{ position: absolute; top:30%; width: 500px; text-align: center; z-index: 4; color:#fff; font-size:27pt; font-family: 'Molle', cursive; } .grid{ width: 500px; margin: 0 auto; }
</style>
<div class="nav inverse"> <div class="grid"> <ul> <li class="title">Simply.parallax();</li> <li><a href="parallax.min.js">Minified</a></li> <li><a href="parallax.js">Uncompressed</a></li> </ul> </div>
</div>
<br>
<div class="parent" data-speed="8"> <h1 class="longshadow">Matt's Parallax Plugin<br>Simply.parallax();</h1> <div class="child1" data-speed="8"></div> <div class="child2" data-speed="6"></div> <div class="child3" data-speed="4"></div>
</div>
<div class="notice inverse" style="background:#fff;color:#000;"> <div class="grid"> <h1>Usage:</h1> <p>First you must include the latest jQuery library into your page, next you link up the parallax plugin; followed by completing the following steps...</p> <h3>The HTML:</h3> <pre>
<span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>class</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"parent"</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>h1</span><span style='color:#a65700; '>></span>Optional Conent<span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>h1</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>class</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"child1"</span><span style='color:#274796; '> </span><span style='color:#074726; '>data</span><span style='color:#274796; '>-speed</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"3"</span><span style='color:#a65700; '>></span><span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>class</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"child2"</span><span style='color:#274796; '> </span><span style='color:#074726; '>data</span><span style='color:#274796; '>-speed</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"10"</span><span style='color:#a65700; '>></span><span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#a65700; '>></span>
<span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#a65700; '>></span>
</pre> <h3>The CSS:</h3> <pre>
<span style='color:#808030; '>.</span>parent<span style='color:#800080; '>{</span> <span style='color:#bb7977; font-weight:bold; '>background</span><span style='color:#808030; '>:</span> <span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#0000e6; '>'</span><span style='color:#40015a; '>bg.png</span><span style='color:#0000e6; '>'</span><span style='color:#808030; '>)</span> <span style='color:#074726; '>fixed</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>position</span><span style='color:#808030; '>:</span> <span style='color:#074726; '>relative</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span>
<span style='color:#808030; '>.</span>child1<span style='color:#800080; '>{</span> <span style='color:#bb7977; font-weight:bold; '>position</span><span style='color:#808030; '>:</span> <span style='color:#074726; '>absolute</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>background</span><span style='color:#808030; '>:</span> <span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#0000e6; '>'</span><span style='color:#40015a; '>img/mountains.png</span><span style='color:#0000e6; '>'</span><span style='color:#808030; '>)</span> <span style='color:#008c00; '>100</span><span style='color:#006600; '>%</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span>
<span style='color:#808030; '>.</span>child2<span style='color:#800080; '>{</span> <span style='color:#bb7977; font-weight:bold; '>position</span><span style='color:#808030; '>:</span> <span style='color:#074726; '>absolute</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>background</span><span style='color:#808030; '>:</span> <span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#0000e6; '>'</span><span style='color:#40015a; '>img/trees.png</span><span style='color:#0000e6; '>'</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span> </pre> <h3>The Magic:</h3>
<pre>
<span style='color:#808030; '><</span>script<span style='color:#808030; '>></span>
$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'.element'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>parallax<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#808030; '><</span><span style='color:#808030; '>/</span>script<span style='color:#808030; '>></span> </pre> <p>Optionally you can toggle between the following: <br>$('element').parallax('bindToScroll');<br> or <br> $('element').parallax('simple');<br> binding to the scroll event may cause performance issues, but will be more responsive while the simple method uses a optoized approach.</p> </div>
</div> <script type="text/javascript"> </script>
</body>
</html> <title>jQuery Parallax Plugin</title> <script src="https://codeorigin.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="parallax.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Molle:400italic' rel='stylesheet' type='text/css'> <link href="http://mattscode.io/files/bcl/bcs.css" rel="stylesheet" type="text/css">
</head>
<body>
<style type="text/css">
</style>
<div class="nav inverse"> <div class="grid"> <ul> <li class="title">Simply.parallax();</li> <li><a href="http://mattscode.io/files/jQueryParallax/parallax.min.js">Minified</a></li> <li><a href="http://mattscode.io/files/jQueryParallax/parallax.js">Uncompressed</a></li> </ul> </div>
</div>
<br>
<div class="parent"> <h1 class="longshadow">Matt's Parallax Plugin<br>Simply.parallax();</h1> <div class="child1" data-speed="3"></div> <div class="child2" data-speed="10"></div>
</div>
<div class="notice inverse" style="background:#fff;color:#000;"> <div class="grid"> <h1>Usage:</h1> <p>First you must include the latest jQuery library into your page, next you link up the parallax plugin; followed by completing the following steps...</p> <h3>The HTML:</h3> <pre>
<span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>class</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"parent"</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>h1</span><span style='color:#a65700; '>></span>Optional Conent<span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>h1</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>class</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"child1"</span><span style='color:#274796; '> </span><span style='color:#074726; '>data</span><span style='color:#274796; '>-speed</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"3"</span><span style='color:#a65700; '>></span><span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#a65700; '>></span> <span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#274796; '> </span><span style='color:#074726; '>class</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"child2"</span><span style='color:#274796; '> </span><span style='color:#074726; '>data</span><span style='color:#274796; '>-speed</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"10"</span><span style='color:#a65700; '>></span><span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#a65700; '>></span>
<span style='color:#a65700; '></</span><span style='color:#800000; font-weight:bold; '>div</span><span style='color:#a65700; '>></span>
</pre> <h3>The CSS:</h3> <pre>
<span style='color:#808030; '>.</span>parent<span style='color:#800080; '>{</span> <span style='color:#bb7977; font-weight:bold; '>background</span><span style='color:#808030; '>:</span> <span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#0000e6; '>'</span><span style='color:#40015a; '>bg.png</span><span style='color:#0000e6; '>'</span><span style='color:#808030; '>)</span> <span style='color:#074726; '>fixed</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>position</span><span style='color:#808030; '>:</span> <span style='color:#074726; '>relative</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span>
<span style='color:#808030; '>.</span>child1<span style='color:#800080; '>{</span> <span style='color:#bb7977; font-weight:bold; '>position</span><span style='color:#808030; '>:</span> <span style='color:#074726; '>absolute</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>background</span><span style='color:#808030; '>:</span> <span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#0000e6; '>'</span><span style='color:#40015a; '>img/mountains.png</span><span style='color:#0000e6; '>'</span><span style='color:#808030; '>)</span> <span style='color:#008c00; '>100</span><span style='color:#006600; '>%</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span>
<span style='color:#808030; '>.</span>child2<span style='color:#800080; '>{</span> <span style='color:#bb7977; font-weight:bold; '>position</span><span style='color:#808030; '>:</span> <span style='color:#074726; '>absolute</span><span style='color:#800080; '>;</span> <span style='color:#bb7977; font-weight:bold; '>background</span><span style='color:#808030; '>:</span> <span style='color:#400000; '>url</span><span style='color:#808030; '>(</span><span style='color:#0000e6; '>'</span><span style='color:#40015a; '>img/trees.png</span><span style='color:#0000e6; '>'</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#800080; '>}</span> </pre> <h3>The Magic:</h3>
<pre>
<span style='color:#808030; '><</span>script<span style='color:#808030; '>></span>
$<span style='color:#808030; '>(</span><span style='color:#0000e6; '>'.element'</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>parallax<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
<span style='color:#808030; '><</span><span style='color:#808030; '>/</span>script<span style='color:#808030; '>></span> </pre> </div>
</div> <script type="text/javascript"> </script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
JQuery Parallax Plugin - Script Codes CSS Codes
body{ -webkit-background-size: 30px 0px; -moz-background-size: 30px 30px; background-size: 30px 30px; /* Controls the size of the stripes */ background-color: #ac0; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } .parent{ width:500px; height:500px; margin: 0 auto; background: url('http://fc08.deviantart.net/fs43/f/2009/136/4/d/Sky_Vector_2_by_tzkracker.png') 50% fixed; position: relative; overflow: hidden; } .child1{ position: absolute; top:3em; width: 500px; height: 500px; background: url('http://mattscode.io/files/jQueryParallax/img/mountains.png') 100%; } .child2{ position: absolute; width: 500px; top:5em; height: 500px; background: url('http://mattscode.io/files/jQueryParallax/img/trees.png'); } .parent h1{ position: absolute; top:30%; width: 500px; text-align: center; z-index: 4; color:#fff; font-size:27pt; font-family: 'Molle', cursive; } .grid{ width: 500px; margin: 0 auto; }JQuery Parallax Plugin - Script Codes JS Codes
(function($) { // Direction, Speed, Effect // To find the scroll direction we need to log the last scroll direction $.fn.parallax = function(effect) { // Globals var scrolling, $pItem = $(this), lastScroll; switch (effect){ // We do not want to bind our parallax to the windows scroll as binding multiple elements // to the scroll will cause performance issues so we instead set scrolling to true once // the user scrolls, we will toggle this back off later. case 'fixedParents': $(window).bind('scroll',function(e){ fixedParents(); }); function fixedParents(){ var scrolled = $(window).scrollTop(); $pItem.css('top',(0-(scrolled*.25))+'px'); } break; // If perfomance issues are not a concern, we can bind to the scroll event. case 'bindToScroll': $(window).bind('scroll', function(event) { var nTop = -($(window).scrollTop() / $pItem.data('speed')); var coords = '50% '+ nTop + 'px'; // Set the parallax elements top to the newly calculated top $pItem.css({ backgroundPosition: coords }); }); break; default: $(window).scroll(function(){ scrolling = true; }); // Initiallize the Parallax (function(){ // If the user has scrolled, then we set the scrolling to false, it will automatically // set itself back to true if the user is still scrolling. We have defeated the performance // issue with binding too many functions to the scroll event. if (scrolling){ scrolling = false; // We will have multiple parallax effects so let's see which one the user chose. // We are now ready to create the simple parallax effect var nTop = -($(window).scrollTop() / $pItem.data('speed')); var coords = '50% '+ nTop + 'px'; // Set the parallax elements top to the newly calculated top $pItem.css({ backgroundPosition: coords }); } setTimeout(arguments.callee, 50); })(); break; } };
})(jQuery); $('.parent').parallax(); $('.child1').parallax(); $('.child2').parallax(); $('.child3').parallax();
| Developer | Matt Wisniewski |
| Username | tinderlight |
| Uploaded | December 03, 2022 |
| Rating | 3 |
| Size | 4,598 Kb |
| Views | 14,168 |
Do you need developer help for JQuery Parallax Plugin?
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!
Matt Wisniewski (tinderlight) Script Codes
| Name | Size |
| A Pen by Matt Wisniewski | 2,643 Kb |
| Fancy text thing like twitter | 3,747 Kb |
| Loading Sphere | 2,708 Kb |
| Foxtrot Admin | 2,211 Kb |
| Custom HTML5 Player Testing | 4,233 Kb |
| MattsCode.io Site | 6,445 Kb |
| Alternate Codepen Theme | 2,715 Kb |
Create amazing marketing copy with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| Learning FlexBox | Alex_rodrigues | 2,821 Kb |
| SVG Text Masking | JMChristensen | 2,141 Kb |
| Elephants Full screen site | Orrinward | 3,981 Kb |
| Blog Concept 2 | JGallardo | 2,994 Kb |
| Responsive Advert | James_zedd | 2,354 Kb |
| Import shader in three.js | Khangeldy | 2,636 Kb |
| Blackberry Mock | Zacharyolson | 1,865 Kb |
| Underlined form fields | Mitchdot | 2,323 Kb |
| JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
| A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Do you want hide your ip address?
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!