Creating an Animated e-cards using jParallax

Creating an Animated e-cards using jParallax

2 66345
Creating 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:

Live Demo


download in package


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.


<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 style="clear:both"></div>

Step 2. CSS

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


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.


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


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!



Leave a Reply