Parallax Webpage effect : Using Materialize CSS

Parallax: A viewing effect that a foreground moves at a faster speed than its background. One example is when your riding a bus or car and you’re looking beside the road. Notice that the trees moves faster than the clouds in the background.

I created a HTML Parallax page using Materialize CSS. Materialize CSS is a Web UI Framework composed of CSS and JS files.

See their about page: http://materializecss.com/about.html

The sample HTML is using the Materialize CSS and JS files compilation provided. the CDN method is not used, so the sample can run offline.

Step 1.

Jquery 2.1.4 is required for Materialize CSS. Also download the Jquery 2.1.4 ( as used for Materialize.js ).
Important:  JQuery should be in the first order of import, then Materialize.js comes next, or else it would not work.

Step 2.

Download the Materialize CSS files here:
http://materializecss.com/getting-started.html

Step 3. 

Create the two component files as needed. One for the html where all the Materialize CSS and JS are needed. And the other is the JS file to initialize the Parallax function. The source code is given below.

Here is the HTML Parallax page I created.

Here is the demo from materializecss.com
http://materializecss.com/parallax-demo.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="materialize-v0.97.0/materialize/css/materialize.min.css">
</head>
<body>
<div class="parallax-container">
    <div class="parallax"><img src="../parallax/images/family_mart.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
      <p class="grey-text text-darken-3 lighten-3">Integer vitae justo metus. Etiam ut mauris ut turpis imperdiet hendrerit. Etiam dictum augue neque, eu pulvinar nisi faucibus quis turpis. Suspendisse convallis, felis vitae laoreet rhoncus, magna dui congue nulla. </p>
    </div>
  </div>
<div class="parallax-container">
  <div class="parallax"><img src="../parallax/images/cbp.jpg"></div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="materialize-v0.97.0/materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="parallax_init.js"></script>
</body>
<footer>
  <div class="section white">
    <div class="row container">
     <p class="grey-text text-darken-3 lighten-3"> Cebu CM Solutions
      quis augue ac sem suscipit laoreet in quis ipsum. Curabitur enim sapien
    </p>
   </div>
  </div>
</footer>
<html>

$(document).ready(function(){
      $('.parallax').parallax();
});
Advertisements

3 thoughts on “Parallax Webpage effect : Using Materialize CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s