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


Introductie

Met CSS-framework kun je het parallax-effect aan een afbeelding geven.
Het parallax-effect betekent dat de afbeelding blijft staan en dat de andere elementen eroverheen schuiven wanneer u scrolt.
Het lijkt er echter op dat sommige smartphones parallax niet ondersteunen!

Klik op de Class naam om deze te kopiƫren.

parallax

Voorbeeld

Voorbeeld Parallax


Voorbeeldcode:

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

Voorbeeld Fullscreen pc - laptop

Voorbeeld mobiel(parallax is opgeheven!)


Voorbeeldcode:

<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