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

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.

="first-wrap">
="first-div">

="new-update"> >Rohit Kumar>
>My Public NoteBook

> >
>
>  
="second-wrap">
="second-div" id="anchor">

="body-text"> ="line-separator">> Sample parallax with different background images ="line-separator">>

>
>

="third-div">

>
>  
="third-wrap">
="fourth-div">

="body-text"> ="line-separator">> Sample parallax with different background images ="line-separator">>

>
>

="fifth-div">

>
>   ="#" id="back-to-top" title="Back to top">↑>

Rohit Kumar
My Public NoteBook

Sample parallax with different background images

Sample parallax with different background images

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.

/* Hides the horizontal overflow */
body {
  overflow-x: hidden;
}
/* Resize in Mobile View */
@media (min-width: 0) and (max-width: 767px) {
  p,
  .body-text {
    font-size: 10px !important;
  }
  .down-arrow {
    font-size: 20px !important;
  }
}
/* Resize in Tablet View */
@media (min-width: 768px) and (max-width: 991px) {
  p,
  .body-text {
    font-size: 15px !important;
  }
  .down-arrow {
    font-size: 30px !important;
  }
}
/* Line Separators CSS */
.line-separator {
  display: block;
  width: 50%;
  height: 1px;
  text-align: center;
  margin: 20px auto;
  border-bottom: 1px solid grey;
}
/* First Wrap Background */
.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 Background */
.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 Background */
.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 */
.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;
      }
    }
  });
});
 
/*
  Back to top scroll button.
*/
if ($('#back-to-top').length) {
  var scrollTrigger = 100, // px
    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top