FancyScroll.js придаем сайту эффект прокрутки при выходе за пределы как в iOS и Android Javascript


Оглавление (нажмите, чтобы открыть):

Прокрутка

Событие прокрутки scroll позволяет реагировать на прокрутку страницы или элемента. Есть много хороших вещей, которые при этом можно сделать.

  • Показать/скрыть дополнительные элементы управления или информацию, основываясь на том, в какой части документа находится пользователь.
  • Подгрузить данные, когда пользователь прокручивает страницу вниз до конца.

Вот небольшая функция для отображения текущей прокрутки:

Текущая прокрутка = прокрутите окно

Событие scroll работает как на window , так и на других элементах, на которых включена прокрутка.

Предотвращение прокрутки

Как можно сделать что-то непрокручиваемым?

Нельзя предотвратить прокрутку, используя event.preventDefault() в обработчике onscroll , потому что он срабатывает после того, как прокрутка уже произошла.

Но можно предотвратить прокрутку, используя event.preventDefault() на событии, которое вызывает прокрутку, например, на событии keydown для клавиш pageUp и pageDown .

Если поставить на них обработчики, в которых вызвать event.preventDefault() , то прокрутка не начнётся.

Способов инициировать прокрутку много, поэтому более надёжный способ – использовать CSS, свойство overflow .

Вот несколько задач, которые вы можете решить или просмотреть, чтобы увидеть применение onscroll .

Задачи

Бесконечная страница

Создайте бесконечную страницу. Когда посетитель прокручивает её до конца, она автоматически добавляет текущие время и дату в текст (чтобы посетитель мог прокрутить ещё).

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

  1. Прокрутка «эластична». Можно прокрутить немного дальше начала или конца документа на некоторых браузерах/устройствах (после появляется пустое место, а затем документ автоматически «отскакивает» к нормальному состоянию).
  2. Прокрутка неточна. Если прокрутить страницу до конца, можно оказаться в 0-50px от реальной нижней границы документа.

Таким образом, «прокрутка до конца» должна означать, что посетитель находится на расстоянии не более 100px от конца документа.

P.S. В реальной жизни мы можем захотеть показать «больше сообщений» или «больше товаров».

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

Мы можем вызвать её сразу же и добавить как обработчик для window.onscroll .

Самый важный вопрос: «Как обнаружить, что страница прокручена к самому низу?»

Давайте используем координаты относительно окна.

Документ представлен тегом (и содержится в нём же), который доступен как document.documentElement .

Так что мы можем получить его координаты относительно окна как document.documentElement.getBoundingClientRect() , свойство bottom будет координатой нижней границы документа относительно окна.

Например, если высота всего HTML-документа 2000px , тогда:

Запрет прокрутки страницы при перетаскивании в IOS и Andro >

Я работаю над html5 холстом, но не знаю, как обрабатывать сенсорные события. Когда пользователь коснется экрана и перетянет, браузер будет прокручивать страницу. Я хотел бы предотвратить это, и получить сенсорный старт, и коснуться конечного положения. Является ли это возможным?

4 ответа

Вам нужно переопределить поведение касания по умолчанию, чтобы перестать перетаскивать страницы. Очевидно, вам придется обрабатывать их снова, если ваша страница становится больше доступной области, но когда вы создаете игру, вы предположите, что вы делаете макет 100% / 100%.


Изменить: вот рекомендация W3C о сенсорных событиях, которые могут быть вам полезны.

Если вы не хотите использовать jQuery mobile или любую другую библиотеку, попробуйте это.

Из-за критических изменений, внесенных в последние версии Chrome, приведенные выше ответы больше не верны. Прикрепление прослушивателя событий касания к документу или элементам тела приведет к тому, что прослушиватель событий будет зарегистрирован в «пассивном» режиме, что приведет к preventDefault вызовов preventDefault .

Есть два решения:

Предпочтительным решением является использование touch-action в стиле CSS, чтобы указать, что прокрутка не должна выполняться (например, со значением «none»).

В случаях, когда это не подходит (например, если тип взаимодействия должен динамически изменяться таким образом, который не может быть определен до начала жеста), тогда слушатель события должен быть зарегистрирован с третьим параметром, установленным в < passive: false >(вы должны Выполните обнаружение браузера, чтобы сначала убедиться, что этот стиль поддерживается).

Блокировка прокрутки body для модалок на iOS

Одна из известных проблем на iOS с прокручиваемым body при скролле на фиксированно или абсолютно расположенных элементах. Пример ниже.

