[參考]

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日星期三

文章標籤
創作者介紹
創作者 jackterrylau 的頭像
jackterrylau

儒道哲學的浪漫人生

jackterrylau 發表在 痞客邦 留言(0) 人氣()