Parallax

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.

Leave a Comment

seventeen − 13 =