На основных браузерах это решается путем добавления overflow: hidden на body . Но, к сожалению, для iOS этого мало. Рабочим решением стало фиксированое body со 100% шириной и высотой.

Этого вполне достаточно, чтобы body оставался неподвижным и скролл был только на модальном окне.

Буду рад, если эта заметка сократит вам время поиска и решения похожей проблемы.

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

Есть другое решение. Но уже с применением js.

Так же устанавливаем для body класс no-scroll , только без свойств width и postion , они будут динамически задаваться в js.

При открытии модального окна вызываем функцию hideScroll , в которой задаем position: fixed , width с учетом того, был вертикальный скролл или нет, задается правило top равное отрицательному значению прокрутки, это и спасает от скролла до верха страницы.

Необходимые функции для детекции скроллбара и его размера:

При закрытии необходимо убрать класс no-scroll и занулить инлайновые правила.

Отключить эластичную прокрутку в Safari

Я просто хотел сменить эффект упругой прокрутки/отскока в Safari (OSX Lion).

Я нашел решение установить overflow: hidden для тела в css, но, как и ожидалось, только отключает полосу прокрутки , поэтому, если сайт «длиннее», чем экран, вы не сможете для прокрутки!

Любые решения или подсказки приветствуются! Спасибо!

Вы можете добиться этого более универсально, применяя следующий CSS:

Это позволяет вашему контенту, независимо от его количества, прокручиваться в body , но имейте в виду, что контекст прокрутки, где выполняется событие scroll , теперь document.body , а не window .

Если вы используете тэг overflow:hidden в элементе , чтобы вернуться к нормальному прокручиванию, вы можете полностью позиционировать

Или вы можете попробовать с помощью jQuery:

То же самое в javasrcipt:

overflow:hidden;-webkit-overflow-scrolling:touch не будет работать на сафари 8.1 для iOS, поскольку фиксированный заголовок окажется вне видимой области.

