Август 2017
Автор: Рубрика: Верстка Комментариев нет

Красивый эффекты parallax для сайта


Красивый эффекты parallax для сайта

Будем делать параллакс эффект средствами jquery.

Открываем чистый стартовый шаблон, у которого уже есть css и jquery.

Параллакс на тексте

Сразу приступим к верстки в теге body добавим section с классом sec1.

Внутри секции будет картинка img src=img/phot2.jpg и текст выводится дивом с классом text.

  • Зададим для секции css стили height: 100vh, цвет синий и position: relative.
  • У класса sec1 стиль будет background-size: cover, когда бекграунд занимает все пространство.
  • Третим зададим стиль text, как на картинке.

делаем параллакс эффект

Создадим скрипт для эффекта параллакс

Открываем common.js и пишем код.

У jquery есть стандартная функция scrolltop, добавим ее в переменную src.

Скроллим window значит пишем this точка scrolltop.

Теперь классу text придадим эффект пишем свойство transform с значением translate

Перейдем в браузер и колесиком мышки сделаем скроллинг, увидим что текст съезжает под картинку.
Откроем консоль браузера и убедимся, что у дива с классом text меняется проценты значения translate.

Создадим скрипт для эффекта параллакс

Параллакс на бекграунде

Создадим вторую секцию и добавим в нее картинку.

Зададим css свойства для второй секции.

Параллакс на бекграунде

Добавим в common.js код. Скопируем из верней части и вставим в низ.

Чтобы картинка вторая не сразу пропадала разделим на 20 внутри значения translate.

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

Меняя значения можно настраивать плавность перемещения.

изменения значения translate

Комментариев нет