Fixed Background Image Scrolling Content

Fixed Background Image Scrolling Content

Fixed Background Image Scrolling Content: A few months back, We have created Parallax Scrolling Effect by using purely Jquery. Now it’s time to create similar effect with Javascript.

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. It can be applied to as many layers as you like.

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

Ever wondered how to achieve parallax consequences on a scroll? I will display you how simple it could 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="http://localhost/codeconveylive/Tutorials/ResponsiveSlideOutMenu/"><span>Previous Demo</span></a></li>
            <li><a href="http://localhost/codeconveylive/?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.

Code ExamplesYou May Also Like