The so-called parallax effect (fixed image when scrolling) as on the front page of this website is very easy to get with only some CSS (except on IOS device, see the @supports below.
Here is the CSS snippet used on this website.
add_action( 'wp_head', function () { ?>
<style>
.parallax {
background-position: center top;
background-repeat: no-repeat;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@supports not (-webkit-touch-callout: none) {
.parallax{
background-attachment: fixed;
}
}
.parallax-content {
width:80%;
margin:0 auto;
position:absolute;
top:60vh;
left:0;
right:0;
text-align:center;
}
}
</style>
<?
} );Then, this is how to use it inside a page.
<style>
.parallax {
background-image: url("your image URL");
}
</style>
<div class="parallax">
<div class="parallax-content">
Your text goes here
</div>
</div>If you want some special effects as different scrolling speeds for different blocks, then you will need some Javascript.
