Creating an Animated e-cards using jParallax

E-cards with jParallax. During browsing web I came across a very interesting plugin – jParallax, and suddenly remembered that soon the international women’s day, and decided that today will do something nice for our women. Our today’s article will be about how to create a nice e-card using our favorite library jQuery with own hands.

What is nice – that we will able to put different images into different layers. And, due mouse moving – our layers will moving too. Just check today`s sample, nice, isn`t it?

Here are samples and downloadable package:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/jquery.min.js, jquery.jparallax.js
Step 4. Images
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML.

This is our main page code.

index.html

<script src="js/jquery.min.js"></script> 
  
<script src="js/jquery.jparallax.js"></script> 
  
<link rel="stylesheet" href="css/main.css" type="text/css" /> 
  
<div class="examples"> 
  
    <h2>Using jParallax to create own interactive e-card</h2> 
  
    <div id="my_ecard"> 
  
        <img src="images/bg.jpg" alt="" style="width:1600px;height:800px;"/> 
  
        <img src="images/layer1.png" alt="" style="width:1400px;height:700px;"/> 
  
        <img src="images/layer2.png" alt="" style="width:1400px;height:700px;"/> 
  
        <img src="images/layer3.png" alt="" style="width:1200px;height:600px;"/> 
  
    </div> 
  
    <div style="clear:both"></div> 
  
</div> 
  
<script> 
  
jQuery(document).ready(function(){ 
  
  jQuery('#my_ecard').jparallax(); 
  
}); 
  
</script>

Step 2. CSS

Here are used CSS styles. Most important is properties of #my_ecard. It keep all our layers in own boundary.

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} 
  
.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em} 
  
#my_ecard {position:relative; overflow:hidden; width:800px; height:600px;}

Step 3. JS

Here are necessary JS file to our project.

js/jquery.min.js, jquery.jparallax.js

This is 2 JS libraries which we will using. Its not included in our post, but always available in package.

For initialization of our jParallax need just call its constructor.

<script> 
  
jQuery(document).ready(function(){ 
  
  jQuery('#my_ecard').jparallax(); 
  
}); 
  
</script>

I decided not use any custom parameters in today`s sample. But you can read more about its params right here.

Step 4. Images

Also we need several images for our demo (these images of different layers):

Live Demo

Conclusion

Today, I told you how can you are fishing your favorite on 8 March:) But I hope that this lesson will help you and in other applications. Good luck!