
$.scrollify({
    section : ".example-classname",
    sectionName : "section-name",
    interstitialSection : "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset : 0,
    scrollbars: true,
    standardScrollElements: "",
    setHeights: true,
    overflowScroll: true,
    updateHash: true,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
  });

Для того что бы у нас была возможность красиво отображать блоки страницы созданной в Elementor при скроле, необходимо указывать несколько важных моментов при создании элементов страницы. А именно пункты указанные ниже.

Указываем каждой секции свой идентификатор, а лучше класс

Для каждой секции созданной в elementor указываем класс, в моем примере это будет:


.scrollify

Класс указываем здесь:

Размер секции для нормальной прокрутки Scrillify

При работе с Elementor и Scrillify я выяснил что для того что бы не было всякого рода “подергиваний“ во время скролла, необходимо применить настройки секций как указано ниже:

Подключение скрипта Scrollify

Для подключения скрипта загрузите в удобное для Вас место темы данный скрипт:

https://github.com/lukehaas/Scrollify/blob/master/jquery.scrollify.js

Естественно что скрипт нужно подключить через function.php в футер сайта.

Далее добавьте в самом конце скрипта jquery.scrollify.js, сразу за данными строками:


console.warn("Scrollify warning: setOptions expects an object.");
}
};
$.scrollify = scrollify;
return scrollify;
}));

Данный код:

Как сделать вертикальное меню навигации между блоками в Elementor?

Для того что бы получить вертикальное меню вот такого вида:

Нам понадобиться компонент Scroll Navigationкоторый есть только в дополнительном плагине к Elementor, имя данного плагина JET ELEMENTS.

После приобретения плагина Вам нужно будет найти данный виджет в панели виджетов Elementor:

Далее присвойте настройки и id секциям как мной указано ниже:

Здесь мы указываем ID секции для вертикального меню, следовательно после установки ID в Scroll Navigation виджите следует установить ID и в самой секции:

Касаемо настроек Вы разберетесь и без меня, настроек в виджите имеется совсем не много. Ниже я приведу те настройки которые использую я:

Переключатель “Переключение секций полностью” настоятельно не рекомендую трогать, так как в случае если контент блока будет фактически больше чем экран устройства на котором был открыт сайт, вы часть контента данного блока не увидите.

Как заменить круги в меню Scroll Navigation плагина JET ELEMENTS

Здесь нам на помощь прийдет CSS, просто воспользуйтесь моим примером ниже только заменив мои SVG изображения на свои.


/* Общие стили для всех пунктов вертикального меню */
div.jet-scroll-navigation__dot{
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 40px;
    background-color: #f0f8ff00 !important;
    border-radius: 0% !important;
}

/* #1 */
[data-anchor="section_1"] div.jet-scroll-navigation__dot {
    background-image: url(/wp-content/uploads/2019/01/home.svg);
}
/* #2 */
[data-anchor="section_2"] div.jet-scroll-navigation__dot {
    background-image: url(/wp-content/uploads/2019/01/layers.svg);
}
/* #3 */
[data-anchor="section_3"] div.jet-scroll-navigation__dot {
    background-image: url(/wp-content/uploads/2019/01/suitcase.svg);
}
/* #4 */
[data-anchor="section_4"] div.jet-scroll-navigation__dot {
    background-image: url(/wp-content/uploads/2019/01/success.svg);
}
/* #5 */
[data-anchor="section_5"] div.jet-scroll-navigation__dot {
    background-image: url(/wp-content/uploads/2019/01/users.svg);
}

/* #6 */
[data-anchor="section_6"] div.jet-scroll-navigation__dot {
    background-image: url(/wp-content/uploads/2019/01/smartphone.svg);
}

!!! В моем примере секции "section_1" это идентификатор секции в вертикальном меню, что бы узнать свой идентификатор воспользуйтесь режимом разработчика.

Эффекты анимации при скроле блоков

На странице примера автор плагина пишет данный пример:

easing: “easeOutExpo”,

И если его применить к своему решению Вы увидите приятный эффект при скроле от блока к блоку. На самом деле этот эффект не один. Посмотреть на другие варианты анимации при скроле можно здесь:

https://easings.net/ru

Для того что бы scrollify мог владеть любым из данных эффектов необходимо подключить данную библиотеку:

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

В даном разделе находится информация которая призвана помогать в решении возникших проблем при использовании Scrollify на сайте WordPress.

Почему Scrollify упорно отображает первую секцию с отступом снизу (около 20 пикселей)

Данная проблема связана с тем что на самом деле в области где находится отступ, а это напомню низ страницы. Находится горизонтальный скрол, который скорее всего на Вашем ресурсе скрыт при помощи правил CSS:


overflow-x: hidden;

Вот и получается что Scrollify отсчитал высоту правильно, и во время расчетов учел и высоту горизонтального скрола.

Решение:

Добавьте CSS стиль для секции:


padding-bottom:20px;

После применения Scrollify во время прокрутки страницы вроде все работает как нужно, но скрол просто дико трясет

Здесь все в первую очередь зависит от обилия плагинов и скриптов (в основном написанных на jQuery) на Вашем сайте.

Решение:

Все делаем как обычно – по очереди отключаем плагины и скрипты, и в это же время смотрим как себя ведет скрол страницы (не забыв чистить кеш, как браузера так и сайта).

Консоль разработчика упорно пишет ошибку – Scrollify warning: ID matches hash value – this will cause the page to anchor

Скорее всего у Вас работает какой-то плагин который вставляет анкор в область ссылки. И Вы получаете в поле ввода url что-то на подобие этого:


http://VashDomen.com/

Допустим при применении темы Zita попап окна созданные при помощи плагина PopUps не срабатывали если добавить анкор попапа в меню сайта, а при написании скрипта для срабатывания попап окна, Scrollify начал выдавать выше указанную ошибку. Решением было “обезвреживание” анкора в jQuery скрипте при помощи строки:


return false

То есть у меня получился вот такой скрипт:


jQuery(document).ready(function ($) {
    $('.AddToAny_View').click(function() 
    {
      SPU.show(1064);
        return false;
    });
});

Как заставить выполнять Scrollify только на главной странице сайта, и только для ПК?

Решение:

Все просто, оберните основной скрипт выполняющий подключенеи Scrollify с проверкой класса в элементе body. Например так:

Какая тема для WordPress лучше всего подходит для применения Scrollify?

Ответ:

Мой опыт показал что лучше темы чем Zita для Scrollify просто нет. Она обладает мощным функционалом позволяющим реализовать прокрутку блоков правильно.

Источник записи: