jparallax_使用jParallax创建动画电子贺卡

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.

带jParallax的电子贺卡。 在浏览网页时，我遇到了一个非常有趣的插件– jParallax，突然想起了国际妇女节，并决定今天对我们的妇女有好处。 我们今天的文章将介绍如何使用自己喜欢的库jQuery创建漂亮的电子贺卡。

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:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code.

这是我们的主页代码。

index.html (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>

<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>

步骤2. CSS (Step 2. CSS)

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

这是使用CSS样式。 最重要的是#my_ecard的属性。 它使我们所有的图层都位于自己的边界内。

css / main.css (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;}

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;}

步骤3. JS (Step 3. JS)

Here are necessary JS file to our project.

这是我们项目所需的JS文件。

js / jquery.min.js，jquery.jparallax.js (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.

这是我们将使用的2个JS库。 它不包含在我们的帖子中，但始终以软件包形式提供。

For initialization of our jParallax need just call its constructor.

要初始化我们的jParallax，只需调用其构造函数即可。

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

<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.

我决定在今天的示例中不使用任何自定义参数。 但是您可以在这里阅读更多有关其参数的信息 。

步骤4.图片 (Step 4. Images)

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

另外，我们需要几个图像进行演示(这些图像在不同层中)：

现场演示

结论 (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!

今天，我告诉您3月8日如何钓鱼：)但是，我希望本课程对您和其他应用程序有帮助。 祝好运！

翻译自: https://www.script-tutorials.com/creating-ecards-using-jparallax/

jparallax