前言當網頁內有需要快速移動到的位置,或是需要用到選單提示使用者捲軸移動到的位置時,為了不會影響到效能,找到一個使用 CSS 就能達到的方法,所以筆記記錄下來。
css parallax 視差滾動
前言利用固定圖片 background-attachment: fixed 的方法,讓網頁上下、左右滑動時簡單的產生有前後的效果,或是可以利用各別設定不同的值產生讓每個物件有前後立體變化的錯覺。
background-attachment 是 CSS 的屬性,是設定背景會配合內容或是捲軸作移動,
canvas 圖形拖移
前言canvas 可增加圖形、文字到畫板,但當位置想要移動時就要回到 Javascript 內修改,所以找了一下有沒有可以直接拖移圖形的方式,發現可以用 isDragging 打開拖移功能並取得圖形的設定值,在點擊圖形時就執行變更設定達到移動的目的。
CSS Clip-Path 圖片裁切
CSS Clip-Path 圖片裁切clip-path 是 CSS 屬性可以把圖片遮住、隱藏部分不希望被看到,因為載入到網頁的圖片都會是矩形的,所以用 clip-path 裁切簡單的幾何形或是使用SVG 、 path 路徑畫出裁切外框。