Divs scrolling at different speeds.
A Pen by Josh Parrett on CodePen.
<div class="content"> | |
<div class="wrapper"> | |
<div class="box" data-scroll-speed="2">S</div> | |
<div class="box" data-scroll-speed="3">C</div> | |
<div class="box" data-scroll-speed="6">R</div> | |
<div class="box" data-scroll-speed="5">O</div> | |
<div class="box" data-scroll-speed="9">L</div> | |
<div class="box" data-scroll-speed="4">L</div> | |
</div> | |
</div> |
Divs scrolling at different speeds.
A Pen by Josh Parrett on CodePen.
$.fn.moveIt = function(){ | |
var $window = $(window); | |
var instances = []; | |
$(this).each(function(){ | |
instances.push(new moveItItem($(this))); | |
}); | |
window.onscroll = function(){ | |
var scrollTop = $window.scrollTop(); | |
instances.forEach(function(inst){ | |
inst.update(scrollTop); | |
}); | |
} | |
} | |
var moveItItem = function(el){ | |
this.el = $(el); | |
this.speed = parseInt(this.el.attr('data-scroll-speed')); | |
}; | |
moveItItem.prototype.update = function(scrollTop){ | |
this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)'); | |
}; | |
// Initialization | |
$(function(){ | |
$('[data-scroll-speed]').moveIt(); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import bourbon | |
body | |
font-family: arial, sans-serif | |
.content | |
height: 5000px | |
.wrapper | |
+display(flex) | |
+justify-content(center) | |
+align-items(center) | |
+size(100% 100vh) | |
+position(fixed, 0px null null 0px) | |
.box | |
+flex(none) | |
+size(100px) | |
line-height: 100px | |
text-align: center | |
font-size: 25px | |
color: #fff | |
background: #ff8330 | |
&:nth-of-type(2) | |
background: #E01B5D | |
&:nth-of-type(3) | |
background: #30FFFF | |
&:nth-of-type(4) | |
background: #B3FF30 | |
&:nth-of-type(5) | |
background: #308AFF | |
&:nth-of-type(6) | |
background: #1BE059 |