Как говорит @Yisela, css следует поместить на .container (

Я сделал расширение, чтобы отключить его на всех сайтах. При этом я использовал три метода: чистый CSS, чистый JS и гибрид.

Версия CSS похожа на приведенные выше решения. JS выглядит примерно так:

CSS работает, когда вы используете позицию: фиксированные элементы и пусть браузер выполняет прокрутку. JS необходим, когда какой-либо другой JS зависит от окна (например, события), который блокируется предыдущим CSS (поскольку он заставляет тело прокручиваться вместо окна) и работает, останавливая распространение событий по краям, но нуждается в синтезировать прокрутку компонента без края; Недостатком является то, что он предотвращает некоторые типы прокрутки (они работают с одним CSS). Гибрид пытается использовать смешанный подход, выборочно отключая направленное переполнение (CSS), когда прокрутка достигает края (JS), и теоретически может работать в обоих случаях, но не совсем в настоящее время, поскольку она имеет некоторый запас на пределе.

Таким образом, в зависимости от реализаций одного веб-сайта нужно либо взять один подход, либо другой.

Смотрите здесь, если хотите получить более подробную информацию: https://github.com/lloeki/unelastic


Ни один из «переполненных» решений не работал у меня. Я кодирую эффект параллакса с помощью JavaScript с помощью jQuery. В Chrome и Safari на OSX эффект эластичных/резиновых полос испортил мои номера прокрутки, поскольку он фактически прокручивается за высоту документа и обновляет переменные окна с номерами вне границ. Я должен был проверить, было ли прокручиваемое количество больше фактической высоты документа, например:

Вы можете проверить, находятся ли смещения прокрутки в границах. Если они выйдут за пределы, верните их.

Анимация при прокрутке страницы на JavaScript и CSS

Испокон веков, всякий раз, когда вы прокручивали страницу, полную различного контента, ничего восхитительного не происходило. Контент, который попадал в поле зрения просто появлялся. А тот, который был прокручен — попросту исчезал из виду.

С нововведениями в CSS и DOM API перед каждым пользователем открываются новые горизонты для создания анимации при скролле. Но давайте меньше говорить и больше делать. Предлагаю ознакомиться с таким примером:

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

Мастер Йода рекомендует:  Какие языки программирования сейчас наиболее перспективны для изучения — Отвечают эксперты Tproger

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

Изучив эту статью, вы сможете узнать практически все о таком виде анимации для веб-страниц и, собственно, как внедрить ее использование в реальную жизнь. Способ, с помощью которого мы будем учиться, базируется на определении текущей проблемы, которую нужно решить.

После уточнения всех деталей мы сможем определиться, каким все же должен быть конечный результат. Далее мы изучим некоторые отрывки кода, прежде чем перейдем к практической части решения заданий. Это делается для того, чтобы понять, как все части кода работают вместе, и как вышеприведенный пример вообще функционирует. Это действительно должно быть интересным, так давайте начнем!

Способ, по которому работает данный вид анимации, довольно прост с одной стороны и сложен с другой. Более легкий этап включает в себя сбор в одно целое нескольких технических моментов. Сложность же заключается в том, как именно все будет взаимодействовать между собой, чтобы у пользователя действительно создалось впечатление, что перед ним – единый и проработанный объект, готовый к взаимодействию.

Контент

Начиная с самого верха веб-страницы, первое, что видит пользователь, это контент:

Почти все веб-страницы, кроме тех, которые имеют специфический дизайн, будут иметь контента больше, чем может вместиться на первый экран. Чтобы увидеть всю страницу нам приходиться ее скроллить. Теперь переходим ко второму шагу.

Время скроллить

Контент, расположенный на любой веб-странице, является автономным, но способ просмотра данного контента зависит от вашего браузера (или других параметров).

Всякий раз, когда браузер видит больше контента, чем он может отобразить за один раз, он будет давать вам возможность прокрутить содержимое текущей веб-страницы:

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

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

Идентификация элементов

Скорее всего, это самая сложная часть в создании активной анимации. Ранее мы говорили в целом, что будем работать с контентом. Наш контент на самом деле состоит из различных HTML элементов, отображение многих из которых зависит от того, каким образом они расположены на веб-странице и как взаимодействуют друг с другом.

В любом случае, только подмножество таких элементов будет видимым на вашем экране в конкретный момент времени:

Во время скороллинга подмножество видимых элементов будет меняться:

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

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

Несмотря на то, что на данный момент довольно сложно ощутить разницу между этими двумя методами (при написании кода), результат, который они обеспечивают на практике, сможет расставить все точки над «i».

Изменение элементов

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

Это решение базируется на создании значений класса видимых (в конкретный момент времени) элементов. Теперь у нас одна задача: активировать любой из стилей CSS, который сможет в дальнейшем управлять прокручиваемыми элементами на данной веб-странице. Это основная концепция моделирования элементов с помощью JavaScript.

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

Как временно отключить прокрутку?

Я использую плагин scrollTo jQuery и хотел бы узнать, возможно ли как-то временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хотел бы отключить прокрутку, состоит в том, что когда вы прокручиваете, когда функция scrollTo анимируется, она становится действительно ужасной;)

Конечно, я мог бы сделать $(«body»).css(«overflow», «hidden»); и затем вернуть его в автоматический режим, когда анимация остановится, но было бы лучше, если полоса прокрутки все еще была видна, но неактивна.

27 ответов


Событие scroll не может быть отменено. Но это можно сделать, отменив следующие события взаимодействия:
Мышь & Сенсорная прокрутка и Кнопки , связанные с прокруткой.

[ Рабочая демонстрация ]

Сделайте это, просто добавив класс к телу:

Добавьте класс и удалите его, если хотите снова включить прокрутку, протестированную в IE, FF, Safari и Chrome.

Для мобильных устройств вам нужно обработать событие touchmove :

И открепите, чтобы снова включить прокрутку. Протестировано в iOS6 и Android 2.3.3

Вот действительно простой способ сделать это:

Это немного нервно в IE6.

Следующее решение является базовым, но чистым JavaScript (без jQuery):

Мне жаль отвечать на старый пост, но я искал решение и наткнулся на этот вопрос.

Существует много способов решения этой проблемы, чтобы по-прежнему отображать полосу прокрутки, например, присвоить контейнеру высоту 100% и стиль overflow-y: scroll .

В моем случае я только что создал div с полосой прокрутки, которую я отображаю, добавляя overflow: hidden в тело:

Панель прокрутки элемента должна иметь следующие стили:

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

Согласно сообщению galambalazs , я бы добавил поддержку сенсорных устройств, что позволяет нам касаться, но не прокручивать вверх или вниз:

Я искал решение этой проблемы, но не был удовлетворен каким-либо из вышеперечисленных решений ( на момент написания этого ответа ), поэтому я нашел это решение.

CSS

JS

