Будем делать параллакс эффект средствами 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
|
1 2 3 4 5 6 7 8 |
$(function() { $(window).scroll(function(){ var scr = $(this).scrollTop(); $(".text").css({ "transform" : "translate(0%, " + scr + "%" }); }); }); |
Перейдем в браузер и колесиком мышки сделаем скроллинг, увидим что текст съезжает под картинку.
Откроем консоль браузера и убедимся, что у дива с классом text меняется проценты значения translate.
Параллакс на бекграунде
Создадим вторую секцию и добавим в нее картинку.
Зададим css свойства для второй секции.
Добавим в common.js код. Скопируем из верней части и вставим в низ.
Чтобы картинка вторая не сразу пропадала разделим на 20 внутри значения translate.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { $(window).scroll(function(){ var scr = $(this).scrollTop(); $(".text").css({ "transform" : "translate(0%, " + scr + "%" }); $(".sec2 img").css({ "transform" : "translate(0%, " + scr /20 + "%" }); }); }); |
Смотрим в браузере, что картинка из второй секции section стала двигаться при скроллинге изменяя значения, которые видны из консоли браузера.
Меняя значения можно настраивать плавность перемещения.
