Я хочу изменить свою веб-страницу на одну страницу с возможностью прокрутки.
Я пытаюсь добиться чего-то вроде этого: http://fleurmoreau.fr/
Когда пользователь «прокручивает» содержимое, изменяется. Я думал, что смогу сделать это с помощью плагина для прокрутки одной страницы (https://github.com/peachananr/onepage- scroll), но на самом деле не удалось.
Дальнейшее объяснение:
1) Я хочу, чтобы меню и несколько других элементов были "исправлены" (см. пример). Я смог сделать это с помощью плагина onepage-scroll (вам просто нужно правильно разместить div с классом «main» и разделами). Я был на шаг ближе к тому, чем хотел заниматься, но это было не совсем то, что я искал.
2) Я хочу просто изменить содержимое , а не сдвигать его вверх или вниз, как это делал бы плагин.
В принципе, я хочу запускать анимацию (эффект раскрытия блока и т. Д., Ссылка выше), когда пользователь прокручивает. Я думал о том, чтобы сделать веб-страницу прокручиваемой на одну страницу, а затем, когда пользователь прокручивает, просто перенаправляйте ее в новую папку с файлами html, css и js (меню и другой контент остаются прежними, контент, который я хочу изменить, отличается в этой новой папке ). Может быть, это было бы одним из возможных решений моей проблемы?
Я видел это несколько раз (http://fleurmoreau.fr/ не единственный, это просто один пример), поэтому мне интересно, как это можно сделать. Кто-нибудь готов поделиться со мной решением?
Хорошего дня!
РЕДАКТИРОВАТЬ: прослушиватель событий Mousewheel - это именно то, что я искал. Спасибо.
1 ответ
Перво-наперво. Сайт, на который вы ссылаетесь, не использует никаких событий прокрутки. Откройте сайт в 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!')
});
Удачи тебе с твоим проектом
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.