Прокрутка одной страницы | Плагин не полезен, не хочу, чтобы контент скользил - PullRequest
Новая
       17

Прокрутка одной страницы | Плагин не полезен, не хочу, чтобы контент скользил

0 голосов
/ 11 сентября 2018

Я хочу изменить свою веб-страницу на одну прокручиваемую.

Я пытаюсь добиться чего-то вроде этого: http://fleurmoreau.fr/

Когда пользователь «прокручивает» содержимое, оно меняется. Я думал, что смогу сделать это с помощью плагина для прокрутки одной страницы (https://github.com/peachananr/onepage-scroll), но на самом деле это не удалось.

Дальнейшее объяснение:

1) Я хочу, чтобы меню и несколько других элементов были «исправлены» ( см. Пример ). Я смог сделать это с помощью плагина onepage-scroll (вам просто нужно правильно разместить div с классом "main" и section). Я был на шаг ближе к тому, что я хотел сделать, но это было не совсем то, что я искал.

2) Я хочу просто изменить содержимое , а не сдвигать его вверх или вниз, как это делает плагин.

По сути, я хочу запускать анимацию (эффект выявления блока и т. Д., Ссылка выше), когда пользователь прокручивает. Я думал о том, чтобы сделать веб-страницу прокручиваемой на одну страницу, а затем, когда пользователь прокручивает, просто перенаправьте ее в новую папку с файлами html, css и js (меню и другой контент остаются прежними, контент, который я хочу изменить, отличается в этой новой папке ). Может быть, это было бы одним из возможных решений моей проблемы?

Я видел это несколько раз (http://fleurmoreau.fr/ не единственный, это всего лишь один пример), поэтому мне интересно, как это можно сделать. Кто-нибудь готов поделиться со мной решением?

Хорошего дня!

EDIT: прослушиватель событий Mousewheel - это именно то, что я искал. Спасибо.

1 Ответ

0 голосов
/ 11 сентября 2018

обо всем по порядку. Сайт, на который вы ссылаетесь, не использует события прокрутки. Откройте сайт в Chrome и откройте инструменты разработчика. Затем установите вид на мобильный (или планшет, тоже самое). Если вы работаете в мобильном режиме в Chrome, ваша мышь работает так же, как на реальном смартфоне. По этой логике ваше «движение» по экрану с помощью мыши должно вызвать событие прокрутки, но это не так. Поэтому не фактическая прокрутка вызывает причудливую анимацию.

Я полагаю, что Флер Моро использовала прослушиватель событий mousewheel для запуска анимации. 

var link = document.querySelector('body');
link.addEventListener('mousewheel', function (event) {

    // Prevent the link from updating the URL
    event.preventDefault();

    // Do something...
    console.log('Triggering fancy animations!')

}, false);

или если вы используете jquery 

 $('body').on('mousewheel',function(event){

    // Prevent the link from updating the URL
    event.preventDefault();

    // Do something...
    console.log('Triggering fancy animations!')

});

Удачи в вашем проекте

...