Упрощение входа/уменьшения при прокрутке и видимость в окне просмотра
Когда вы смотрите на веб-сайт https://www.mercedes-benz.com/en/ и прокручиваете вниз, весь контент становится легче. Когда вы прокручиваете полностью вниз и снова прокручиваете вверх (медленно), вы также увидеть, как содержимое (блоки) снова исчезает. Когда вы вернетесь наверх и снова прокрутите вниз, весь контент снова начнет сокращаться.
Я знаю что-то вроде ленивой загрузки или упрощения с помощью jQuery, но как только он загружается, анимация выполняется. Когда вы прокручиваете вверх, ничего не ослабевает. Таким образом, вы не можете снова сделать легкость в анимации.
Я нашел пример (не та анимация, которую я хочу, но я могу изменить это), например, с затуханием:https://codepen.io/chriscoyier/pen/DjmJe
Это javascript, который они использовали:
(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 = $(".module");
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");
}
});
});
Я не эксперт по javascript, но можно ли также уменьшить его, когда я прокручиваю вверх, и возвращаюсь назад, когда я прокручиваю вниз?