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, время: 02:20. |