Skip to content
Browse files

new, simpler implementation using position:fixed layers instead.

  • Loading branch information...
1 parent 6c63e51 commit e3bd373b51029fd611cb20c0e021c8708bb4791a @redronin committed Apr 7, 2011
Showing with 64 additions and 63 deletions.
  1. +18 −0 README
  2. +12 −12 index.html
  3. +34 −51 parallax.js
View
18 README
@@ -3,5 +3,23 @@ by John Tajima, Copyright 2010
A super simple parallax-like jQuery plugin.
+Define any HTML element you want to have move with the following data attributes:
+ data-scrollFactor => +/- times the scroll amount (ie: 0.5 moves 1/2 the amount of scroll, -0.8 moves .8 times in the opposite direction)
+ data-scrollStart => absolute px from top when you want to the scroll factor to take effect
+ data-scrollEnd => absolute px from top when you wish to ignore scroll factor
+
+Define in css the elements to be position:fixed and any other important values, such as z-index.
+
+eg:
+<div class="layer1" data-scrollFactor="0.5" data-scrollStart="100" data-scrollEnd="300">My parallax element</div>
+<div class="layer2" data-scrollFactor="-0.3" data-scrollStart="200" data-scrollEnd="500">My parallax element moves up instead</div>
+
+<script>
+ $(document).parallax();
+</script>
+
+
+* Not tested in IE!
+
View
24 index.html
@@ -10,17 +10,17 @@
.frame { height: 1200px; display:block; position:relative;}
.box { padding: 10px; margin: 10px; min-height: 100px; border:1px solid #ddd; width: 30%; float:left; }
- .obj { position:absolute; padding: 20px; width: 200px; height: 100px; }
+ .obj { position:fixed; padding: 20px; width: 200px; height: 100px; }
.foreground { z-index: 20; opacity: 0.5; left: 150px; background: #ff0000;}
.midground { z-index: 10; opacity: 0.8; left: 300px; background: #00ff00;}
- .background { z-index: 1; opacity: 1; left: 350px; background: #0000ff;}
+ .background { z-index: 1; opacity: 1; left: 350px; background: #0000ff;}
#object1 { top: 300px;}
#object2 { top: 400px;}
- #object3 { top: 500px;}
- #object4 { top: 600px;}
- #object5 { top: 300px;}
- #object6 { top: 400px;}
+ #object3 { top: 1500px;}
+ #object4 { top: 1600px;}
+ #object5 { top: 2600px;}
+ #object6 { top: 2700px;}
</style>
</head>
@@ -33,11 +33,11 @@
<p>Lorem ipsum dolor sit amet</p>
</div>
- <div class="midground obj" id="object1" data-scrollFactor=".8" data-scrollStart="1" data-scrollEnd="600">
+ <div class="midground obj" id="object1" data-scrollFactor=".5" data-scrollStart="1" data-scrollEnd="600">
<h2>This is a object</h2>
</div>
- <div class="foreground obj" id="object2" data-scrollFactor=".3" data-scrollStart="1" data-scrollEnd="600">
+ <div class="foreground obj" id="object2" data-scrollFactor="-.2" data-scrollStart="1" data-scrollEnd="600">
<h3>This is another box</h3>
</div>
@@ -58,11 +58,11 @@
<!-- frame -->
<div id="beta" class="frame" style="background: #f8f; overflow:hidden">
- <div class="midground obj" id="object3" data-scrollFactor=".7" data-scrollStart="300" data-scrollEnd="700">
+ <div class="midground obj" id="object3" data-scrollFactor=".7" data-scrollStart="900" data-scrollEnd="1200">
<h2>This is a object</h2>
</div>
- <div class="foreground obj" id="object4" data-scrollFactor=".5" data-scrollStart="400" data-scrollEnd="800">
+ <div class="foreground obj" id="object4" data-scrollFactor=".5" data-scrollStart="1000" data-scrollEnd="1200">
<h3>This is another box</h3>
</div>
@@ -79,11 +79,11 @@
<!-- frame -->
<div id="gamma" class="frame" style="background: #ff8">
- <div class="midground obj" id="object5" data-scrollFactor=".4" data-scrollStart="0" data-scrollEnd="500" style="background:none">
+ <div class="midground obj" id="object5" data-scrollFactor=".4" data-scrollStart="1600" data-scrollEnd="1900" style="background:none">
<h2>This IS A CLEAR BOX</h2>
</div>
- <div class="background obj" id="object6" data-scrollFactor=".5" data-scrollStart="200" data-scrollEnd="700">
+ <div class="background obj" id="object6" data-scrollFactor="-.4" data-scrollStart="2000" data-scrollEnd="2400">
<h3>This is another box</h3>
</div>
View
85 parallax.js
@@ -3,23 +3,17 @@
* John Tajima
*
*/
-
+
(function($) {
$.fn.parallax = function(options) {
var opts = $.extend({}, $.fn.parallax.defaults, options);
-
- var windowSize = $(window).height(); // store window size
- // update window size if when gets resized
- $(window).resize(function(){
- windowSize = $(window).height();
- });
-
- // cache frames and add event listener for 'inview'
- $.fn.parallax.frames = $('.' + opts.frameClass);
- $($.fn.parallax.frames).bind('inview', frameInViewHandler);
+ var prevPos = 0; // start pos at 0
// init all data-scrollFactor elements and store orig pos & start/stop and factor
- $("[data-scrollFactor]").each(function(i,el){
+ var $layers = $("[data-scrollFactor]");
+
+ // cache some data in each layer
+ $layers.each(function(i,el){
$(el).data({
origPos: $(el).position().top,
scrollFactor: $(el).attr('data-scrollFactor'),
@@ -30,52 +24,41 @@
// listen to scrolling
$(this).scroll(function(e){
- var currPos = $(this).scrollTop();
- var frames = getVisibleFrames(currPos, currPos + windowSize);
- if (frames.length > 0) {
- $.each(frames, function(i,el){
- $(el).trigger('inview', {'currPos':currPos});
- });
- }
- });
-
- // returns frames which are currently visible in browser window
- function getVisibleFrames(top, bot) {
- return $.map($.fn.parallax.frames, function(el, i){
- var frameTop = $(el).position().top;
- var frameBot = frameTop + $(el).height();
- return ((frameTop < top && frameBot > bot) || (frameTop < bot && frameBot > top) || (frameTop > top && frameBot < bot)) ? el : null;
- });
- }
-
- // callback when frame is in view
- // repositions scrollable elements by relPos * factor
- function frameInViewHandler(e, params) {
- var $frame = $(e.target);
- var frameTop = $frame.position().top;
- var relPos = frameTop === 0 ? params.currPos : params.currPos - frameTop;
- var currPos = params.currPos;
+ var currPos = $(this).scrollTop(); // get scroll pos
+ log("curr: "+currPos);
+ var delta = currPos - prevPos;
- $frame.find('[data-scrollFactor]').each(function(i,el){
- var data = $(el).data();
- if (relPos < data.scrollStart || relPos > data.scrollEnd) {
- return;
+ // loop through all layers
+ $layers.each(function(i,el){
+ var params = $(el).data();
+
+ // calculate newPos for layer
+ var newPos = params.origPos - currPos;
+ // add/sub back in scroll range
+ if (currPos > params.scrollEnd) {
+ var amt = params.scrollEnd - params.scrollStart;
+ } else if (currPos > params.scrollStart) {
+ var amt = currPos - params.scrollStart;
+ } else {
+ var amt = 0;
}
-
- var newPos = data.origPos + (currPos - frameTop) * data.scrollFactor;
- //$(el).css({'top':newPos + 'px'});
- $(el).animate({'top':newPos+"px"}, 20);
+ newPos += amt * params.scrollFactor;
+ $(el).css({'top': newPos+"px"}); // move layer
+ //$(el).animate({'top':newPos+"px"}, 10);
});
- };
+
+ prevPos = currPos;
+ });
return this;
};
- $.fn.parallax.frames = [];
- $.fn.parallax.defaults = {
- frameClass: 'frame'
- };
+ $.fn.parallax.defaults = {};
/* private functions */
-
+ function log(msg) {
+ if (window.debug === true && console && console.log) {
+ console.log(msg);
+ }
+ }
})(jQuery);

0 comments on commit e3bd373

Please sign in to comment.
Something went wrong with that request. Please try again.