flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Parallax


Introduction

With CSS framework you can give the parallax effect to an image.
The parallax effect means that the image remains and the other elements slide over it when you scroll.
However, it appears that some smartphones do not support parallax!

Click on the Class name to copy it.

parallax

Example

Example Parallax


Example code:

<div style="max-width: 600px;width: 100%;overflow: auto;height: 400px;" class="float-center border border-thick">
  <div class="parallax" style="background-image: url(images/zomer1.jpg);"></div>
  <div class="container c-red">
    <h1 class="center">Parralax Example</h1>
    <p class="lorum-lg"></p>
  </div>
  <div class="parallax" style="background-image: url(images/zomer2.jpg);"></div>
</div>

Example Fullscreen pc - laptop

Example mobile(parallax has been lifted!)


Example code:

<style>
  body, html {height: 100%;}
</style>

<div class="parallax" style="background-image: url('images/zomer3.jpg');"></div>
<div class="container c-blue">
  <h1 class="center">Parralax Example</h1>
  <p class="lorum-lg"></p>
</div>
<div class="parallax" style="background-image: url('images/zomer4.jpg');"></div>


© Copyright by Web Henkie
All right reserved
Webmaster