Posted by : Hank Chan 06 July 2017

本文大部分摘自於  <Webnots>

Parallax 自 2014 年起開始風行於國外各網站首頁。它是一個讓你在滑動網頁時,可以將背景圖片定格在固定位置的功能。使用 Parallax 功能可以增加你的網站層次 (layer),讓你的網站設計看起來更豐富,如下圖。

Parallax 功能 。 範例頁面
Weebly 在 2016 年推出的 Weebly 4 也新增了 Parallax 功能。本篇文章將會教你要如何在 Weebly 上使用 Parallax 功能。Weebly 2016 年後推出的主題 (Theme) 都能夠讓你使用 section 功能,而透過 section 你就可以使用 Parallax。
p.s. 如果你使用的 Weebly 主題是在 2016 年以前推出的,可能就沒有辦法使用 section 功能,也就沒有辦法使用 Parallax。

有兩種方法可以在 Weebly 上使用 Parallax:

1. 在有使用 header 的頁面上,點擊 header 兩下來設定 header 的背景,接著會跳出兩個選項,選擇 Edit Background,然後選擇 Image,如下圖 1。


圖 1

接著選擇 Scrolling Effect >> Parallax,如下圖 2。

圖 2
更新後,你將發現網頁的 header 就有 Parallax 的功能了。

2. 其實在 header 以外的地方也可以使用 Parallax。在 Drag and Drop 的 section 套件也可以讓你section 上的 background image 做 Parallax 的功能,如下圖 1 和 圖 2。 

圖 1
圖 2。 Edit Background >> Image >> Add Image >> 選 Image >> Select

當然在 section 上添加 Parallax 的過程中,你會發現 section 其實有非常多的功能。我們在另外一篇文章會討論更多關於 Weebly 新推出的 section 功能


- Copyright © Hank Chan 的所思所想 - Skyblue - Powered by Blogger -