Lavonen Lavonen - 4 years ago 86
CSS Question

Slide-in effect (bottom up) doesn't work

I am trying to add a script to one of my pages at my site, it's a transition effect where div's move in from the bottom up when in view. I successfully added the exact same script to another page and it worked, but for some reason, it doesn't work on the other page. I change the whole script on the page so it would be more or less identical to the page where the script works properly but it didn't change anything, unfortunately...

The page with the script in action (removed all irrelevant script) can be found here: http://codepen.io/anon/pen/qRKgWY

Here is the script (should be correct):

(function($) {

$.fn.visible = function(partial) {

var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;

return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

};

})(jQuery);

var win = $(window);

var allMods = $("#slide-1, #slide-2");

allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
});

win.scroll(function(event) {

allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});

});

Answer Source

if the demo on code pen is what you expected to work, maybe you need to check the css or see if you miss anything else. I see no class being define as "already-visible" and "come-in", I also don't see any animation related CSS or JS at first glance. All that JS does is to assign a class name to those element depending on visibility, nothing that defines its behaviours.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download