How to add Pure CSS Parallax Scrolling - html

Question

I would like to add some pure CSS parallax scrolling functionality to my website, but everything I've tried doesn't seem to work. I've searched here for answers too, but nothing answers my question. Does anybody know how I can take this code: http://wolfleader116.github.io/
(Sorry, the Doctype declaration isn't indented like that in the actual file.)
and add a pure CSS parallax scrolling feature so that the background scrolls at half speed? Thanks!

Answer 1

You Can Try this tutorial.
Tutorial Link 1
Tutorial Link 2
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}

Answer 2

You can use the background-attachment: fixed css style to create a CSS only parallax scroll. This uses the concept of the background-image being fixed and the remaining content scrolling with the page.
.parallax div{
background-attachment: fixed;
height: 50vh;
text-indent : -9999px;
position : relative;
background-position : center center;
background-size : cover;
&:nth-child( 2n ) {
box-shadow : inset 0 0 1em #111;
}
}
DEMO

Answer 3

This is how I did my website (WIP) with parralax scrolling (http://www.ideathhead.co.uk):
HTML:
Add section tags using the attributes below. (Each section represents a slide)
<section name="home" id="home" data-type="background" data-speed="10">
<p class="buzz-out" id="Welcome"></p>
</section>
CSS:
This will make sure your background image spans across the whole page, and adjusts it's size for every resolution!
#home {
background: url(img/slide1.png) 50% 0 repeat fixed;
min-height: 100%;
background-size: cover;
margin: 0 auto;
}
And that is literally it, for the basics of parallax scrolling anyway, if you dig further on the interwebs you could do some playing around for some cooler effects, remember, GOOGLE IS YOUR FRIEND!
_________________________________________________________________
BELOW IS OPTIONAL IF YOUR WILLING TO USE A BIT OF JS!!
_________________________________________________________________
Also, a tip is that if you want to add buttons later on the scroll smoothly to certain pages then add this to a JavaScript file:
JS:
This script makes page scrolling smoother, so it doesn't just jump to a part of a page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Then, in your HTML, in tags, set the href to the ID of the section to scroll to, and it will do so smoothly too! As an example,
This is the section:
<section name="home" id="home" data-type="background" data-speed="10">
<p class="buzz-out" id="Welcome"></p>
</section>
And this is the button:
CLICK
Remember, it is the ID not the name, because I got confused at first with that!
I was happy to help :)