iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 28

DAY28-React NFT網站成果展示

dinologo.png

前言:

到了倒數第三天了,一開始目標要完成的NFT網站開發也到一個段落啦~今天阿森要來展示一下綜合前幾天的內容(還有我自己的一點改良),最後的成果會是如何!

如果大家對某些頁面特別有興趣也可以回到前面幾天參考看看!

HeroSection:

作為最開始,要營造良好第一印象的頁面,HeroSection阿森和夥伴們也是下足了苦心,除了有開場的動畫外,我做了scroll lock的動作,讓這個影片在播放的時候瀏覽者沒辦法移動頁面,這也是為了讓影片結尾和我們的背景gif做一個更好的重疊。

另外如果瀏覽者想跳過這個影片,也可以點擊右下角的skip,就可以直接瀏覽頁面了,整體效果我認為還不錯!

截圖 2021-10-10 下午9.19.27.png

NavBar:

導覽的部分其實就跟前面的差不多,只是我在最重要的mint這個按鈕上加了一點特效,讓大家可以更好注意到,說不定可以在淺意識裡增加一點購買的意願(?

截圖 2021-10-10 下午9.15.57.png

Comic頁面:

截圖 2021-10-10 下午9.20.21.png

Comic頁面阿森做了一個可以翻頁的Gallery來播放我們的主題漫畫,我們的夥伴真的很厲害呢!

Intro頁面:

Intro的部分我們分為兩頁,第一頁用來介紹我們的背景設定,第二頁則是說明一些作為我們NFT持有者所能擁有的好處。

這裡比較困難的地方還是在於如果做成RWD,也就是響應式網站,大家有興趣的話也可以看之前的

DAY23-一般頁面設計

截圖 2021-10-10 下午9.24.33.png

截圖 2021-10-10 下午9.24.50.png

Roadmap:

Roadmap頁面的設計作法跟DAY25-問答頁面設計其實大同小異,主要都是利用aos來製造滾動的效果,我認為這樣也比較有進程的感覺。

截圖 2021-10-10 下午9.26.51.png

MINT頁面:

這裡介紹一下Mint就是鑄造的意思,也就是購買NFT的地方。

這個頁面主要有幾個要求,第一個是顯示Coming Soon,代表還沒有要開始Mint。

再來是到一定的進程時,要能可以倒數。

最後是和matamask做連接,讓想買的人可以直接Mint,這部分的話可以參考我們團隊另外一位成員的文章:

ALu-NFT 網站與 MetaMask 連動的 Owners 登入系統

那這裡是Coming Soon的樣子:

截圖 2021-10-10 下午9.29.45.png

開始倒數計時:

截圖 2021-10-10 下午9.30.47.png

開放Mint:

截圖 2021-10-10 下午9.31.52.png

可以透過按鈕調整數量,或是直接輸入也可以。

問答頁面:

這部分可以看前面的DAY25-問答頁面設計

Team:

這部分阿森主要是照DAY24-資訊卡頁面設計去完成的,最後加了一點特效做裝飾,成果是這樣:

截圖 2021-10-10 下午9.33.46.png

Community:

這部分主要是跟我們的後端連結有關,會和Mongodb atlas做連結,有興趣的話可以看這篇:

DAY18-Mongodb atlas realm

截圖 2021-10-10 下午9.42.01.png

小結:

到今天為止我們的整個計畫也算是到一個段落了,雖然沒有做出超美超多特效的網站,但阿森覺得這樣也不錯了!簡單明瞭,讓大家專注在我們的故事主題上。

有興趣的人可以直接造訪:

https://thedinomension.com

相信實際造訪的體驗會更好的,那今天就先這樣,我們明天見!


上一篇
DAY27-Firebase Domain設定
下一篇
DAY29-總結一下吧
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言