Page Transition. Анимированный переход между блоками одностраничника.
Всем привет!
Есть сайт одностраничник. В нем возникла необходимость сделать переходы между блоками. Примеры: http://themes.ht2.pl/euforia/index.html и http://lmpixels.com/demo/unique/uniq...dex-light.html Однако как ни странно не могу найти плагин на GitHub реализующий подобные эффекты при переходе между якорями одностраничника. Собственно лучшим вариантом было бы скопировать код, который любезно размещен в отдельном файле. Однако данный код работает на jquery 2.1.3 а на моем сайте подключен jquery 3.1.2, на котором код нужного плагина не работает. Также плагин напрямую цепляется к якорям # из-за чего другие элементы страницы перестают работать (например табы). PS: также нашел аналогичный плагин https://tympanus.net/codrops/2013/05...e-transitions/ , но в нем анимация работает через дата-атрибуты, что не совсем то что нужно. |
Все просто:
<div class="wrap"/>
<div id="block1" class="section"/>
<div id="block2" class="section"/>
<div id="block3" class="section"/>
<div id="block4" class="section"/>
<nav>
<a href="#block1" class="link active">Главная</a>
<a href="#block2" class="link">Услуги</a>
<a href="#block4" class="link">Часто задаваемые вопросы</a>
</nav>
$(function(){
$(window).scroll(function(){
var $sections = jQuery('.wrap .section');
$sections.each(function(i,el){
var top = jQuery(el).offset().top-100;
var bottom = top + jQuery(el).height();
var scroll = jQuery(window).scrollTop();
var id = jQuery(el).attr('id');
if( scroll > top && scroll < bottom){
jQuery('a.active').removeClass('active');
jQuery('a[href="#'+id+'"]').addClass('active');
}
})
});
$("nav").on("click","a.link", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 800);
});
$(window).scroll(function(){
if(jQuery(this).scrollTop()>217){
jQuery('.body_center .left').addClass('fixed');
}
else if (jQuery(this).scrollTop()<217){
jQuery('.body_center .left').removeClass('fixed');
}
});
});
Скрипт праллакс скролинга, скрипт меню с активом и прилипашка. |
Не могу только сообразить как сделать так что бы при долистывания до одного блока (футера) - например, убирался класс fixed у меню.
Не в этом примере а вообще. Подскажите пожалуйста? |
| Часовой пояс GMT +3, время: 12:39. |