Таким образом, у вас всегда есть вертикальная полоса прокрутки, но, поскольку большая часть моего контента длиннее, чем область просмотра, для меня это нормально. Контент центрируется с помощью отдельного элемента div, но без повторного задания поля в теле мой контент останется слева.

Это две функции, которые я использую для показа моего всплывающего окна /модального режима:

Результат: фон без прокрутки и повторное позиционирование содержимого из-за левой полосы прокрутки. Протестировано с текущими FF, Chrome и IE 10.

Как насчет этого? (Если вы используете jQuery)

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

Я искал решение «temp no scroll», и для моих нужд это решило его

Я обнаружил, что это достаточно простое решение, которое хорошо работает во всех браузерах, а также подходит для простого использования на портативных устройствах (например, iPhone, планшетах и ​​т. д.). Поскольку элемент временно исправлен, прокрутки нет:)

ВНИМАНИЕ! В зависимости от размещения вашего элемента «contentContainer» вам может потребоваться настроить его слева. Что можно легко сделать, добавив левое значение CSS к этому элементу, когда активен фиксированный класс

Я использую showModalDialog для отображения дополнительной страницы в качестве модального диалога. .

чтобы скрыть полосы прокрутки главного окна:

и при закрытии модального диалога, показывая полосы прокрутки главного окна:

для доступа к элементам в главном окне из диалогового окна:

только для тех, кто ищет showModalDialog 🙁 после строки 29 оригинала код)

Отмена события, как в принятом ответе, на мой взгляд, ужасный метод: /

Вместо этого я использовал position: fixed; top: -scrollTop(); ниже.


Из моего всплывающего проекта jQuery https://github.com/seahorsepip/jPopup р>

Этот код учитывает проблемы ширины, высоты, полосы прокрутки и скачка страницы.

Возможные проблемы, устраненные с помощью приведенного выше кода:

  • width, при фиксированной позиции установки ширина html-элемента может быть меньше 100%
  • высота такая же, как выше
  • полоса прокрутки, когда при фиксированной позиции положение содержимого страницы больше не имеет полосы прокрутки, даже если она имела полосу прокрутки, прежде чем возник горизонтальный скачок страницы
  • pagejump, когда установка позиции фиксирована, scrollTop больше не действует, что приводит к вертикальному скачку страницы

Если у кого-то есть какие-либо улучшения в коде замораживания /размораживания вышеупомянутой страницы, дайте мне знать, чтобы я мог добавить эти улучшения в свой проект.

Начиная с Chrome 56 и других современных браузеров, вы должны добавить passive:false в addEventListener вызов, чтобы заставить preventDefault работать. Поэтому я использую это, чтобы остановить прокрутку на мобильном телефоне:

Опираясь на ответ Шайенна Форбса, который я нашел здесь через fcalderan: Просто отключите свиток не скрыть? и исправить проблему исчезновения полосы прокрутки в Hallodom

Этот код поднимает вас наверх страницы, но я думаю, что у кода fcalderan есть обходной путь.

У меня та же проблема, ниже описан способ ее решения.

надеюсь, что это поможет.

Самый простой способ:

Чтобы отменить это:

Легко реализовать, но единственным недостатком является:

  • Страница немного переместится влево, если выровнена по центру (по горизонтали).

Это связано с тем, что полоса прокрутки была удалена, а область просмотра стала немного шире.

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

Мастер Йода рекомендует:  HTML5-видеоплееры, о которых вы должны знать

Я добавил 17px отступа вправо, чтобы компенсировать исчезновение полосы прокрутки. Но это также проблематично, в основном для мобильных браузеров. Решается путем получения ширины полосы в соответствии с этим .

Я нашел этот ответ на другом сайте :

После закрытия прокрутки всплывающего окна:

Галамбалаз — отличное решение! Это отлично сработало для меня как в Chrome, так и в Firefox. И это также может быть расширено, чтобы предотвратить любое событие по умолчанию из окна браузера. Допустим, вы делаете приложение на холсте. Вы можете сделать это:

А затем в вашем приложении предположим, что вы собираетесь обрабатывать свои собственные события, такие как мышь, клавиатура, сенсорные события и т. д. Вы можете отключить события по умолчанию, когда мышь входит внутрь холста, и снова включить их. когда мышь гаснет:

Вы можете даже отключить контекстное меню с помощью этого хака:

