Parallax Effect

In this example below you will see how to do a Parallax Effect with some HTML / CSS and Javascript

An easy way to add a parallax effect to any LabPages layout! This provides you with an example background, featured image, featured title, and sub-headline to use as a model.

Thumbnail
This awesome code was written by 1wdtv, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1wdtv ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Parallax Effect</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section id="lab_parallax">
  <div class="lab_parallax_bg"></div>
  <div class="lab_parallax_content">
    <div class="lab_parallax_front"></div>
    <div class="lab_parallax_headline">We build websites that are fast, </br>secure, and easy to manage!!!</div>
  </div>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1wdtv/parallax-effect-BoVYgN */
/* Parallax */

#lab_parallax {
  display:inline-block;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  // padding:285px 0;
  min-height: 550px;
}

#lab_parallax #lab_parallax_wrap {
  text-align: center;
  margin: 0 auto;
  color: #FFF;
  display: table-cell;
  vertical-align: middle;
}

#lab_parallax .lab_parallax_bg {
  background-image: url(http://www.nueranet.com/wp-content/uploads/2015/09/frontpage_ar_nueranet_darkblue.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#lab_parallax .lab_parallax_content {
  max-width: 800px;
  padding: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  margin-bottom: 6%;
}

#lab_parallax .lab_parallax_front {
  background-image: url('http://www.nueranet.com/wp-content/uploads/2015/09/logo_nue_vertical_328x425_lgblue.png');
  height: 409px;
  width: 330px;
  margin: 0 auto;
}

#lab_parallax .lab_parallax_headline {
  font-size: 24pt;
  font-family: arial, helvetica, sans-serif;
  font-weight: 800;
  display: block;
  margin: 0 auto;
  line-height: 1em;
  color: #FFFFFF;
}

/*Downloaded from https://www.codeseek.co/1wdtv/parallax-effect-BoVYgN */
(function($) {
  $(document).ready(function() {
    //$("#lab_starter_module").height($(window).height());
    $('#lab_parallax').css('min-height', ($(window).height()));
    //$("#text-vcenter").height($(window).height());
    $('#text-vcenter').css('min-height', ($(window).height()));
    $(window).resize(function() {
      //$("#lab_starter_module").height($(window).height());
      $('#lab_parallax').css('min-height', ($(window).height()));
      //$("#text-vcenter").height($(window).height());
      $('#text-vcenter').css('min-height', ($(window).height()));
    });
  });
})(jQuery)

Comments