Démonstration du Plugin Parallax issu du framework EMS Framework
Il convient d'ajuster la hauteur de l'élément ainsi que les paramètres posy et inertia en fonction de la hauteur de l'image utilisée.
<div class="parallaxExample" data-background="parallax03.jpg"></div>
<div class="row">
<div class="column column12">
<h1>Parallax</h1>
<p class="lead">Démonstration du Plugin Parallax issu du framework EMS Framework</p>
</div>
</div>
<div class="parallaxExample" data-background="parallax04.jpg" data-inertia=".4" data-posy="bottom"></div>
<script>
$(window).on('load', function(){
$('.parallaxExample').parallax();
});
</script>
Dans cet exemple, la hauteur des éléments est définie en CSS, permettant un ajustement en fonction de la résolution :
.parallaxExample{
height: 30vh;
}
@media (min-width: 992px){
.parallaxExample{
height: 400px;
}
}
@media (min-width: 1200px){
.parallaxExample{
height: 500px;
}
}