8 459 Parallax / Codepen

Параллакс эффект

Параллакс эффект при перемещениях курсора и эффект mix-blend-mode применяемый для текста


HTML

<div id="scene" data-relative-input="true" class="parallax">
  <div data-depth="0.4" class="text-center">
    <img id="mountain" src="http://www.design-fenix.com.ar/parallax/mountain.png" alt="">
  </div>
  <h1 data-depth="0.2" class="text-center">PARALLAX</h1>
  <div data-depth="0.3" class="text-center">
    <img id="island" src="http://www.design-fenix.com.ar/parallax/island.png" alt="">
  </div>
  <div data-depth="0.3" class="text-center">
    <img id="birds" src="http://www.design-fenix.com.ar/parallax/bird.png" alt="">
  </div>
  <div data-depth="0.1" class="text-center">
    <img id="boat" src="http://www.design-fenix.com.ar/parallax/boat.png" alt="">
  </div>
  <h2 data-depth="0.1" class="text-center">BLENDING CSS OPTIONS</h2>
</div>

LESS

JS

Библиотека jquery
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
и parallax.js
https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js
скрипт
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи