iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-SideProject30

讓演算法起舞:前端特效應用的探索之旅 系列

我又回來啦!繼上次的網頁遊戲後,這次我們將把眼光放遠,不要只做一個,來做好多個互動特效!這兩年想不開去當了職業軍人,但還是放不下,在砲兵學校受訓時,放假還是泡圖書館借了電腦,研究了幾個主題,我覺得每個都很有趣!

架構:
使用 React 打造單頁式作品集網站,其實 Vue 我也很喜歡,各有優點!

作品展示:
在每個小作品中,除了展示技術細節,還結合實際成果,比如演算法視覺化:讓快速排序在屏幕上跳起舞來!還有音訊分析、粒子系統和模擬物理等,應用於前端開發。

回顧:
最後回頭優化,確保每一個作品能無縫整合,我還覺得輪播式呈現太無聊,或許能...?最後來看看創意能到哪邊吧!

鐵人鍊成 | 共 35 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文 團隊鐵齒不信寫不完
DAY 1

嘿!讓我們開始規劃舞步

大家好~ 我是熱愛用 Canvas 創作的 Jerry!在這個系列中,我將帶你探索數學、物理和演算法的世界,透過 Canvas 來實現各種視覺效果。如果你對前端...

2024-09-14 ‧ 由 jerrythepotato 分享
DAY 2

A1 熱身的第一步:用React和Vue實做RWD吧!

以最簡為原則 本文將介紹如何以簡單的設計實現響應式布局(RWD),兼顧桌面與移動端需求,並比較 React 和 Vue 的不同實作方式。 "左圖展...

2024-09-15 ‧ 由 jerrythepotato 分享
DAY 3

A2 腳步踩穩囉:啟動工廠模式下的 Canvas Transition 動畫

動畫的基礎 讓我們將繼續完善 playground 元件,這次的目標是實現滑鼠和觸控事件的座標監聽,來實現對 canvas 的操控,並且,搭配 ease out...

2024-09-16 ‧ 由 jerrythepotato 分享
DAY 4

A3 蹲馬步:掌握模板動態生成的導航欄元件

回來做元件! 今天接著介紹如何利用模板動態生成DOM,並比較 React 和 Vue 的不同實作方式。 Functional component vs Com...

2024-09-17 ‧ 由 jerrythepotato 分享
DAY 5

A4 面板元件-靈活的收納按鈕設計

前幾天,我們從Playground的佈局下手,已經保證一個自適應的窗口來容納canvas,並獲得游標的位置,現在,讓我們延續昨天的基礎,設計更靈活的菜單收納方法...

2024-09-18 ‧ 由 jerrythepotato 分享
DAY 6

A5 面板元件-一鍵搞定!錄影按鈕元件

為什麼要錄影 在互動性高的應用程式中,讓使用者可以自由紀錄畫面,是必備的元素之一。這不僅提供了用戶便捷的錄影功能,也讓開發者可以輕鬆製作展示影片。無論是創建教學...

2024-09-19 ‧ 由 jerrythepotato 分享
DAY 7

A6 React 和 Vue 實作表格元件:排序、搜尋與分頁功能詳解

用途 在前端開發中,表格元件(Table)通常是用來展示大量資料的最佳方式。特別是當資料需要被排序、搜尋或分頁顯示時,構建一個高效且可擴展的表格元件變得尤為重要...

2024-09-20 ‧ 由 jerrythepotato 分享
DAY 8

A7 React 和 Vue 實作表格元件:排序、搜尋、資料狀態管理

前言 此篇接續上篇:A6 React 和 Vue 實作表格元件:排序、搜尋與分頁功能詳解 靜態資料 columns const columns = [...

2024-09-21 ‧ 由 jerrythepotato 分享
DAY 9

B1 玩轉 IntersectionObserver:打造你的專屬動畫管理器!

動畫管理員使用指南 簡介 在現代網頁開發中,動態效果為用戶界面增添了生動的互動性。本篇文章將介紹一個功能簡單的動畫管理員,它能夠簡化 Canvas 動畫的管理和...

2024-09-22 ‧ 由 jerrythepotato 分享
DAY 10

B2 玩轉 IntersectionObserver:揭秘動畫管理員的設計與實作細節!

1.基本結構 動畫管理員的核心是 managerMaker 函數,負責建立物件並初始化必要的屬性和方法。它包含了管理動畫請求的基本邏輯和資料結構。以下是管理員的...

2024-09-23 ‧ 由 jerrythepotato 分享