close

[參考]

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

arrow
arrow
    文章標籤
    HTML CSS CSS 3 Parallax Scrolling Effect Parallax Effect background background-attachment background-size 背景圖 網頁設計 網頁 Web Front-End
    全站熱搜
    創作者介紹
    創作者 jackterrylau 的頭像
    jackterrylau

    儒道哲學的浪漫人生

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

    E-mail轉寄