iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 23

Day23 網頁前端-刻意練習(Off Canvas #2)

  • 分享至 

  • xImage
  •  

Day23 六角 Off Canvas #2

https://ithelp.ithome.com.tw/upload/images/20200922/20129161OwNs2KdQE9.jpg
https://ithelp.ithome.com.tw/upload/images/20200922/20129161epr0ip8iwn.png

簡單小語

CodePen看看高手們的OffCanvas的模樣,一看到這個照片的樣板,就決定嘗試做做看了,做完發現自己知識量真的不足,高手的轉場跟我使用單純的加減class不一樣,導致我若要使用toggleClass行為上會有點異常(但不知道要如何修改),於是先求網頁效果正常就使用addClassremoveClass作為主軸撰寫,參考高手作品嘗試模仿,我想也是一種刻意練習,也是一種給予自我挑戰的機會(還是要問人查資料就是),持續努力。

筆記分享

  1. 圖片排版不囉唆,flex排下去,尺寸抓好,換行設好,一切搞定。
  2. 因點擊後出現大圖,所以flex排版上直接使用justify-content:space-around讓出現的圖片與.pic有預留空間。
  3. 手機與電腦所需呈現樣式不同,排版及點擊出現位置需多次微調(就是沒寫好的意思)。
  4. 滑動效果用一貫的transition設定秒數,有些單調卻也實用。
  5. JQuery點擊條件寫的又臭又長,希望未來回來看可以唸唸自己的寫法。
  6. JQuery理當可以找到一個通吃的寫法,但小弟不才只能一個一個寫,導致看上去重複事項過多。
  7. 利用addClassremoveClass去控制出現及消失的效果。
  8. 使用toggle後會造成二次點擊無法收回的狀況(靠六角大大協助完成)。
  9. 設定了固定高度heigth:1000px是為了讓點擊的後出現的圖片不會被overflow: hidden而蓋掉而撰寫。
  10. JQuery的效果控制有待加強,才能讓效能及程式碼乾淨簡潔。

刻意練習

Practice(200816 Day 23)

樣板來源

Accessible off-canvas grid gallery


2020 iT邦幫忙鐵人賽 Day23 網頁前端-刻意練習(Off Canvas #2)


上一篇
Day22 網頁前端-刻意練習(Off Canvas #1)
下一篇
Day24 網頁前端-刻意練習(Off Canvas #3)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言