Parallax effect not working across multiple classes
I am trying to make a parallax effect and I am using jQuery for that. Here is my code:
function scrollEffectTop() {
$('[class^=scrollEffect-top-]').each(function() {
if ($('[class^=scrollEffect-top-]').length) {
var scrolled = $(window).scrollTop();
var classID_top = $('[class^=scrollEffect-top-]').attr('class').match(/\d+/)[0];
$('.scrollEffect-top-' + classID_top).css({'transform':'translateY(-' + scrolled * (classID_top / 100) + 'px)'});
}
});
}
$(window).scroll(function(e) {
scrollEffectTop();
});
Basically, I want to match the class name scrollEffect-top-
and then search for the number after. For example:, scrollEffect-top-15
means transform: translateY(- scrolled * (15 / 100)px)
or transform: translateY (- scrolled * .15)px
.
The code works well for the first class name in HTML, but if I use multiple elements with the same class name but a different number classID_top
, it doesn't work.
Note: if I use the same number the code works well.
I tried searching and found a method .each()
, but it still doesn't work.
I am using HAML, here is my code:
%section{class:"container-m relative"}
.intro-image{style:"overflow: hidden;"}
.scrollEffect-top-15
.revealedBox.goRight
%div{class:"picture-for-#{controller.action_name} contentBox"}
Here's the actual HTML:
<section class="container-m relative">
<div class="intro-image" style="overflow: hidden;">
<div class="scrollEffect-top-15">
<div class="revealBox goRight">
<div class="picture-for-#{controller.action_name} contentBox"></div>
</div>
</div>
</div>
</section>
source to share
.each()
- a good start. The function each
this
will refer to the specific element we are looking at. Any changes can be made through this and not through the class (which will affect all relevant objects).
function scrollEffectTop() {
$('[class^=scrollEffect-top-]').each(function() {
var scrolled = $(window).scrollTop();
var classID_top = $(this).attr('class').match(/\d+/)[0];
$(this).css('transform',
'translateY(-' + scrolled * (classID_top / 100) + 'px)');
});
}
$(window).scroll(function(e) {
scrollEffectTop();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container-m relative">
<div class="intro-image" style="overflow: hidden;">
<div class="scrollEffect-top-20">
<div class="revealedBox goRight">
<div class="picture-for-foo contentBox">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</section>
<section class="container-m relative">
<div class="intro-image" style="overflow: hidden;">
<div class="scrollEffect-top-21">
<div class="revealedBox goRight">
<div class="picture-for-foo contentBox">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</section>
<section class="container-m relative">
<div class="intro-image" style="overflow: hidden;">
<div class="scrollEffect-top-22">
<div class="revealedBox goRight">
<div class="picture-for-foo contentBox">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</section>
<section class="container-m relative">
<div class="intro-image" style="overflow: hidden;">
<div class="scrollEffect-top-23">
<div class="revealedBox goRight">
<div class="picture-for-foo contentBox">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</section>
<section class="container-m relative">
<div class="intro-image" style="overflow: hidden;">
<div class="scrollEffect-top-24">
<div class="revealedBox goRight">
<div class="picture-for-foo contentBox">
<img src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</section>
source to share