Permalink
Browse files

Fixes and removed the need for the dreaded 'adujster' argument

1 parent 7d5113c commit 86ca1dfb48fc8e3980e413685e07e2137ec4c762 @IanLunn committed Jul 12, 2012
Showing with 100 additions and 27 deletions.
  1. +6 −1 README.markdown
  2. +19 −21 index.html
  3. +69 −0 scripts/jquery.parallax-1.1.3.js
  4. +6 −5 style.css
View
@@ -4,8 +4,9 @@ jQuery Parallax
jQuery Parallax is a script that simulates the parallax effect as seen on [nikebetterworld.com](http://www.nikebetterworld.com/).
Plugin: jQuery Parallax
-Version: 1.1.2
+Version: 1.1.23
Author: [Ian Lunn](http://www.ianlunn.co.uk/)
+Twitter: [@IanLunn](http://www.twitter.com/IanLunn)
Demo: [jQuery Vertical Parallax Demo](http://www.ianlunn.co.uk/plugins/jquery-parallax/)
Tutorial: [Nikebetterworld Parallax Effect Demo](http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/)
@@ -16,6 +17,10 @@ http://www.gnu.org/licenses/gpl.html
Updates
-------
+12/6/2012 - Fixed a few demo bugs and made easier to use
+ - Fixed a bug that prevented the third section from working
+ - Removed the need to use the adjuster value
@ishake
ishake Oct 1, 2013

Not sure this code completely removes the need for an adjuster. For example, say I have a background that is 500px, a parallax box that is 300px high, and a browser window that is 1000px high, then the background will start out too low.

Great plugin, though!

+
8/5/2012 - Fixed height/outerHeight parameter
- Smoother effect when scrolling
- Fixed positioning with scaled backgrounds
View
@@ -5,28 +5,21 @@
<title>jQuery Parallax Plugin Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
-<script type="text/javascript" src="scripts/jquery.parallax-1.1.2.js"></script>
+<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#nav').localScroll(800);
- RepositionNav();
-
- $(window).resize(function(){
- RepositionNav();
- });
-
- //.parallax(xPosition, adjuster, inertia, outerHeight) options:
+ //.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
- //adjuster - y position to start from
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
- $('#intro').parallax("50%", 0, 0.1, true);
- $('#second').parallax("50%", 0, 0.1, true);
- $('.bg').parallax("50%", 2500, 0.4, true);
- $('#third').parallax("50%", 2750, 0.3, true);
+ $('#intro').parallax("50%", 0.1);
+ $('#second').parallax("50%", 0.1);
+ $('.bg').parallax("50%", 0.4);
+ $('#third').parallax("50%", 0.3);
})
</script>
@@ -70,22 +63,27 @@
</div> <!--#third-->
<div id="fifth">
- <div class="story">
- <p>This demo is based on the <a href="http://www.nikebetterworld.com" title="Nike Better World">Nikebetterworld.com</a> website.</p>
-
+ <div class="story">
+ <p>Check out my new plugin <a href="http://www.sequencejs.com" title="Sequence.js">Sequence.js</a> for parallax effects and a whole lot more!</p>
+
+ <h2>Ian Lunn</h2>
+ <ul>
+ <li><strong>Twitter</strong>: <a href="http://www.twitter.com/IanLunn" title="Follow Ian on Twitter">@IanLunn</a></li>
+ <li><strong>GitHub</strong>: <a href="http://www.github.com/IanLunn" title="Follow Ian on GitHub">IanLunn</a></li>
+ <li><strong>Website</strong>: <a href="http://www.ianlunn.co.uk/" title="Ian Lunn Design">www.ianlunn.co.uk</a></li>
+ </ul>
+
+ <p>This demo is based on the <a href="http://www.nikebetterworld.com" title="Nike Better World">Nikebetterworld.com</a> website.</p>
+
<h2>Credits</h2>
<p>This plugin makes use of some scripts and images made by others:</p>
<ul>
<li><a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html" title="jQuery ScrollTo">jQuery ScrollTo</a></li>
- <li><a href="http://www.fontdeck.com/" title="Licensed fonts from FontDeck">Licensed fonts from FontDeck</a></li>
<li><a href="http://downloads.dvq.co.nz/" title="Background Textures">Wooden and Pyschedlic Background Textures</a></li>
<li><a href="http://www.sxc.hu/photo/931435" title="Trainers Image">Trainers Image</a></li>
<li><a href="http://www.sxc.hu/photo/1015485" title="Basketball Image">Basketball Image</a></li>
<li><a href="http://www.sxc.hu/photo/563767" title="Bottles Image">Bottles Image</a></li>
- </ul>
-
- <p class="center">P.S - You've scrolled <span id="pixels">0</span> Pixels. Oh Yeah!</p>
-
+ </ul>
</div> <!--.story-->
</div> <!--#fifth-->
</body>
@@ -0,0 +1,69 @@
+/*
+Plugin: jQuery Parallax
+Version 1.1.3
+Author: Ian Lunn
+Twitter: @IanLunn
+Author URL: http://www.ianlunn.co.uk/
+Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
+
+Dual licensed under the MIT and GPL licenses:
+http://www.opensource.org/licenses/mit-license.php
+http://www.gnu.org/licenses/gpl.html
+*/
+
+(function( $ ){
+ var $window = $(window);
+ var windowHeight = $window.height();
+
+ $window.resize(function () {
+ windowHeight = $window.height();
+ });
+
+ $.fn.parallax = function(xpos, speedFactor, outerHeight) {
+ var $this = $(this);
+ var getHeight;
+ var firstTop;
+ var paddingTop = 0;
+
+ //get the starting position of each element to have parallax applied to it
+ $this.each(function(){
+ firstTop = $this.offset().top;
+ });
+
+ if (outerHeight) {
+ getHeight = function(jqo) {
+ return jqo.outerHeight(true);
+ };
+ } else {
+ getHeight = function(jqo) {
+ return jqo.height();
+ };
+ }
+
+ // setup defaults if arguments aren't specified
+ if (arguments.length < 1 || xpos === null) xpos = "50%";
+ if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
+ if (arguments.length < 3 || outerHeight === null) outerHeight = true;
+
+ // function to be called whenever the window is scrolled or resized
+ function update(){
+ var pos = $window.scrollTop();
+
+ $this.each(function(){
+ var $element = $(this);
+ var top = $element.offset().top;
+ var height = getHeight($element);
+
+ // Check if totally above or totally below viewport
+ if (top + height < pos || top > pos + windowHeight) {
+ return;
+ }
+
+ $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
+ });
+ }
+
+ $window.bind('scroll', update).resize(update);
+ update();
+ };
+})(jQuery);
View
@@ -1,7 +1,8 @@
/*
Plugin: jQuery Parallax
-Version 1.1.2
-Author: Ian Lunn
+Version 1.1.3
+Author: Ian Lunn
+Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
@@ -14,7 +15,7 @@ License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike
body{
margin: 0;
min-width: 980px;
- padding: 0;
+ padding: 0;
}
p{
@@ -81,11 +82,11 @@ h2{
}
#intro{
- background:url(images/firstBG.jpg) 50% -75px no-repeat fixed;
+ background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;
color: white;
height: 600px;
margin: 0 auto;
- padding: 160px 0 0 0;
+ padding: 0;
}
#second{

0 comments on commit 86ca1df

Please sign in to comment.