Root Zanli
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
o5t6x7pgljbm
/
public_html
/
intuitionexchange.com
/
components
/
Filename :
parallax.html
back
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Silicon UI Kit | Parallax</title> <!-- SEO Meta Tags --> <meta name="description" content="Silicon - Multipurpose Technology Bootstrap Template"> <meta name="keywords" content="bootstrap, business, creative agency, mobile app showcase, saas, fintech, finance, online courses, software, medical, conference landing, services, e-commerce, shopping cart, multipurpose, shop, ui kit, marketing, seo, landing, blog, portfolio, html5, css3, javascript, gallery, slider, touch, creative"> <meta name="author" content="Createx Studio"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Favicon and Touch Icons --> <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png"> <link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="mask-icon" href="../assets/favicon/safari-pinned-tab.svg" color="#6366f1"> <link rel="shortcut icon" href="../assets/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#080032"> <meta name="msapplication-config" content="../assets/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <!-- Vendor Styles --> <link rel="stylesheet" media="screen" href="../assets/vendor/boxicons/css/boxicons.min.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/swiper/swiper-bundle.min.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/themes/prism.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/plugins/toolbar/prism-toolbar.css"/> <link rel="stylesheet" media="screen" href="../assets/vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/> <!-- Main Theme Styles + Bootstrap --> <link rel="stylesheet" media="screen" href="../assets/css/theme.min.css"> <!-- Theme mode --> <script> let mode = window.localStorage.getItem('mode'), root = document.getElementsByTagName('html')[0]; if (mode !== null && mode === 'dark') { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } </script> </head> <!-- Body --> <body data-bs-spy="scroll" data-bs-target="#jumpToNav" tabindex="0"> <!-- Navbar --> <header class="header navbar navbar-expand bg-light border-bottom border-light shadow fixed-top" data-scroll-header> <div class="container-fluid pe-lg-4"> <div class="d-flex align-items-center"> <a href="typography.html" class="navbar-brand flex-shrink-0 py-1 py-lg-2"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-warning">UI Kit</span> </div> <div class="d-flex align-items-center w-100"> <ul class="navbar-nav d-none d-lg-flex" style="padding-left: 11.75rem;"> <li class="nav-item"> <a href="../index.html" class="nav-link"> <i class="bx bx-desktop opacity-70 fs-lg me-1"></i> Live preview </a> </li> <li class="nav-item"> <a href="../docs/getting-started.html" class="nav-link"> <i class="bx bx-file opacity-70 fs-lg me-1"></i> Documentation </a> </li> </ul> <button type="button" class="navbar-toggler d-block d-lg-none ms-auto me-4" data-bs-toggle="offcanvas" data-bs-target="#componentsNav" aria-controls="componentsNav" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="form-check form-switch mode-switch pe-lg-1 ms-lg-auto" data-bs-toggle="mode"> <input type="checkbox" class="form-check-input" id="theme-mode"> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label> </div> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary btn-sm fs-sm rounded ms-4 d-none d-lg-inline-flex" target="_blank" rel="noopener"> <i class="bx bx-cart fs-5 lh-1 me-1"></i> Buy now </a> </div> </div> </header> <!-- Main sidebar navigation --> <aside class="dark-mode"> <div id="componentsNav" class="offcanvas-lg offcanvas-start d-flex flex-column position-fixed top-0 start-0 vh-100 bg-dark border-end-lg" style="width: 21rem; z-index: 1045;"> <div class="offcanvas-header d-none d-lg-flex justify-content-start"> <a href="typography.html" class="navbar-brand text-dark d-none d-lg-flex py-0"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-warning d-none d-lg-inline-block">UI Kit</span> </div> <div class="offcanvas-header d-block d-lg-none border-bottom"> <div class="d-flex align-items-center justify-content-between mb-3"> <h5 class="d-lg-none mb-0">Menu</h5> <button type="button" class="btn-close d-lg-none" data-bs-dismiss="offcanvas" data-bs-target="#componentsNav"></button> </div> <div class="list-group list-group-flush mx-n4"> <a href="../index.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-desktop fs-lg opacity-80 me-2"></i> Preview </a> <a href="../docs/getting-started.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-file fs-lg opacity-80 me-2"></i> Documentation </a> </div> </div> <div class="offcanvas-body swiper scrollbar-hover overflow-hidden w-100 p-4" data-swiper-options='{ "direction": "vertical", "slidesPerView": "auto", "freeMode": true, "scrollbar": { "el": ".swiper-scrollbar" }, "mousewheel": true }'> <div class="swiper-wrapper"> <div class="swiper-slide h-auto"> <h3 class="fs-lg">Content</h3> <div class="list-group list-group-flush border-bottom pb-3 mb-4 mx-n4"> <a href="typography.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Typography</a> <a href="https://boxicons.com/" class="list-group-item list-group-item-action border-0 py-2 px-4" target="_blank" rel="noopener">Icon font</a> <a href="code.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Code</a> <a href="images.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Images & figures</a> <a href="tables.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tables</a> </div> <h3 class="fs-lg">Components</h3> <div class="list-group list-group-flush border-bottom pb-3 mb-4 mx-n4"> <a href="accordion.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Accordion</a> <a href="alerts.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Alerts</a> <a href="audio-player.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Audio player</a> <a href="badges.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Badges</a> <a href="blog-components.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Blog components</a> <a href="breadcrumb.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Breadcrumb</a> <a href="buttons.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Buttons</a> <a href="button-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Button group</a> <a href="cards.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Cards</a> <a href="carousel.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Carousel (Slider)</a> <a href="collapse.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Collapse</a> <a href="dropdowns.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Dropdowns</a> <a href="forms.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Forms</a> <a href="gallery.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Gallery (Lightbox)</a> <a href="image-comparison-slider.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Image comparison slider</a> <a href="input-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Input group</a> <a href="list-group.html" class="list-group-item list-group-item-action border-0 py-2 px-4">List group</a> <a href="modal.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Modal</a> <a href="navbar.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Navbar</a> <a href="offcanvas.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Offcanvas</a> <a href="pagination.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pagination</a> <a href="parallax.html" class="list-group-item list-group-item-action border-0 py-2 px-4 active">Parallax</a> <a href="pills.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pills</a> <a href="placeholders.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Placeholders</a> <a href="popovers.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Popovers</a> <a href="portfolio-components.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Portfolio components</a> <a href="pricing.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Pricing</a> <a href="progress-bars.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Progress bars</a> <a href="social-buttons.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Social buttons</a> <a href="spinners.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Spinners</a> <a href="steps.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Steps</a> <a href="tabs.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tabs</a> <a href="team.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Team</a> <a href="testimonials.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Testimonials / reviews</a> <a href="toasts.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Toasts</a> <a href="tooltips.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Tooltips</a> <a href="video-popup.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Video popup</a> </div> <h3 class="fs-lg">Utilities</h3> <div class="list-group list-group-flush mx-n4 pb-2"> <a href="https://getbootstrap.com/docs/5.2/utilities/background/" class="list-group-item list-group-item-action border-0 py-2 px-4" target="_blank" rel="noopener">Bootstrap</a> <a href="utilities.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Silicon</a> </div> </div> </div> <div class="swiper-scrollbar end-0"></div> </div> <div class="offcanvas-header border-top"> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary w-100" target="_blank" rel="noopener"> <i class="bx bx-cart fs-4 lh-1 me-1"></i> Buy now </a> </div> </div> </aside> <!-- Page container --> <main class="docs-container pt-5"> <div class="container-fluid px-xxl-5 px-lg-4 pt-4 pt-lg-5 pb-2 pb-lg-4"> <!-- Page title --> <div class="d-sm-flex align-items-end justify-content-between ps-lg-2 ps-xxl-0 mt-2 mt-lg-0 pt-4 mb-n3"> <div class="me-4"> <h1 class="pb-1">Parallax</h1> <p class="text-muted fs-lg mb-2">Silicon supports 2 types of parallax effect: on page scrolling and cursor position.</p> </div> <span class="badge bg-warning mb-2">Silicon component</span> </div> <!-- Info alert --> <div class="alert alert-info mt-5 mb-n1 mb-lg-0" role="alert"> <div class="d-flex"> <i class="bx bx-info-circle lead me-2 me-sm-3"></i> <div class="text-break"> <p class="mb-2">In your document make sure to link to:</p> <ul class="mb-2 list-unstyled"> <li><strong>assets/vendor/jarallax/dist/jarallax.min.js</strong> - for background image parallax</li> <li><strong>assets/vendor/rellax/rellax.min.js</strong> - for element parallax</li> <li><strong>assets/vendor/parallax-js/dist/parallax.min.js</strong> - for cursor position parallax</li> <li><strong>assets/vendor/vanilla-tilt/dist/vanilla-tilt.min.js</strong> - for 3D tilt effect</li> </ul> <p class="mb-0">Use this page as a reference.</p> </div> </div> </div> <!-- Background image --> <section id="parallax-background" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Background image</h2> <div class="d-table"> <ul class="nav nav-tabs-alt fs-sm" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview1" data-bs-toggle="tab" role="tab" aria-controls="preview1" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html1" data-bs-toggle="tab" role="tab" aria-controls="html1" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview1" role="tabpanel"> <div class="pb-4 mx-auto" style="max-width: 38rem;"> <p>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. <span class="d-none d-md-inline">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.</span></p> </div> <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> <div class="pt-5 mx-auto" style="max-width: 38rem;"> <p>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. <span class="d-none d-md-inline">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.</span></p> </div> </div> <div class="tab-pane fade" id="html1" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- 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></code></pre> </div> </div> </section> <!-- Element parallax --> <section id="parallax-element" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Element parallax</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview2" data-bs-toggle="tab" role="tab" aria-controls="preview2" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html2" data-bs-toggle="tab" role="tab" aria-controls="html2" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview2" role="tabpanel"> <div class="d-flex justify-content-center py-5"> <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> </div> <div class="tab-pane fade" id="html2" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- 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></code></pre> </div> </div> </section> <!-- Cursor position parallax --> <section id="parallax-cursor" class="border-bottom py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">Cursor position parallax</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview3" data-bs-toggle="tab" role="tab" aria-controls="preview3" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html3" data-bs-toggle="tab" role="tab" aria-controls="html3" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview3" role="tabpanel"> <div class="position-relative py-5 px-3"> <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-primary opacity-10"></div> <div class="position-relative d-flex justify-content-center zindex-5 py-md-4"> <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> </div> </div> </div> <div class="tab-pane fade" id="html3" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- 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></code></pre> </div> </div> </section> <!-- 3D tilt effect --> <section id="parallax-tilt" class="py-5 ps-lg-2 ps-xxl-0"> <h2 class="h4">3D tilt effect</h2> <div class="d-table"> <ul class="nav nav-tabs-alt" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#preview4" data-bs-toggle="tab" role="tab" aria-controls="preview4" aria-selected="true"> <i class="bx bx-show-alt fs-base opacity-70 me-2"></i> Preview </a> </li> <li class="nav-item"> <a class="nav-link" href="#html4" data-bs-toggle="tab" role="tab" aria-controls="html4" aria-selected="false"> <i class="bx bx-code-alt fs-base opacity-70 me-2"></i> HTML </a> </li> </ul> </div> <div class="tab-content pt-1"> <div class="tab-pane fade show active" id="preview4" role="tabpanel"> <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> </div> <div class="tab-pane fade" id="html4" role="tabpanel"> <pre class="line-numbers"><code class="lang-html"><!-- 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></code></pre> </div> </div> </section> </div> </main> <!-- Jump to anchor navigation --> <aside id="jumpToNav" class="side-nav side-nav-end d-none d-xxl-block position-fixed top-0 end-0 vh-100 py-5" style="width: 20rem;"> <h3 class="fs-lg mt-5 pt-5">Jump to</h3> <ul class="nav"> <li class="nav-item"> <a href="#parallax-background" class="nav-link" data-scroll data-scroll-offset="-6">Background image</a> </li> <li class="nav-item"> <a href="#parallax-element" class="nav-link" data-scroll data-scroll-offset="-6">Element parallax</a> </li> <li class="nav-item"> <a href="#parallax-cursor" class="nav-link" data-scroll data-scroll-offset="-6">Cursor position parallax</a> </li> <li class="nav-item"> <a href="#parallax-tilt" class="nav-link" data-scroll data-scroll-offset="-6">3D tilt effect</a> </li> </ul> </aside> <!-- Back to top button --> <a href="#top" class="btn-scroll-top" data-scroll> <span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span> <i class="btn-scroll-top-icon bx bx-chevron-up"></i> </a> <!-- Vendor Scripts --> <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script> <script src="../assets/vendor/jarallax/dist/jarallax.min.js"></script> <script src="../assets/vendor/rellax/rellax.min.js"></script> <script src="../assets/vendor/parallax-js/dist/parallax.min.js"></script> <script src="../assets/vendor/vanilla-tilt/dist/vanilla-tilt.min.js"></script> <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-core.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-markup.min.js"></script> <script src="../assets/vendor/prismjs/components/prism-clike.min.js"></script> <script src="../assets/vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script> <script src="../assets/vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> <script src="../assets/vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script> <!-- Main Theme Script --> <script src="../assets/js/theme.min.js"></script> </body> </html>