How to add css animation effects that apply on scroll to only specific divs?

user_11520625 0
Viewed 263

The idea is there are 5 sections named section1, section2 etc.

Each section has its own image.

When the user scrolls, the image should 'fade out' and in by changing the opacity, and there is a slight zoom in/out effect using transform3D.

I'm trying to acheive results identical to this:

http://www.moxhe.com.au/

My attempt at starting something is this

  jQuery(document).ready(function() {
        jQuery(window).scroll(function(event) {
            let scroll = jQuery(this).scrollTop();
            let opacity = 1 - (scroll / 1000);
            var x = (scroll / 100);
            if (opacity >= 0) {
                jQuery('#section1').css({'opacity': opacity , 'transform': "scale(" + x + "," + x + ")"});
            }
        });
    });

Now, this does create the opacity changing on effect when you scroll - the issue is, it applies to the whole page on scroll, but i want the effects to happen only when you user scrolls in/around the div with ID named section1

I know it;s applying to the whole window because the .scroll is being applied to jQuery(window). I have tried using jQuery('#section1') but if i do this nothing happens.

I have tried adding a transform3D effect like shown on http://www.moxhe.com.au/ but am struggling to get it work too, there should be a small decrease scrolling downwards and small increase scrolling upwards ONLY if user is scrolling around a specific div with the bg image.

Long story short, i need to make css animations identical to http://www.moxhe.com.au/ but am struggling with applying the css effects to a specific part of the page / div with an ID as supposed to the whole page.

css html jquery javascript
2 Answers

I made a fiddle to understand where you are at. I have wrapped the #section1 into #section1_container and applied overflow: hidden on it to restrict the place for the animation.

html

<div id="section1_container">
<div id="section1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque sapiente dolor ex magnam eveniet! Ipsum officia quidem possimus iste expedita temporibus nobis praesentiumconsectetur adipisicing elit. Doloremque sapiente dolor ex magnam eveniet! Ipsu
</div>
</div>

css

#section1_container{
  overflow: hidden;
}

I think you also want to start animation where the section is visible or something.

so you have $("#section1_container").offset().top that will give you offset from the top of the document and if this property is higher than your scroll = jQuery(this).scrollTop(); then you can start animation. You can stop it by $("#section1_container").height() .

user_29459770

You can try wrapping your transformation with a condition that only applies the transformation at specific scroll values:

var sectionHeight = $('.section').height();
if(document.documentElement.scrollTop>0 && document.documentElement.scrollTop<sectionHeight){
    //apply transformation here
}
else if(document.documentElement.scrollTop>sectionHeight && document.documentElement.scrollTop<(sectionHeight*2)){
    //apply transformation here
}
...
//Number of if conditions = number of sections you have
user_66441140
Related