Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.03.2018, 22:30
Аспирант
Отправить личное сообщение для LLIypuk Посмотреть профиль Найти все сообщения от LLIypuk
 
Регистрация: 23.07.2015
Сообщений: 48

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/ , но в нем анимация работает через дата-атрибуты, что не совсем то что нужно.
Ответить с цитированием
  #2 (permalink)  
Старый 27.03.2018, 13:00
Аспирант
Отправить личное сообщение для emptyindorill Посмотреть профиль Найти все сообщения от emptyindorill
 
Регистрация: 16.02.2012
Сообщений: 73

Все просто:

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

});


Скрипт праллакс скролинга, скрипт меню с активом и прилипашка.
Ответить с цитированием
  #3 (permalink)  
Старый 27.03.2018, 13:02
Аспирант
Отправить личное сообщение для emptyindorill Посмотреть профиль Найти все сообщения от emptyindorill
 
Регистрация: 16.02.2012
Сообщений: 73

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите скрипт чтобы убрать переход между #tabs-1 и #tabs-2 mike575 Элементы интерфейса 1 08.07.2016 12:45
Переход между страницами без перезагрузки sas135 Events/DOM/Window 1 26.07.2015 17:27
Плавный переход между блоками misterX_ Events/DOM/Window 10 27.10.2014 12:49
переход между якорями с помощью колесика voitov_di Элементы интерфейса 1 14.03.2014 16:21
Переключение между блоками uncle_fedor Элементы интерфейса 1 10.01.2010 19:01