7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Front-End

Простая техника Parallax скроллинга

Scroll to top
Read Time: 4 mins

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

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

Если вы ищете быстрый способ начать работу с базового шаблона для своей темы, находка простой Parallax Theme может быть хорошим вариантом. Или просмотрите наши Одностраничные шаблоны. Вы также можете найти разработчиков на Envato Studio, которые для вас создадут сайты с прокруткой параллакса.

В этом уроке я научу вас простейшей технике параллакс скроллинга, с которой вы когда-либо сталкивались, поэтому давайте углубимся!


Шаг 1: Разметка

Эта техника вращается вокруг контроля скорости фонового изображения. Итак, давайте начнем с разметки HTML, создав два раздела вместе с необходимыми атрибутами: "type" и "data-speed" . Не волнуйтесь; Я объясню это позже.

Я использую тег <section> с атрибутами data-type & data-speed, которые были введены в HTML5. Это делает HTML разметку более простой и удобной для чтения.

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

Поскольку все, что нам нужно сделать, это контролировать скорость фоновых изображений, мы будем использовать data-type="background" и data-speed="10" в качестве ключевых атрибутов для указания необходимых параметров.

Я знаю, о чем вы думаете: вы беспокоитесь об IE. Не беспокойтесь; У меня есть обходное решение для этого! Мы обсудим это.

Затем добавим содержимое в тег <article> внутри каждого <section>.

Здесь мы пытаемся сделать фоновую прокрутку медленнее, чем его содержимое, т.e <article>. Это поможет нам создать иллюзию параллакса. Прежде чем перейти к магии jQuery, добавим фоновые изображения в наш CSS для каждого <section>.

После добавления фона для обоих разделов он должен выглядеть так:

imageimageimage
imageimageimage

Давайте добавим еще несколько CSS стилей и оживим страницу!

Теперь это должно выглядеть так ...

imageimageimage

Шаг 2: Магический код

Да, это так; здесь начинается волшебство! Используя jQuery, мы начнем с стандартного метода document.ready(), чтобы убедиться, что страница загружена и готова к манипулированию.

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

Теперь мне нужно ваше внимание здесь. Первое, что происходит ниже, это то, что мы итерируемся по каждому <section> на странице, который имеет атрибут data-type="background".

Добавьте еще одну функцию .scroll(), внутри .each(), которая вызывается, когда пользователь начинает скролить.

Нам нужно определить, сколько пользователь проскроллил, а затем разделить значение на значение data-speed, указанное в разметке.

$window.scrollTop() : мы получаем текущее значение скролла сверху. Это в основном определяет, сколько пользователь скроллил. $bgobj.data('speed') относится к data-speed, назначенной в разметке, а yPos - это последнее значение, которое нам нужно применить для скроллинга. Однако это будет отрицательное значение, потому что мы должны переместить фон в противоположном направлении скроллинга пользователя.

Давайте немного подробнее рассмотрим пример:

imageimageimage

На приведенном выше изображении data-speed равен 10, и предположим, что окно браузера скроллица на 57px . Это означает, что 57px делится на 10 = 5.7px.

Последнее, что нам нужно сделать, это собрать наше окончательное исходное положение в переменную. Чтобы сохранить горизонтальное положение фона как статического, мы назначили 50% в качестве xPosition. Затем мы добавили yPos в качестве yPosition и, наконец, назначили фоновые координаты на наш <section>: $bgobj.css ({backgroundPosition: coords});.

Ваш финальный код может выглядеть так:

Да, мы это сделали! Попробуйте сами.


Фиксы IE

Последнее исправление: более старый IE не может отображать теги <section> и <article>. Это легко исправить; мы будем использовать стандартное решение для создания элементов, что делает браузер волшебным образом распознающим теги HTML5.

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

Есть вопросы или замечания, которые вы хотите добавить? Дайте мне знать о них в комментариях!

И если вы ищете быстрое решение с профессиональными результатами, ознакомьтесь с нашими вариантами Parallax Theme и One Template, доступными для покупки на ThemeForest.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.