css 灰度

在這個新教程中，我們將從一些灰度圖像開始，并學習如何在滾動條上平滑地顯示其彩色變體。 為了達到理想的效果，我們將利用CSS Grid， clip-path屬性和Intersection Observer API等現代的前端功能。

我們的灰度到彩色效果

在不做進一步介紹的情況下，讓我們檢查一下要構建的內容：

瀏覽器支持

盡管此效果具有不錯的瀏覽器支持，但請注意，它在某些瀏覽器（如早期版本的Microsoft Edge）中將無法使用。 對于此示例，我將集中精力于效果背后的技術，而不會為其他瀏覽器提供后備。

1.從HTML標記開始

我們將從四個部分開始：

<section class="section">...</section> <section class="section">...</section> <section class="section">...</section> <section class="section">...</section>

在每個部分的內部，我們將放置標題和全屏div包裝器。 包裝器將包含兩個空div 。 這兩個元素將共享相同的背景圖像。 第一個將顯示其灰度版本，而最后一個將顯示其原始彩色版本：

<h2>...</h2> <div class="vh-100 img-wrapper"><div class="grayscale cover" style="background-image: url(IMG_SRC);"></div><div class="colored cover" style="background-image: url(IMG_SRC);"></div> </div>

彩色圖像將以從左到右的幻燈片動畫形式出現。 幸運的是，我們可以通過data-animation屬性自定義動畫的方向。 它所需要的是增加該屬性對應的.colored元件與值to-left ， to-top ，或to-bottom 。

2.定義樣式

準備好標記后，我們將繼續主要樣式。

實用程序類

對于此演示，我們將首先定義兩個實用程序類，將它們附加到目標元素：

.cover {background-size: cover;background-position: center;background-repeat: no-repeat; }.vh-100 {height: 100vh; }

堆疊元素

默認情況下，保存圖像的div將堆疊在另一個之上。 只有帶有灰度圖像的div是可見的。

以下是必需的樣式：

/*CUSTOM VARIABLES HERE*/.img-wrapper {display: grid; }.img-wrapper div {grid-column: 1;grid-row: 1; }

灰度圖像

要創建灰度圖像，我們將使用grayscale() CSS函數并將1或100%的值作為參數傳遞。 另外，我們將為所有灰度圖像提供背景色作為后備，直到加載這些圖像中的每一個：

/*CUSTOM VARIABLES HERE*/.grayscale {filter: grayscale(1);background-color: var(--gray); }

彩色圖像

如上所述，彩色圖像將首先被隱藏。 一旦它們的一部分在頁面上可見，它們就會通過幻燈片動畫變得可見。

在此處查看最終效果的GIF版本 。

為了在視覺上隱藏它們，我們將不使用任何傳統CSS方式，例如display: none ， opacity: 0和transform: translateX(-100%) 。 實際上，我們將嘗試使用clip-path ，這是一個現代CSS屬性，可以幫助我們構建有趣的效果。

快速clip-path屬性說明

clip-path屬性使我們能夠切除元素的一部分并僅顯示元素的特定部分。 可見區域可以用不同的形狀（圓形，橢圓形，多邊形，矩形）表示。

在我們的示例中，我們將使用inset（）函數來構建所需的矩形。

以最簡單的形式，它可以沿順時針方向接收多達四個值，這些值指定生成所選區域的側面偏移量（頂部，右側，底部，左側）。 為簡單起見，我們可以使用margin速記，它使我們能夠將所有四個inset設置為一個，兩個，三個或四個值。 （可選）我們可以向此函數傳遞一些額外的值，以指定矩形的圓度。

因此，為了練習，讓我們假設下面的Pixel圖片為200px x 300px。

如果我們給它clip-path: inset(10px 20px 30px 40px) ，則結果圖像將為140px x 260px：

更進一步，具有clip-path: inset(0)的元素意味著將出現整個元素。

另一方面，將四個值之一設置為100％的元素表示將被擠壓和隱藏。 請記住，該值在函數中的順序很重要，并且可能會產生不同的動畫。

回到我們的示例，這是我們最初隱藏彩色圖像的方式：

.colored {clip-path: inset(0 100% 0 0);transition: all 1.5s ease-in-out; }.colored[data-animation="to-left"] {clip-path: inset(0 0 0 100%); }.colored[data-animation="to-top"] {clip-path: inset(0 0 100% 0); }.colored[data-animation="to-bottom"] {clip-path: inset(100% 0 0 0); }

3.滾動動畫

彩色圖像將被激活并滾動滾動。

為了完成此任務，我們將利用Intersection Observer API。

當每個目標元素的至少50％進入視口時，它將收到is-animated類。 否則，它將失去此類并變為隱藏。

無需贅述，這是實現此功能JavaScript代碼：

const targets = document.querySelectorAll(".colored"); const isAnimated = "is-animated"; const threshold = 0.5;function callback(entries, observer) {entries.forEach((entry) => {const elem = entry.target;if (entry.intersectionRatio >= threshold) {elem.classList.add(isAnimated);//observer.unobserve(elem);} else {elem.classList.remove(isAnimated);}}); }const observer = new IntersectionObserver(callback, { threshold }); for (const target of targets) {observer.observe(target); }

注意1：要查看此API的工作方式以及滾動時返回的內容，請在瀏覽器控制臺中打印entry 。

注意2：最初，我嘗試了isIntersecting一個而不是intersectionRatio isIntersecting屬性。 但是，我注意到它在Firefox中存在問題。

提示：如果您希望動畫只運行一次，則必須調用unobserve()方法，如下所示：

...if (entry.isIntersecting) {elem.classList.add(isAnimated);observer.unobserve(elem); } else {elem.classList.remove(isAnimated); }...

和相關CSS類：

.colored.is-animated {clip-path: inset(0); }

結論

就是這樣，伙計們！ 今天，我們通過利用令人興奮CSS和JavaScript新功能來構建有趣的滾動效果。

顯然，與任何現代工具一樣，此效果在瀏覽器支持方面也有一些限制，特別是如果您針對較舊的瀏覽器。 例如，作為后備，如果瀏覽器不支持 clip-path屬性，則可以默認顯示彩色圖像。

不過，希望該練習可以幫助您學習新知識并給您一些創意。 這提醒我們建立了什么：

與往常一樣，非常感謝您的閱讀！

翻譯自: https://webdesign.tutsplus.com/tutorials/grayscale-to-color-effect-on-scroll--cms-35094

css 灰度

總結

以上是生活随笔為你收集整理的css 灰度_如何在滚动上建立灰度到色彩效果（CSS和JavaScript）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。