У меня была похожая проблема с анимацией на мобильных экранах, но не на ноутбуках, когда я пытался анимировать div с помощью команды jquery animate. Поэтому я решил использовать таймер, который восстанавливал положение прокрутки окна так часто, что на первый взгляд документ казался статичным. Это решение отлично работало на мобильных устройствах с небольшим экраном, таких как Samsung Galaxy-2 или iphone-5.

Основная логика этого подхода : таймер для установки положения позиции прокрутки окна в исходное положение прокрутки должен быть запущен перед командой jquery animate, а затем, когда анимация завершится, нам нужно очистить этот таймер ( —- +: = 0 =: + —- — позиция перед началом анимации).

К моему приятному удивлению я обнаружил, что документ на самом деле выглядит статичным во время анимации, если интервал таймера был original scroll position , к чему я стремился.

ДРУГОЕ РЕШЕНИЕ, которое сработало . Основываясь на ответе Мохаммада Анини на этот пост о включении /отключении прокрутки, я также обнаружил, что работает модифицированная версия кода, как показано ниже.

Простое решение, которое сработало для меня (временно отключив прокрутку окна).

следующий фрагмент (с использованием jquery) отключит прокрутку окна:

Теперь, когда вы удаляете модал, не забудьте удалить класс noscroll в теге html:

Классный эффект при прокрутке окна

Возможно вы видели такие плагины для браузеров, которые позволяют не просто показывать страницу статично, но и добавлять некоторые эффекты. Например, одним из таких эффектов является «отскок» страницы, как на iOS/Android. В браузере Mozilla Firefox это можно сделать с помощью плагина Yet Another Smooth Scrolling. Но большинство пользователей даже не знают о нем, поэтому можно сделать данный эффект у себя на сайте с помощью библотеки FancyScroll.js.


Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

Как пользоваться?

Для начала вам необходимо скачать и подключить библиотеку jQuery(она находится здесь) и Fancy Scroll(ее можно скачать здесь):

А затем вставить код, который приведен ниже, в тело вашей страницы:

Это действительно очень просто. Давайте рассмотрим какие параметры может принимать данная функция:

  • animation — данное свойство может принимать значение Glow(подсветка) и значение Bounce(тогда окно будет отскакивать при прокрутке).
  • bounceDistance — данное свойство предназначено, если вы в первом пункте выбрали значение Bounce. Оно задает дистанцию отскока в пикселях. Значение задается без указания «px» в конце и без кавычек.
  • glowColor — если в первом пункте вы поставили значение Glow, тогда вы можете задавать цвет подсветки. Цвет задается как обычно в шестнадцатеричном виде.
  • animDuration — данное свойство отвечает на длину анимации по времени. Задается в кавычках с указанием в конце секунд(«0.2s») или миллисекунд(«200ms»).
  • animEasing — с помощью данного свойства можно задавать свои собственные эффекты при прокрутке. А создать эффекты можно с помощью данного сервиса — CSS Easing Animation Tool.
  • innerWrapper — определяет селектор блока к которому будет применена данная анимация. По умолчанию «.innerWrapper». Нельзя выбрать всю страницу, но можно задать общий контейнер и ему присвоить данный класс.

Вывод

Интересный плагин, который позволит выделить таким образом ваш сайт. Не знаю как с тем чтобы применять ко всей странице, но для прокрутки окон внутри страницы очень даже неплохо смотрится.

jQuery событие при прокрутке до определенного элемента (футера)

Привет, друзья. В этой статье мы с вами разберем jQuery событие при прокрутке страницы до определенного элемента. Если говорить другими словами, то jQuery скролл до элемента. В этом примере мы вызовем событие, когда страница будет прокручена до футера. Тогда будем выводить небольшое всплывающее окно с плавным появлением. А так же будем закрывать его по клику. Что в него поместить, решайте сами, вариантов масса. Вот как это выглядит:

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

Создаем сайт с эффектом параллакс-прокрутки при помощи Stellar.js

Дата публикации: 2012-08-16

От автора: одним из самых заметных трендов современного веб-дизайна является применение эффектов параллакс-прокрутки (parallax scrolling). В этом учебнике я намереваюсь показать вам, как создать на вашем собственном сайте этот эффект, использовав немного воображения и помощь от Stellar.js.

Вступление

Эффект параллакс-прокрутки стал популярен, когда несколько лет назад такие сайты, как Nike’s Better World, представили его на своих страницах. Параллакс-эффект относительно интерфейсов существует примерно с 1980-х гг., когда его впервые применили в названиях видеоигр и впоследствии в самих играх. Позже он стал появляться в веб-интерфейсах – вы ознакомитесь с silverbackapp, который применил этот эффект в качестве части заголовка.

