Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Parallax

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

Silicon component

In your document make sure to link to:

- assets/vendor/jarallax/dist/jarallax.min.js - for background image parallax
- assets/vendor/rellax/rellax.min.js - for element parallax
- assets/vendor/parallax-js/dist/parallax.min.js - for cursor position parallax
- assets/vendor/vanilla-tilt/dist/vanilla-tilt.min.js - for 3D tilt effect

Use this page as a reference.

## 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

    <!-- 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