Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Page Transition. Анимированный переход между блоками одностраничника. (https://javascript.ru/forum/jquery/73138-page-transition-animirovannyjj-perekhod-mezhdu-blokami-odnostranichnika.html)

LLIypuk 23.03.2018 22:30

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/ , но в нем анимация работает через дата-атрибуты, что не совсем то что нужно.

emptyindorill 27.03.2018 13:00

Все просто:

<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');
	            }
	        });

});


Скрипт праллакс скролинга, скрипт меню с активом и прилипашка.

emptyindorill 27.03.2018 13:02

Не могу только сообразить как сделать так что бы при долистывания до одного блока (футера) - например, убирался класс fixed у меню.

Не в этом примере а вообще. Подскажите пожалуйста?


Часовой пояс GMT +3, время: 21:17.