CSS animation of input and output element when scrolling on page

Asked

Viewed 6,540 times

3

I’m making a div appear with input animation when the scroll hits a point on the page, the problem is that I can’t make the output animation when the scroll returns.

The <div class="box"></div> has the following CSS:

.box {
    right: -384px;
    visibility: hidden;
    -webkit-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    -moz-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    -o-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
}

And when the scroll reaches a certain point, I add the class display-block executing the animation:

.display-block {
    right: 0px;
    visibility: visible;   
}

This is the jQuery:

$(window).scroll(function (e) {
    var height = $(window).scrollTop();
    var available = $(document).height();
    var percentage_of_page = 0.5;
    var half_screen = available * percentage_of_page;
    if ( height > half_screen ) {
        $('.box').addClass('display-block');
    } else {
        $('.box').removeClass('display-block');
    }
});

I tried to create an extra class to hide the element with a animation by keyframes, but it didn’t work. I know it’s possible to use a library like Waypoints to do this easily, but how to do with pure CSS and jQuery?

I made a Jsfiddle very basic, because maybe Scroll isn’t even important. And also a Jsfiddle more complete where the effect can be seen.

  • You make the move for CSS, don’t you? And if you made a move-left and move-right for entry and exit?

  • Yes, the move is pure CSS, jQ just adds/removes the class. I think my real question is how to swap classes that animate the two.

  • I made an example well simple in the jsfiddle. I don’t have time now to increment the code, but I’ve separated the event in and out. It’s manual right: -343px;, but can change by js later. I hope it helps

  • Ahn, of course, has to separate the animation into two extra classes and take it out of the starting box. Just, solve total! Answer, Please :) No need to complicate too much, I think it’s a basic thing like this

1 answer

3


In your case, apply the transition in div box, limit the entry and exit effect. To make the move would need to apply removeClass but would lose formatting. Another problem is that when collecting the div, you are using $('.box'). removeClass('display-block'), and take property Visible making hidden without being able to apply the effect.

One solution is to separate the element formatting and keep the input and output effect separate for each event. Full code online example available on jsfiddle.


Maintaining the element formatting box box

.box {
    position: fixed;
    width: 293px;
    bottom: 48px;
    right: -384px;
    background-color: #fafafa;
    padding: 16px 25px 0px 25px;
    z-index: 9999;
}

Creating effect of exit moving the div to the side.

.motionL{
    background:#669900;
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
}

Creating effect of entree positionally right:0px

.motionR{
    background:#FF00FF;
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    right: 0px;
}

jQuery: Var status marks the condition of div( open or closed ), so applies the class to collect the element only if she is visible.

var status = 'close'

$(window).scroll(function (e) {
    write_status();

    if ( $(window).scrollTop() > half_screen )
    {
        $('.box').removeClass('motionL');
        $('.box').addClass('motionR');
        status = 'open';
    }
    else
    {
        if( status === 'open' )
        {
            $('.box').removeClass('motionR');
            $('.box').addClass('motionL');
            status = 'close';
        }
    }
});

Html

<div class="box">
    <span class="box-title text">MORE STORIES</span>
    <div>
        <a href="#"><img width="326" height="150" src="http://dummyimage.com/326x150/23a343/edfcf7&text=Detect+scroll" /></a>
        <h3><a href="#">Lorem ipsum</a></h3>
        <p>Neque porro [...]</p>
    </div>
</div>
  • The final work is in this Sofiddle. Is the second, Scroll Listener. CSS3 Animation. And a copy on jsfiddle which is easier to see all together and do Fork.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.