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

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

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

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

Демо