Fixed Background Image Scrolling Content

In this tutorial, we are going to create fixed background image scrolling content using CSS and jQuery. We have already created parallax scrolling effect a few months ago. Now, it’s time to create similar effect with JavaScript.

Basically, the parallax effect and scrolling is a new website trend whether the background  images will moved at different speed than the foreground content when user scrolling down. It’s an attractive effect that can be applied to as many layers as you like.

So, I decided to create a fullscreen background image with fixed position with 100% content area. The content are will be centered and scrollable.

Do you ever wondered how to achieve parallax consequences on a scroll? OK, I’ll show you how simple it can be. The usage of CSS and a bit of jQuery. I am no longer a fan of lengthy intros, so feel free to scroll instantly down for the demo!

Create Fixed Background Image Scrolling Content

The code in the main index.html file is pretty simple. We have three sections with a background color, but header has a background image.

These sections are divided into a header, content, and footer.

<div id="scroll-animate">
  <div id="scroll-animate-main">
    <div class="wrapper-parallax">
      <header>
      <div class="codeconveyTop clearfix">
            <ul>
            <li><a href="https://codeconvey.comlive/Tutorials/ResponsiveSlideOutMenu/"><span>Previous Demo</span></a></li>
            <li><a href="https://codeconvey.comlive/?p=863"><span>Back to the Codeconvey Article</span></a></li>
            </ul>
        </div>
        <h1>Jquery Parallax Effect<span>Scroll Down to see</span></h1>	
      </header>
      <section class="content">
        <h1>Content</h1>
      </section>

      <footer>
        <h1>Footer</h1>
      </footer>
    </div>
  </div>
</div>

The Styling

Let’s have a look at the CSS.

#scroll-animate
{
  overflow: hidden;
}
#scroll-animate-main
{
  width: 100%;
  left: 0;
  position: fixed;
}
#heightPage,
#heightScroll
{
  width: 10px;
  top: 0;
  position: absolute;
  z-index: 99;
}
#heightPage
{
  left: 0;
}
#heightScroll
{
  right: 0;
}
header
{
  width: 100%;
  height: 100%;
  background: url(p1.jpg) no-repeat 50% 50%;
  top: 0;
  position: fixed;
  z-index: -1;
}
footer
{
  width: 100%;
  height: 300px;
  background: gray;
  bottom: -300px;
  position: fixed;
  z-index: -1;
}
.content
{
  height: 1000px;
  min-height: 1000px;
  background: #fff;
  position: relative;
  z-index: 1;
}
.content h1{
  line-height: 1000px;
  color: #000;
}
.wrapper-parallax {
  margin-top: 100%;
  margin-bottom: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
footer h1
{
  line-height: 485px;
}
header,
footer,
#scroll-animate-main
{
  -webkit-transition-property: all;
     -moz-transition-property: all;
      transition-property: all;

  -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
      transition-duration: 0.4s;

  -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
     -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
      transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

The Javascript

Don’t forget to include the main jquery and here is javascript code.

function scrollFooter(scrollY, heightFooter)
{
    console.log(scrollY);
    console.log(heightFooter);

    if(scrollY >= heightFooter)
    {
        $('footer').css({
            'bottom' : '0px'
        });
    }
    else
    {
        $('footer').css({
            'bottom' : '-' + heightFooter + 'px'
        });
    }
}
$(window).load(function(){
    var windowHeight        = $(window).height(),
        footerHeight        = $('footer').height(),
        heightDocument      = (windowHeight) + ($('.content').height()) + ($('footer').height()) - 20;

    // Definindo o tamanho do elemento pra animar
    $('#scroll-animate, #scroll-animate-main').css({
        'height' :  heightDocument + 'px'
    });

    // Definindo o tamanho dos elementos header e conteúdo
    $('header').css({
        'height' : windowHeight + 'px',
        'line-height' : windowHeight + 'px'
    });

    $('.wrapper-parallax').css({
        'margin-top' : windowHeight + 'px'
    });

    scrollFooter(window.scrollY, footerHeight);

    // ao dar rolagem
    window.onscroll = function(){
        var scroll = window.scrollY;

        $('#scroll-animate-main').css({
            'top' : '-' + scroll + 'px'
        });
        
        $('header').css({
            'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%'
        });

        scrollFooter(scroll, footerHeight);
    }
});

Please check out the demo for working example of Jquery Parallax Effect and download the source code.