У сьогоднішньому уроці ми збираємося створити простий, гнучкий ефект паралакса, де логотип, здавалося б, змінює колір з фоном, коли користувач скролить.
Ми будемо створювати елемент "за замовчуванням", який буде з цим типом
розміщення ( position: fixed ), і купою "рухливих" елементів. Буде
використаний JavaScript, щоб це відбувалось щоразу, коли користувач гортає
сторінку.
Базова розмітка
Ми почнемо зі створення пари елементів. Давайте зробимо один з бекграундів
темним і один світлим, щоб ми могли мати контрастну картинку. Підемо далі і
надамо клас зображенням default, і moveable.
<div class="container dark">
<img class="default" src="img/acme-light.svg">
</div>
<div class="container light">
<img class="moveable" src="img/acme-dark.svg">
</div>
Базові стилі
Тепер давайте переконаємось, що наші зображення не виходять за межі своїх
контейнерів, встановивши overflow: hidden . Ці контейнери мають відносне
(relative) положення, так що абсолютно позиціонуються і будуть вирівняні до
цих контейнерів.
Заради scrollability, давайте встановимо контейнерам min-height близько
400px . І посунемо наші логотипи від країв, встановимо padding зі
значенням 1em .
.container {
overflow: hidden;
position: relative;
min-height: 400px;
padding: 1em;
}
Кожен контейнер повинен мати контрастний колір :
.dark {
background: #333;
}
.light {
background: #fff;
}
Тепер давайте встановимо наш d``efault і moveable в CSS для того, щоб один
контейнер фіксувався, коли користувач виконує прокрутку, а інший рухався не
натикаючись на інші елементи:
.default {
position: fixed;
}
.moveable {
position: absolute;
}
JavaScript
Тепер найцікавіше, як змусити це працювати з JavaScript.
Спочатку ми завантажимо JQuery і наш власний сценарій в нижній частині нашого
**index.html **:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/slipScroll.js"></script>
Створимо і відкриємо файл з ім'ям js/slipScroll.js** **.
В цьому файлі, перше, що ми зробимо, це створимо функцію з ім'ям setLogo і
кинемо цю функцію в JQuery scroll event, так що кожен раз, коли користувач
прокручує піксель, ця подія виконується:
var setLogo = function() {
};
$(document).scroll(function() {
setLogo();
});
setLogo();
Запрацюй!
var setLogo = function() {
$('.moveable').each(function() {
$(this).css('top',
$('.default').offset().top -
$(this).closest('.container').offset().top
);
});
};
Обновіть сторінку, і вуаля! Ви тільки що створили псевдо-паралакс ефект прокрутки всього за кілька рядків коду.
Висновок
Спробуйте пограти з функцією JavaScript самі, щоб побачити, які дивні зміщення ви отримаєте, якщо ви додасте або видалите кілька пікселів. Спробуйте використовувати різні елементи, а не тільки зображення для вашого вмісту.
Я сподіваюся, що ви багато чому навчилися і не соромтеся коментувати нижче.
Ще немає коментарів