destiny5420 / Parallax-Interactive-Website

https://jedchang.github.io/Parallax-Interactive-Website/

Parallax Interactive Website

視差滾動互動式網站

Demo

https://jedchang.github.io/Parallax-Interactive-Website/

Introduction

透過 CSS、JavaScript 實作視差滾動互動式網站，透過滑鼠滾動讓多層背景以不同的速度移動，形成立體的**效果，帶來特別的視覺體驗。

首頁動畫共 2 種，每次進入前隨機出現 (Super Engineer、Super Designer)

Use Technology & Library

• jQuery
• SCSS
• GSAP
• ScrollTrigger
• CSS Animations
• Font Awesome
• parallax.js
• typed.js
• royal_preloader.js

Features

• 滑鼠滾動觸發動態效果
• 滑鼠移動位置方向產生視差效果
• 首頁兩種動畫隨機出現
• 判斷裝置只使用直式方向瀏覽畫面
• RWD 版面樣式

Remark

所有圖片為合法授權圖片，後製設計而成。