0
124
2019-01-03

JS - Scrollify хорошее решение для прокрутки блоков страницы в Elementor

Рассмотрим применение jQuery плагина Scrollify для красивой прокрутки блоков созданных в плагине Elementor
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT
Содержание:

Scrollify

Scrollify - вид на странице разработчика

Плагин jQuery, который помогает прокручивать блоки страниц и привязывать скрол к разделам. Оптимизирован для сенсорных устройств.

Страница плагина

https://projects.lukehaas.me/scrollify/#configuration

Страница плагина на GitHub

https://github.com/lukehaas/Scrollify

Демонстрация

http://projects.lukehaas.me/scrollify .

Больше примеров

Прокрутка анимации

Многоуровневая прокрутка

Пагинация

Полностраничное видео

Верхний и нижний колонтитулы

Динамический контент

Базовая настройка

Для Scrollify требуется jQuery 1.7+.

Самая базовая настройка выглядит следующим образом:

<!doctype html>
  <html>
    <head>
      <script>
        $(function() {
          $.scrollify({
            section : ".example-classname",
          });
        });
      </script>
    </head>
    <body>
      <div class="example-classname"></div>
      <div class="example-classname"></div>
    </body>
  </html>

Конфигурация

Конфигурация по умолчанию:

$.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() {}
  });

Применяем мощь Scrollify при создании страниц в Elementor’e

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

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

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

.scrollify

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

Указываем класс для scrollify

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

При работе с Elementor и 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;
}));

Данный код:

// ----------------------------------------------------
jQuery(document).ready(function ($) {
// https://codepen.io/whiteroyal15/pen/EZVzGL
if ($(window).width() > 1000) {
  $.scrollify({
//   section : "#section_1, #section_2, #section_3, #section_4",
    section : ".scrollify, .footer",
            interstitialSection : "",
// https://easings.net/ru            
        easing: "easeOutExpo",
        scrollSpeed: 1000,
        offset : 0,
        scrollbars: true,
        standardScrollElements: ".footer",
        setHeights: true,
        overflowScroll: true,
        updateHash: false,
        touchScroll:true,
/*    interstitialSection : "footer",
    scrollSpeed: 800,
    easing: "easeOutExpo",
    standardScrollElements: "footer",
     setHeights: false,
     updateHash: false,
     touchScroll:true*/
  });
} ;
});
// ----------------------------------------------------

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

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

Пример вертикального меню

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

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

JET ELEMENTS виджет

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

JET ELEMENTS - указываем ID

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

Elementor - указываем ID

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

Elementor - Переключение секций полностью

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

Как заменить круги в меню 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

easings.net - Примеры анимаций

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

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

Проблемы при использовании Scrollify и их решения

В даном разделе находится информация которая призвана помогать в решении возникших проблем при использовании 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/#ankor

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

return false

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

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

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

Решение:

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

if ($(window).width() > 1200 && $('body').hasClass('home')) {
  $.scrollify({
    и дальше весь код
  });
};

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

Ответ:

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