Scroll down

This background moves

Photo by Josh Sorenson from Pexels Josh Sorenson from Pexels

This little exercise uses the jQuery library. Here is a code for the function it executes:

<script>
  $(window).scroll(function(){
    var scrollPosition = $(window).scrollTop()/2;
    $('section').css({
        'background-position-x' : - scrollPosition + 'px',
    })
  })
</script>
		

Another interesting feature I used is super simple way to scroll smoothly - it's done by simply adding this tiny tiny piece of code to css:

html {
    scroll-behavior: smooth;
}
		

And it works beautifully!

Last interesting thing I love using is font awesome. They are super easy and looking really stylish and modern. I just linked them in the head section and used in text by choosing an <i> tag. Font Awesome website

<i class="fas fa-arrow-up"></i>
		

Back to the Portfolio