[参考]

7 Cool HTML Effects That Anyone Can Add to Their Website

[摘要]

　　在 7 Cool HTML Effects That Anyone Can Add to Their Website 一文中提到了七种酷炫的网页效果，第一个要介绍的是parallax scrolling effect .

　　Parallax Scrolling Effect 是一种将背景图固定在另一内容(如：文字)DIV之后，然后移动卷轴内容DIV便会上下滚动并覆盖掉背景图以达成重点醒目提示User内容效果的CSS应用，在现今许多网中首页常可见它的概念实现。

　　而在这边我们仅介绍用CSS 3 便实现Parallax Scrolling Effect的作法示范该效果。

[概念]

  1. Parallax 背景 DIV + 内容 DIV
  2. 概念图

[CSS]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<style>

.parallax {

    /* The image used */

    background-image: url("parallax.jpg");

 

    /* Set a specific height */

    min-height: 500px;

 

    /* Create the parallax scrolling effect */

    background-attachment: fixed; /* 背景固定:卷轴移动时仅会移动div,但背景图不动。*/

    background-position: center; 

    background-repeat: no-repeat;

    background-size: cover;/*CSS3 background-size 属性的功能是用来设定背景图片（background-image）的大小

                            *cover: 使用于背景图片小于容器时，将背景图片的大小放大至容器的大小并填满*/

}

</style>

 

  1. background-attachment : fix

CSS 3 的新 background 属性，用来指定固定背景的方式，此处设为fix，表示卷轴移动时背景将不改变。

  1. background-size : cover

CSS 3 的新 background 属性，设定背景图片（background-image）的大小，此处设定为cover，表示将背景图片的大小放大至容器的大小并填满。

 

[HTML]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 
<body>

<p>用卷轴滚动这个页面可以看见 parallax scrolling effect.</p>

<div class="parallax"></div>

<div style="height:1000px;background-color:yellowgreen;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
在 作为背景的 parallax div 后 放上文字Div 将会随卷轴转动在背景图前上下移动并覆盖背景图，此即 parallax scorlling effect.
</div>

</body>

 

[结果]

 

一开始时，内容DIV被固定在parallax div的下方，并且隐藏未显现部份：

接著把卷轴往下滚动，便可看到内容DIV 把Parallax DIV 给吞没了，这就是Parallax Scrolling Effect 效果。

 

2018年6月27日星期三

相关文章