Simple Parallax effect

This is just a simple parrallax effect, that doenst use bloated plugins

by jonahe

HTML

<div class="scroll">
     <h1>Text on parralax background</h1>
</div>
<a href="http://bjornnyborg.com" target="blank">By Bjørn Nyborg</a>

CSS

.scroll {
     /*Set a css background */
    background:url(http://placekitten.com/1000/700) fixed;
    
    /*Dont mind the rest*/
    width:500px;
    height:300px;
    line-height:300px;
    margin:0 auto;
    margin-top:150px;
    text-align:center;
    color:#fff;
    font-family:'Open Sans' sans-serif;
}
body {
    min-height:3000px;
}
a {
    margin-top:20px;
    display:block;
    text-align:center;
    text-decoration:none;
    font-family:'Open Sans' sans-serif;
    color:#666;
    -webkit-transition:opacity .5s;
    transition:opacity .5s;
}
a:hover {
     -webkit-transition:opacity .5s;
    transition:opacity .5s;
    opacity:.5;
}
/*------------------*/

JavaScript

//Parallax 
function simpleParallax() {
    //This variable is storing the distance scrolled
    var scrolled = window.scrollY + 1;

    //Every element with the class "scroll" will have parallax background 
    //Change the "0.3" for adjusting scroll speed.
    Array.from(document.querySelectorAll('.scroll')).forEach(el => {
    el.style['background-position'] =  '0' + -(scrolled * 0.3) + 'px'});
    console.log("ega", scrolled)
}
//Everytime we scroll, it will fire the function


window.addEventListener("scroll", e => {
	simpleParallax();
});