Silicon Silicon UI Kit
 Buy now

Parallax

Silicon supports 2 types of parallax effect: on page scrolling and cursor position.

Silicon component

Background image

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat.

Parallax backgound image

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat.

<!-- Background image parallax -->
<div class="jarallax bg-dark py-5" data-jarallax data-speed="0.5">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50"></span>
  <div class="jarallax-img" style="background-image: url(assets/img/landing/software-company/case-study01.jpg);"></div>
  <div class="position-relative text-center zindex-5 py-sm-5">
    <div class="py-lg-5 px-3">
      <h2 class="h1 my-5 text-light text-shadow">Parallax backgound image</h2>
    </div>
  </div>
</div>

Element parallax

S
I
L
I
C
O
N
<!-- Element parallax -->
<div class="d-flex justify-content-center">
  <div class="rellax display-1 text-primary px-1" data-rellax-percentage="0.5" data-rellax-speed="-0.5">S</div>
  <div class="rellax display-1 text-success px-1" data-rellax-percentage="0.5" data-rellax-speed="1">I</div>
  <div class="rellax display-1 text-warning px-1" data-rellax-percentage="0.5" data-rellax-speed="-0.75">L</div>
  <div class="rellax display-1 text-info px-1" data-rellax-percentage="0.5" data-rellax-speed="0.75">I</div>
  <div class="rellax display-1 text-danger px-1" data-rellax-percentage="0.5" data-rellax-speed="-1.5">C</div>
  <div class="rellax display-1 text-success px-1" data-rellax-percentage="0.5" data-rellax-speed="1.25">O</div>
  <div class="rellax display-1 text-primary px-1" data-rellax-percentage="0.5" data-rellax-speed="-1">N</div>
</div>

Cursor position parallax

Layer
Layer
Layer
Layer
Layer
Layer 
<!-- Cursor position parallax -->
<div class="parallax" style="max-width: 648px;">
  <div class="parallax-layer" data-depth="0.1">
    <img src="assets/img/landing/online-courses/hero/layer01.png" alt="Layer">
  </div>
  <div class="parallax-layer" data-depth="0.13">
    <img src="assets/img/landing/online-courses/hero/layer02.png" alt="Layer">
  </div>
  <div class="parallax-layer zindex-5" data-depth="-0.12">
    <img src="assets/img/landing/online-courses/hero/layer03.png" alt="Layer">
  </div>
  <div class="parallax-layer zindex-3" data-depth="0.27">
    <img src="assets/img/landing/online-courses/hero/layer04.png" alt="Layer">
  </div>
  <div class="parallax-layer zindex-1" data-depth="-0.18">
    <img src="assets/img/landing/online-courses/hero/layer05.png" alt="Layer">
  </div>
  <div class="parallax-layer zindex-1" data-depth="0.1">
    <img src="assets/img/landing/online-courses/hero/layer06.png" alt="Layer">
  </div>
</div>

3D tilt effect

Hover and move your mouse

<!-- 3D tilt effect -->
<div class="tilt-3d position-relative bg-gradient-primary ratio ratio-4x3 mx-auto" data-tilt data-tilt-glare data-tilt-max-glare="0.4" style="max-width: 500px;">
  <div class="tilt-3d-inner d-flex flex-column align-items-center justify-content-center position-absolute top-0 start-0 w-100 h-100 text-center p-3">
    <h4 class="text-light text-shadow mb-0">Hover and move your mouse</h4>
  </div>
</div>
Top