Element input and output CSS animation when scrolling the page

Question

Element input and output CSS animation when scrolling the page

Navigation

#1 by (3 votes)

3

I'm making a div appear with input animation when the scroll reaches a point on the page, the problem is that I can not do 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 that executes the animation:

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

This is 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 keyframes animation , but did not work very well. I know it's possible to use a library like Waypoints to do this easily, but how to do with pure jQuery and CSS?

I did a JSFiddle pretty basic, because maybe Scroll is not even important. And a more complete JSFiddle where you can see the effect.

jquery css3

asked by anonymous 11.09.2014 / 10:31

1 answer

How to move a graph (Highcharts) using the arrow keys? SSL Encryption Socket Java

score 3 · Accepted Answer

In your case, applying the transition in the div box limits the input and output effect. To do the move you would need to apply removeClass but would lose the formatting. Another problem is that when collecting the div, you are using $ ('.box'). RemoveClass ('display-block') , and strip property visible making it hidden without you can apply the effect.

One solution is to separate the formatting of the element and keep the input and output effect separate for each event. Online sample with full code available at jsfiddle .

Keeping the formatting of the box element

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

Creating an output effect by moving the div to the side.

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

Creating input effect with position 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 the div (open or closed), thus applying the class to collect the element only if it 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><ahref="#">Lorem ipsum</a></h3>
        <p>Neque porro [...]</p>
    </div>
</div>