css 灰度

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

我們的灰度到彩色效果

在不做進一步介紹的情況下，讓我們檢查一下要構(gòu)建的內(nèi)容：

瀏覽器支持

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

1.從HTML標記開始

我們將從四個部分開始：

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

在每個部分的內(nèi)部，我們將放置標題和全屏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>

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

2.定義樣式

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

實用程序類

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

.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; }

灰度圖像

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

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

彩色圖像

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

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

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

快速clip-path屬性說明

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

在我們的示例中，我們將使用inset（）函數(shù)來構(gòu)建所需的矩形。

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

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

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

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

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

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

.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.滾動動畫

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

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

當每個目標元素的至少50％進入視口時，它將收到is-animated類。 否則，它將失去此類并變?yōu)殡[藏。

無需贅述，這是實現(xiàn)此功能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的工作方式以及滾動時返回的內(nèi)容，請在瀏覽器控制臺中打印entry 。

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

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

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

和相關(guān)CSS類：

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

結(jié)論

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

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

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

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

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

css 灰度

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。