簡訊設計
2021.07.29
夥伴聊聊

如看展般的網站水平瀏覽體驗—簡訊設計官網程式開發分享

如看展般的網站水平瀏覽體驗—簡訊設計官網程式開發分享
Hi,我是簡訊設計的前端工程師 Glenn,這次來介紹簡訊設計的網站開發,分享在本專案開發實作水平體驗的心得。
本次官網改版,希望能夠讓使用者進入首頁可以看到豐富的公司資訊,為了讓首頁體驗有如看展般的體驗,因此這次設計師提出水平體驗的網站設計。

可從這裏前往網站:https://simpleinfo.cc/

在開始動工之前,要先來拆分幾個思路:
1. 如何將垂直的網頁操作變成水平?
2. 如何讓網頁做出水平的排版?

解決這兩個問題,基本上就能夠做出水平體驗的網站瀏覽。

一、如何將垂直的網頁操作變成水平?

應用捲軸事件與 transform: translateX()
目標是將網頁捲動變為水平,需要監聽到原生的滑鼠滾輪事件,可將程式拆分出呈現水平體驗的窗口「viewer」與負責捲動事件的捲軸「scroller」來理解,scroller 負責提供瀏覽器的捲軸長度與事件監聽,viewer 負責處理相對應的水平移動 translateX 的進度。

因為要讓整頁都是水平瀏覽,所以直接監聽 windows 的捲軸即可。
window.addEventListener('scroll', handleWindowScroll);
3.png
 
<div class="horizontal-page">
    <div class="viewer"> content here... </div>
    <div class="scroller"></div>
</div>

捲軸要多長?
所有水平瀏覽的內容放都在窗口 viewer 中,因此只要計算 view 內的寬度及可換算出捲軸的長度是多少。

horizontal-2.png

透過這種方式,捲軸 scroller 只要捲動 1px,再轉換成窗口 viewer 也水平移動 1px,就能夠做出水平移動的效果。

// CSS
.viewer {
  position: absolute;
  left: 0;
  top: 0;
  style="max-width: 100%; height: auto" height: 100vh; 
}
// Javascript
function handleWatchScroller() {
  const offsetY = window.pageYOffset;
  const viewer = document.querySelector('.viewer');
  viewer.style.transform = 'translateX(' + offsetY + 'px);
}

 

二、如何讓網頁做出水平的排版?

CSS 能夠實作出水平排版的方式蠻多元,我選擇用 flex 的方式來做:
display: flex;
flew-direction: row;

準確的寬度計算
前面提到,需要靠 viewer 的寬度來決定捲軸 scroller 的長度,這會面臨到一個問題,當 viewer 內的圖片尚未載入時就去取得 viewer 寬度,會遺漏掉這些圖片所佔的寬度。因此我們需要做一些非同步措施,當圖片載入完成後,再一次重新計算出 scroller 的長度。
 
const images = viewer.querySelectorAll('img');
const counter = 0;
images.onload = function() {
  counter += 1;
  if (counter === images.length) handleResetScrollerDistanece();
}

三、成果

horizontal-3.gif

延伸開發:作一個水平的捲軸
為了讓體驗更一致,可以添加一個水平的卷軸,讓使用者在操作時能夠更直覺的觀察網頁瀏覽進度,也能夠讓不習慣使用滑鼠滾輪的使用者有可以操作的地方。

因為整個程式中掌握了捲軸 scroller 的長度、窗口 viewer 的寬度,可以依此算出目前卷軸的進度,進而自己造出客製化的捲軸。
horizontal-4.gif
 
題外話,在開發這類突破原生瀏覽器體驗的功能時,會更需要注意在不同裝置上的除錯。
例如在水平排版會遇到瀏覽器高度過低,造成內容被擠壓而跑版,可能會需要多寫一些響應式的樣式,或是減少頁面的內容量來解決這類問題。
大部分的開發者都已經習慣了符合原生裝置體驗的開發,在這部分就會容易受到忽略。

以上是本次水平體驗網站的簡單心得分享,感謝你的閱讀🙏
Share to: Facebook / Line
公視台語台Youtube頻道包裝—代誌偌大條