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?
– Papa Charlie
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.
– brasofilo
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– Papa Charlie
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
– brasofilo