CSS Parallax Scrolling Effect With Smooth Scrolling and Back To Top Button

by

Now in modern website template you might have seen website background image is moved at a different speed than the foreground content while scrolling that is called Parallax Scrolling. You can use CSS Parallax Scrolling Effect in your website to make it more modern and eye catching. In this post I am going to share code snippet written by Nikko Aboy. to create simple pure css based parallax scrolling effect for your website.




Creating CSS Parallax Scrolling Effect

HTML

Creating first second third and so on.. div container with different different background effect and content element.

<div class="first-wrap">
  <div class="first-div">
    <p class="new-update">
     <b>Rohit Kumar</b> <br/>My Public NoteBook
    </p>
    <div class="first-inner-div">
      <p>Start Scrolling</p>
      <a href="#anchor">
        <span class="glyphicon glyphicon-circle-arrow-down down-arrow"></span>
      </a>      
    </div>
  </div>
</div>
 
<div class="second-wrap">
  <div class="second-div" id="anchor">
    <p class="body-text">
      <span class="line-separator"></span> Sample parallax with different background images
      <span class="line-separator"></span>
    </p>
  </div>
  <div class="third-div">
  </div>
</div>
 
<div class="third-wrap">
  <div class="fourth-div">
    <p class="body-text">
      <span class="line-separator"></span> Sample parallax with different background images
      <span class="line-separator"></span>
    </p>
  </div>
  <div class="fifth-div">
  </div>
</div>
 
<a href="#" id="back-to-top" title="Back to top">&uarr;</a>



CSS

Now add background image to the each container with a specific height. Then use the background-size: cover to create the actual parallax effect. The other background properties are used to center and scale the image perfectly.


body {
  overflow-x: hidden;
}

@media (min-width: 0) and (max-width: 767px) {
  p,
  .body-text {
    font-size: 10px !important;
  }
  .down-arrow {
    font-size: 20px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  p,
  .body-text {
    font-size: 15px !important;
  }
  .down-arrow {
    font-size: 30px !important;
  }
}

.line-separator {
  display: block;
  width: 50%;
  height: 1px;
  text-align: center;
  margin: 20px auto;
  border-bottom: 1px solid grey;
}

.first-wrap {
  height: 100%;
  width: 100vw;
  background: #ffffff url("https://images.unsplash.com/photo-1445251836269-d158eaa028a6?fit=crop&fm=jpg&h=950&q=80&w=1920") no-repeat fixed;
  background-size: cover;
  background-position: 50% 50%;
}

.second-wrap {
  height: 100%;
  width: 100vw;
  background: #ffffff url("https://images.unsplash.com/photo-1444090542259-0af8fa96557e?fit=crop&fm=jpg&h=950&q=80&w=1920") no-repeat fixed;
  background-size: cover;
  background-position: 50% 50%;
}

.third-wrap {
  height: 100%;
  width: 100vw;
  background: #ffffff url("https://images.unsplash.com/photo-1443827423664-eac70d49dd0d?fit=crop&fm=jpg&h=950&q=80&w=1920") no-repeat fixed;
  background-size: cover;
  background-position: 50% 50%;
}
.first-div {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: transparent;
}
.first-div .first-inner-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: 20px;
}
.first-div .first-inner-div .down-arrow {
  font-size: 40px;
  color: #fff;
}
.first-div .first-inner-div p {
  padding: 20px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.3);
}
.second-div {
  display: table;
  height: 50vh;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.3);
}
.second-div p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}
.third-div {
  display: table;
  height: 50vh;
  width: 100vw;
  background-color: transparent;
}
.fourth-div {
  display: table;
  height: 50vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
}
.fourth-div p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}
.fifth-div {
  display: table;
  height: 50vh;
  width: 100vw;
  background-color: transparent;
}
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 9999;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  background-color: #ffffff;
  color: #000;
  cursor: pointer;
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.2s ease-out;
  opacity: 0;
}
#back-to-top:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
}
#back-to-top.show {
  opacity: 1;
}

.new-update {
  padding: 20px;
  text-align: center;
}



JS

Now add some utility on your Parallax template like smooth scrolling and back to top button to make it more awesome.

$(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
        }, 700);
        return false;
      }
    }
  });
});
 

if ($('#back-to-top').length) {
  var scrollTrigger = 100, 
    backToTop = function() {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > scrollTrigger) {
        $('#back-to-top').addClass('show');
      } else {
        $('#back-to-top').removeClass('show');
      }
    };
  backToTop();
  $(window).on('scroll', function() {
    backToTop();
  });
  $('#back-to-top').on('click', function(e) {
    e.preventDefault();
    $('html,body').animate({
      scrollTop: 0
    }, 700);
  });
}

See live demos and download source code.

DEMO | DOWNLOAD

Published by Rohit