I'm trying to rotate two images on scroll, I want to rate the image from the 0 - 13deg range according to the percentage of mouse scroll when it comes in view.
There are 4-5 sections each section has these two images.
I just coded the first section of image rotation which I want to achieve for others too, but my .each function is not working.
I just have knowledge of HTML and CSS and a little bit of jquery. So I don't know what's wrong I'm doing.
[
$(window).scroll(function() {
$( ".image" ).each(function() {
var $this= $(this);
var h = window.innerHeight;
var scrollTop = $(window).scrollTop();
var elementOffset = $this.offset().top;
var distance = (elementOffset - scrollTop );
var scrollPercent = 100 - distance / $(window).height() * 100 ;
var speed = scrollPercent*.175;
if(elementOffset < h){
$this.find(".left-image").css({ 'transform': 'rotate(-' + speed + 'deg)'});
$this.find(".left-image").css({ 'transform': 'rotate(-' + speed + 'deg)'});
$this.find(".right-image").css({ 'transform': 'rotate(' + speed + 'deg)'});
}
if(scrollPercent >= 76){
$this.find(".left-image").css({ 'transform': 'rotate(' + "-13" + 'deg)'});
$this.find(".right-image").css({ 'transform': 'rotate(' + "13" + 'deg)'});
}
if(scrollPercent <= 15){
$this.find(".left-image").css({ 'transform': 'rotate(' + "0" + 'deg)'});
$this.find(".right-image").css({ 'transform': 'rotate(' + "0" + 'deg)'});
}
});
});section{
display:flex;
}
.content{
background:#fff;
padding:20px;
min-height:200px;
width:50%
}
.left-image {
position: relative;
z-index: 2;
top: -15px;
right: -45px;
width:50%
}
.right-image {
position: relative;
z-index: 1;
}
.image, .image img{
width:50%;
}
.image{
display:flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section style="background:red;padding:60px; min-height:300px">
</section>
<section style="background:blue;padding:60px; min-height:300px">
<div class="content">
content here
</div>
<div class="image">
<img src="https://drive.google.com/uc?export=view&id=1EEvY9MW3Ea85TjpTW_RnzRGCx7JXOq6U" class="left-image" />
<img src="https://drive.google.com/uc?export=view&id=1iRneWpuEsCsNPK3xo7cBgojSC4N3Hxea" class="right-image" />
</div>
</div>
</section>
<section style="background:green;padding:60px; min-height:300px">
<div class="content">
content here
</div>
<div class="image">
<img src="https://drive.google.com/uc?export=view&id=1EEvY9MW3Ea85TjpTW_RnzRGCx7JXOq6U" class="left-image" />
<img src="https://drive.google.com/uc?export=view&id=1iRneWpuEsCsNPK3xo7cBgojSC4N3Hxea" class="right-image" />
</div>
</div>
</section>
<section style="background:yellow;padding:60px; min-height:300px">
<div class="content">
content here
</div>
<div class="image">
<img src="https://drive.google.com/uc?export=view&id=1EEvY9MW3Ea85TjpTW_RnzRGCx7JXOq6U" class="left-image" />
<img src="https://drive.google.com/uc?export=view&id=1iRneWpuEsCsNPK3xo7cBgojSC4N3Hxea" class="right-image" />
</div>
</div>
</section>