星期五, 12月 29, 2023

[切版工具] 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%);




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

   





星期一, 12月 18, 2023

踩雷啦!! 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;

} */ 

感動解掉~

其他你感興趣的文章

Related Posts with Thumbnails