Permalink
Browse files

Merge pull request #1 from fidian/master

Cleaned up code, fix a couple bugs
  • Loading branch information...
2 parents 1ee33a2 + dabf9a7 commit 7d5113ca746d688acff5678c53e12a4c473ce385 @IanLunn committed Jun 11, 2012
Showing with 72 additions and 91 deletions.
  1. +8 −2 README.markdown
  2. +1 −1 index.html
  3. +61 −0 scripts/jquery.parallax-1.1.2.js
  4. +0 −86 scripts/jquery.parallax-1.1.js
  5. +2 −2 style.css
View
@@ -4,7 +4,7 @@ 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.1
+Version: 1.1.2
Author: [Ian Lunn](http://www.ianlunn.co.uk/)
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,4 +16,10 @@ http://www.gnu.org/licenses/gpl.html
Updates
-------
-26/10/2011 - Updated to work with jQuery 1.6.4
+8/5/2012 - Fixed height/outerHeight parameter
+ - Smoother effect when scrolling
+ - Fixed positioning with scaled backgrounds
+ - Reduced code
+ - Now passes jsl 0.3.0 without warnings
+
+26/10/2011 - Updated to work with jQuery 1.6.4
View
@@ -5,7 +5,7 @@
<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.js"></script>
+<script type="text/javascript" src="scripts/jquery.parallax-1.1.2.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">
@@ -0,0 +1,61 @@
+/*
+Plugin: jQuery Parallax
+Version 1.1.2
+Author: Ian Lunn
+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, adjuster, speedFactor, outerHeight) {
+ var $this = $(this);
+ var getHeight;
+
+ 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 || adjuster === null) adjuster = 0;
+ if (arguments.length < 3 || speedFactor === null) speedFactor = 0.1;
+
+ // 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((adjuster - pos + top) * speedFactor) + "px");
+ });
+ }
+
+ $window.bind('scroll', update).resize(update);
+ update();
+ };
+})( jQuery );
@@ -1,86 +0,0 @@
-/*
-Plugin: jQuery Parallax
-Version 1.1
-Author: Ian Lunn
-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 that places the navigation in the center of the window
-function RepositionNav(){
- var windowHeight = $(window).height(); //get the height of the window
- var navHeight = $('#nav').height() / 2;
- var windowCenter = (windowHeight / 2);
- var newtop = windowCenter - navHeight;
- $('#nav').css({"top": newtop}); //set the new top position of the navigation list
-}
-
-
-(function( $ ){
- $.fn.parallax = function(xpos, adjuster, inertia, outerHeight) {
-
-function inView(pos, element){
-
- element.each(function(){ //for each selector, determine whether it's inview and run the move() function
-
- var element = $(this);
- var top = element.offset().top;
-
- if(outerHeight == true){
- var height = element.outerHeight(true);
- }else{
- var height = element.height();
- }
-
- //above & in view
- if(top + height >= pos && top + height - windowHeight < pos){
- move(pos, height);
- }
-
- //full view
- if(top <= pos && (top + height) >= pos && (top - windowHeight) < pos && top + height - windowHeight > pos){
- move(pos, height);
- }
-
- //below & in view
- if(top + height > pos && top - windowHeight < pos && top > pos){
- move(pos, height);
- }
- });
-}
-
- var $window = $(window);
- var windowHeight = $(window).height();
- var pos = $window.scrollTop(); //position of the scrollbar
- var $this = $(this);
-
- //setup defaults if arguments aren't specified
- if(xpos == null){xpos = "50%"}
- if(adjuster == null){adjuster = 0}
- if(inertia == null){inertia = 0.1}
- if(outerHeight == null){outerHeight = true}
-
- height = $this.height();
- $this.css({'backgroundPosition': newPos(xpos, outerHeight, adjuster, inertia)});
-
- function newPos(xpos, windowHeight, pos, adjuster, inertia){
- return xpos + " " + Math.round((-((windowHeight + pos) - adjuster) * inertia)) + "px";
- }
-
- //function to be called whenever the window is scrolled or resized
- function move(pos, height){
- $this.css({'backgroundPosition': newPos(xpos, height, pos, adjuster, inertia)});
- }
-
- $window.bind('scroll', function(){ //when the user is scrolling...
- var pos = $window.scrollTop(); //position of the scrollbar
- inView(pos, $this);
-
- $('#pixels').html(pos);
- })
- }
-})( jQuery );
View
@@ -1,6 +1,6 @@
/*
Plugin: jQuery Parallax
-Version 1.1
+Version 1.1.2
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
@@ -132,4 +132,4 @@ h2{
padding: 100px 0 0 0;
position: relative;
width: 350px;
-}
+}

0 comments on commit 7d5113c

Please sign in to comment.