Будучи скомбинированными с функциональностью прокрутки вебсайта, эффекты параллакс-прокрутки оказывают сильное визуальное воздействие, особенно будучи скомбинированными с неким видом рассказа, ведущим вас в путешествие.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Пара…Что?

Параллакс – это сдвиг или различие в видимой позиции объекта, рассматриваемого с двух различных линий зрения. – Wikipedia

Так что же в точности такое эффект параллакса? Ну, возможно, это одна из тех вещей, на которые ссылаются ваши клиенты, говоря «вслепую»: “Я хочу сайт в HTML5″. Когда клиенты просят сайт на “HTML5″, мне приходится отдельно спрашивать их, что они понимают под HTML5 – в этот момент он кажется просто модным словечком, которое клиенты повторяют, в сущности не понимая его значения.

Так что HTML5 ли это? Конечно, HTML5 играет свою роль в эффекте параллакс-прокрутки, но это не просто HTML5, в ней также используется некая форма javascript, такая как jQuery, и она невозможна без небольшого количества CSS3.

Изначально слово параллакс происходит от греческого параллаксис, что означает «изменение». У объектов, которые находятся ближе к глазу, имеется больший параллакс, чем у объектов, находящихся на расстоянии. Это значит, что более близкие нам объекты кажутся движущимися быстрее фоновых объектов.

Расслоение множественных фонов и объектов (таких как изображения), и затем их движение на разных скоростях создает ощущение глубины и объема.

Параллакс в действии

Рассмотрите несколько примеров демонстрации параллакс-эффектов (изображения кликабельны).

Каждый вебсайт рассказывает историю

Вышеприведенные примеры берут вас в некий вид путешествия или события, и делают это самыми различными способами. Так, по моему, и создается успех сайта с параллакс-прокруткой. Ключ к проектированию интересного и уникального творения – сосредоточение на хорошей истории и концепции, а затем – применение эффекта с помощью творческих и образных способов.

Wieden+Kennedy (W&K), ребята, стоящие за вебсайтом Nike Better World поддерживают эту мысль:

По нашему мнению, технологии независимы от концепции. Мы в основном фокусировались на создании отличного впечатления от интерактивного рассказа. – Wieden+Kennedy (W&K)


Как будет работать наш сайт

Для демонстрации одного из способов осуществления параллакс-прокрутки, я предпочел показать вам простой сайт из четырех слайдов, в котором эффект применяется на различных фонах и изображениях. Также в верхнем левом углу я добавил навигацию, которая может прокрутить на отдельный слайд сайта, и, кроме того, меняет свой размер при отражении номера активного слайда. Я также использую веб-шрифт Bebas, хотя вы может по желанию взять что-нибудь другое.

Вот такая у нас будет структура папок:

Примененные плагины

Чтобы добиться намеченного, я применяю Stellar.js, плагин jquery от Марка Дэлглиша (Mark Dalgleish), с помощью которого создавать сайты с параллакс-прокруткой легко и просто. В конце статьи я перечислил другие плагины, с помощью которых можно это сделать. Я предпочел использовать Stellar.js, потому что его довольно просто применять и, хотя это в учебнике не показано, можно оптимизировать для работы на платформах интеллектуальных устройств, таких как iOS.

Я также собираюсь применить jQuery waypoints Калеба Тротона (Caleb Troughton). Waypoints – это другой плагин jQuery, исполняющий функцию при прокрутке элемента. Он дает возможность навигации сайта определить в соответствии с положением полосы прокрутки, на каком слайде мы находимся.

jQuery easing – это плагин от GSGD, предлагающий передовые опции ослабления. Мы применим его, чтобы при переходах от слайда к слайду получить красивое, легкое перемещения.

Мастер Йода рекомендует:  Курс «Изучение программирования. SQL»

Разметка HTML

Начав с index.html, добавляем HTML5 doctype, затем создаем раздел head. Он состоит из CSS Reset, за чем следует таблица стилей styles.css. Затем добавляем библиотеку jQuery, после которой идет наш пользовательский файл jQuery js.js. За ним, в свою очередь, следуют три плагина — jquery.stellar.min.js,waypoints.min.js и jquery.easing.1.3.js.

Следующий элемент нашего html – изображение логотипа Envato, находящийся в постоянном фиксированном положении на всем сайте. Добавляем для него класс envatologo, чтобы можно было позже при кодировании CSS установить его позиционирование.

