[切版工具] Clippy 好用的clip-path maker

在網頁設計上常常會遇到不同多邊形的網頁效果，

可以使用clip-path屬性來達到，

如果對於空間概念比較不好或跟我一樣懶的話，

就可以使用Clippy這個工具～

如下圖所示，你可以透過快速的圖形效果，

產生語法，這個範例我們是要拉一個算梯形的效果mask

clip-path: polygon(50% 100%, 100% 75%, 100% 100%, 0 100%, 0 75%);

可以從圖上可以看到有五個點（可自行再刪減）

應用到專案上

專案上我們使用一個白底去產生此梯形效果

但發現會讓底色跑出來～所以最後把尺寸加到就藍底完全蓋掉

/* 讓第三個點超出空間讓底色藍可以完整不會出現 */

    clip-path: polygon(50% 100%, 100% 75%, 100% 101%, 0 100%, 0 75%);

網站：艾爾恩影片製作公司

   

踩雷啦!! jquery滑動到指定區塊後，手機畫面會鎖住無法滑動

最近因新客戶反應手機按滑動選單後，

手機會卡死畫面(無法滾動!!)

jq代碼如下:

//選單跳段落

$('.header a').click(function (evt) {

console.log('click menu link:' + this.hash);

// evt.preventDefault();

if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

jumpSection(this.hash,jumpOffset,500);

}

});

問了chatgpt給點建議xd

檢查 CSS 樣式：有時 CSS 屬性可能會影響滾動條的行為。檢查是否有任何 overflow 相關的樣式設定在包含滾動內容的元素上，這可能會限制滾動。

/* 會造成手動跳動anchor異常 */

/* body.active {

    overflow: hidden;

}

.index {

    overflow: hidden;

} */ 

感動解掉~