Header Bild (Jarallax)

JS Plugin
Just Another Parallax (https://github.com/nk-o/jarallax) und Object fit images (https://github.com/bfred-it/object-fit-images).

Beispiel siehe z.B. unter Angebot.

Einstellungen

Falls im Code mobileImg auf true gesetzt ist, wird auf Mobile der Jarallax-Container ausgeblendet und ein zusätzlicher div mit img-fluid angezeigt. Ansonsten wird eine fixe Höhe gesetzt.

Standard: true

                            
<!-- Mobile img fluid -->

<header>

	<div class="mobile-head d-block d-md-none">

		<img class="img-fluid" src="index.php?rex_media_type=slider-xs&rex_media_file=teilch_werbeagentur-zurich_0.jpg" alt="Werbeagentur">

	</div>

	<div class="full-head-img jarallax d-none d-md-block" data-speed="0.8">

		<img class="jarallax-img" src="index.php?rex_media_type=slider&rex_media_file=teilch_werbeagentur-zurich_0.jpg" alt="Werbeagentur">

	</div>

</header>



<!-- Immer fixe Höhe (JS) -->

<header>

	<div class="full-head-img jarallax" data-speed="0.8">

		<img class="jarallax-img" src="index.php?rex_media_type=slider&rex_media_file=teilch_werbeagentur-zurich_0.jpg" alt="Werbeagentur">

	</div>

</header>

Init

                            
/*************************/

/* Jarallax / Ofi */

/*************************/

objectFitImages();

$('.jarallax').jarallax();

SASS

                            
/* _jarallax.scss */



.jarallax {

  position: relative;

  z-index: 0;

}

.jarallax > .jarallax-img {

  position: absolute;

  object-fit: cover;

  font-family: 'object-fit: cover;';

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: -1;

}



header {

	.jarallax {

  		min-height: 550px;

	}

}