Слайды

У четырех слайдов одна разметка:

Мы применяем класс slide, который будет использоваться как общий стиль всех слайдов. Затем каждому слайду назначается id slide, за которым следует номер слайда, например, Slide1. Применяем атрибут данных HTML5 и называем его data-slide. Это позволит нам выделить его с помощью jQuery как целевой объект. Добавлен другой атрибут данных data-stellar-background-ratio. Он – специально для плагина jQuery stellar.js и говорит тому, в каком соотношении должна прокручиваться скорость элемента.

Соотношение корреспондирует обычной скорости прокрутки, поэтому соотношение в 0.5 заставит элемент прокручиваться на половинной скорости, при соотношении в 1 никакого эффекта не произойдет, а при соотношении в 2 элемент станет прокручиваться с удвоенной скоростью.

У всех слайдов, кроме четвертого, есть кнопка, которая позволит нам прокручивать к следующему слайду. Мы добавляем ей атрибут data-slide со значением номера следующего слайда. Так кнопке становится известно, какой слайд следующий, поэтому можно передать данное значение в jQuery. У большинства слайдов, кроме того, имеется интервал с классом slideno; просто большая текстовая версия номера слайда, который появляется в нижнем левом углу большей части слайдов. Его также можно использовать для названий.

Для третьего и четвертого слайдов мы еще добавляем несколько элементов-изображений в div slide. Эти изображения обеспечат настоящее понимание создаваемого нами эффекта параллакса. Мы оборачиваем их в div wrapper шириной 960px, который будет центрирован, чтобы гарантировать хорошее отображение в мониторах десктопов всех размеров.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

К каждому изображению прикреплен атрибут data-stellar-ratio. Он, опять же, является специфичным для stellar.js и говорит плагину, в каком скоростном соотношении мы должны прокручивать элемент.

К счастью для нас, здесь задействовано совсем немного CSS. Это – базовые стили нескольких простых элементов, а по большей части – позиционирование некоторых элементов-изображений.

Первое, что нужно сделать в CSS – это ввести шрифт BEBAS с помощью @font-face. Затем добавляем его в html для определения шрифта сайта. Также устанавливаем ширину и высоту html и body на 100%. Так наши слайды смогут адаптироваться к полной ширине и высоте экрана пользователя.

Навигация

Позиция основной навигации установлена на fixed, чтобы на протяжении всего сайта удерживать ее в одном месте. Мы делаем сверху офсет в 20px, чтобы над ней было немного свободного пространства и устанавливаем z-index на 1, чтобы обеспечить ее пребывание в верхнем слое сайта.

В действительности весь список – это просто стили текста с границей, проходящей внизу в качестве подчеркивания. Ее ширина 53px. Также добавлен переход, анимирующий стандартное состояние навигации в состояние наведения мыши. Я воспользовался здесь префиксом -webkit- просто для сокращения кода, а полный исходный код, который можно скачать выше, содержит все префиксы.

Состояние наведения мыши применяет те же свойства, что и класс active; по существу, только увеличение размера и ширины шрифта. Класс active применен jQuery для назначения стилей соответствующему слайду, видимому в окне браузера.

Логотипу envato назначены несколько позиционирующих стилей, просто для обеспечения его местоположения в центре экрана. Аналогично навигации, ему также назначен z-index в 1, чтобы он оставался сверху.

Теперь перейдем к стилям самих слайдов. Назначаем им свойство привязки к фону fixed. Свойство привязки к фону background-attachment определяет, зафиксировано ли фоновое изображение или прокручивается вместе с остальной страницей, так что оказывается пригодным для фоновых изображений (таких, как примененные на слайде четыре). Для этого примера мы использовали обои Филиппа Сайферта (Philipp Seiffert), которые можно скачать здесь. Устанавливаем позиционирование слайда на relative. Благодаря этому мы можем абсолютно расположить классы slideno и button перед слайдом в отличие от действующего документа.

Тень блока применена в чисто декоративных целях и добавляет к верхней внутренней стороне каждого слайда красивую отбрасываемую тень.

.button – для кнопки внизу страницы, которая позволяет нам перейти к следующему слайду. Мы поместили ее по центру внизу каждого слайда и использовали в качестве указателя изображение стрелки.

Стили отдельного слайда сравнительно просты и каждый раз повторяют один шаблон. У первого слайда цвет фона #5c9900. У второго тоже есть установленный фоновый цвет. Также слайд два содержит изображения и каждое из них мы можем выбрать в качестве цели, применив селектор CSS nth-child(n). Этот селектор можно описать как:

