Одна страница с возможностью прокрутки | Плагин бесполезен, контент не должен скользить

Question 1

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

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

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

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

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

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

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

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

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

РЕДАКТИРОВАТЬ: прослушиватель событий Mousewheel - это именно то, что я искал. Спасибо.

javascript html css plugins scrollable

0

Cervus camelopardalis 11 Сен 2018 в 16:26

Answer

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

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

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!')

});

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

0

Chanan Ippel 17 Сен 2018 в 06:33

Question 2

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

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

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!')

});

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

0

Chanan Ippel 17 Сен 2018 в 06:33

Одна страница с возможностью прокрутки | Плагин бесполезен, контент не должен скользить

1 ответ

Похожие вопросы

Новые вопросы

javascript