媒體元件

圖片比較、畫廊、燈箱、影片容器、接觸印樣。媒體元件的重點是版面不跳動——尺寸要先保留。

共 16 個,其中 8 個免費、不需登入即可安裝。

  • 自訂控制列播放器,控件淡出

  • 音訊頻譜視覺化(Web Audio API)

  • 拖曳分割前後對比

  • Zoom Lens免費

    圖片放大鏡

  • Safari/iPhone/Android 裝置外框展示

  • 捲動時畫面自 MacBook 螢幕升起

  • 點擊播放的 hero 影片彈窗

  • 捲動內容邊緣的漸進模糊遮罩

  • 緩慢縮放平移的經典紀錄片式幻燈片,交叉淡接

  • 音訊波形視覺化進度條,可拖曳 seek,已播區高亮

  • 可播放的黑膠唱盤:唱片旋轉、唱針擺入、可拖碟搓盤

  • 縮圖牆點擊放大的全螢幕燈箱:滾輪/捏合縮放與拖曳平移、雙擊放大、滑動與鍵盤切換、計數與說明列、Esc/背景關閉

  • 擬物卡帶外觀的音訊播放器:捲軸隨播放時間旋轉、兩側磁帶量隨進度增減,倒帶動畫、可拖曳進度條與字幕軌。

  • 純 CSS 3D 手機/平板/筆電舞台,五種編排:游標傾斜、捲動環繞、Y 軸翻轉、三台扇形陣列、捲動微距拉回;螢幕是真 DOM。

  • 由中心向外逐格填入的封面格子牆,中央疊放滾動計數與文案,滑過單格推近、鄰格微退。

  • 全幅圖片極快連續翻頁、中央內容固定不動的頻閃效果,播放結束停在最後一張;可由進入視口觸發。