Этот псевдокласс подбирает элементы на основании их расположения внутри списка дочерних элементов родительского элемента.

Так что мы в общем назначаем стили каждому изображению в том порядке, в котором они появляются в нашей разметке. Мы просто размещаем их относительно обертки слайда.

Слайд три следует тому же порядку, что и слайд два.


Четвертый слайд слегка отличатся от предыдущих двух, так как не содержит элементов-изображений и цвета фона, а вместо того применяет фоновое изображение. Также мы назначили ему свойство CSS3 background-size:cover. Оно в основном устанавливает фоновое изображение, чтобы то покрывало все окно браузера и меняет размер по мере изменения окна браузера. Также мы добавили строку текста в последнем слайде, которому назначили стили и класс parallaxbg.

jQuery

На самом деле jQuery как раз оживляет весь дизайн. Я прокомментировал код, чтобы можно было видеть, что в точности происходит.

Еще несколько моментов

Если посмотреть на слайд два нашего примера, вы заметите пузыри в 3D. Я добавил к некоторым из них легкое Гауссово размытие, в основном к тем, которые на переднем плане, и к фоновым. Сочетание их с четко фокусированными пузырями добавляет ощущения глубины, создаваемого параллаксом. При попытке создания в своем сайте красивой глубины стоит обдумать этот момент.

Множество сайтов, применяющих этот эффект, имеют тенденцию быть довольно перегруженными изображениями, так что убедитесь, что как можно сильнее сжали свои рисунки (без потери качества). Если после сжатия они все равно долго грузятся, обдумайте возможность добавления на свой сайт загрузчика.

Заключение

Параллакс-прокрутка в настоящее время – один из излюбленных эффектов, и его границы постоянно расширяются. Здесь и сейчас я показал вам, как установить основной вебсайт, применяющий параллакс-прокрутку. Демоверсия, показанная сегодня – это сравнительно простой сайт в учебных целях. Тех из вас, кто вот-вот создаст сайт с использованием этого эффекта, умоляю потратить время на выработку концепции и истории, потому что именно это делает его уникальным, многопользовательским и действительно доставляющим удовольствие. Применяйте этот эффект мудро, а не просто ради того, чтобы применить.

Надеюсь, вам понравилось читать о параллакс-прокрутке, и я хотел бы увидеть, как вы, ребята, применили ее на своих сайтах, так что не постесняйтесь оставить на них ссылки ниже. Увидимся!

Автор: Aaron Lumsden

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Прокрутка страницы

Наиболее удобные способы прокрутки страницы — это использование методов scrollBy() и scrollTo() голбального объекта window . Метод scrollBy() прокручивает страницу на определённое расстояние относительно текущего положения страницы.

window.scrollBy (смещение по горизонтали, смещение по вертикали)

смещение по горизонтали — смещение страницы по горизонтали в пикселях

смещение по вертикали — смещение страницы по вертикали в пикселях

Для изучения прокрутки создадим страницу и добавим на неё несколько блоков, чтобы страница не помещалась полностью в экран.

Прокрутим созданную страницу на 50 пикселей вниз:

Метод scrollTo() перемещает страницу к указанным координатам. То есть, страница перемещается на определённое количество пикселей относительно начала страницы.

window.scrollTo (координата X, координата Y)

координата X — координата X относительно начала докумена, на которую перемещается страница

координата Y — координата Y относительно начала докумена, на которую перемещается страница

Переместим страницу на 100 пикселей вниз относительно начала страницы:

У DOM-объектов есть метод scrollIntoView() . Этот метод прокручивает страницу так, чтобы объект оказался вверху страницы. Если методу в качестве параметра указать false , то объект будет оказываться внизу страницы.

Сделаем так, чтобы второй по счёту блок оказался вверху страницы:

Теперь сделаем так, чтобы пятый по счёту блок оказался внизу страницы:

Свойства pageXOffset и pageYOffset глобального объекта window позволяют узнать текущую прокрутку страницы. Координаты иногда имеют дробную часть. Это связано с тем, как они определяются в браузере. Пример:

В прошлой теме было рассмотрено получение координат элемента относительно окна браузера. К этим координатам нужно прибавить текущую прокрутку страницы и получаются координаты элемента относительно документа. Узнаем координаты пятого по счёту блока:

Коприрование материалов сайта возможно только с согласия администрации

Добавить комментарий