Front-end воїн - “Slip Scroll” ефект

У сьогоднішньому уроці ми збираємося створити простий, гнучкий ефект паралакса, де логотип, здавалося б, змінює колір з фоном, коли користувач скролить.

Ми будемо створювати елемент "за замовчуванням", який буде з цим типом розміщення ( position: fixed ), і купою "рухливих" елементів. Буде використаний JavaScript, щоб це відбувалось щоразу, коли користувач гортає сторінку.

Базова розмітка

Ми почнемо зі створення пари елементів. Давайте зробимо один з бекграундів темним і один світлим, щоб ми могли мати контрастну картинку. Підемо далі і надамо клас зображенням default, і moveable.

<div class="container dark">
  <img src="img/acme-light.svg" class="default">
</div>
<div class="container light">
  <img src="img/acme-dark.svg" class="moveable">
</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;
}

Тепер давайте встановимо наш default і 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>
  </body>
</html>

Створимо і відкриємо файл з ім'ям 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 самі, щоб побачити, які дивні зміщення ви отримаєте, якщо ви додасте або видалите кілька пікселів. Спробуйте використовувати різні елементи, а не тільки зображення для вашого вмісту.

Я сподіваюся, що ви багато чому навчилися і не соромтеся коментувати нижче.

Джерело

Демо