前言

大家應(yīng)該都知道響應(yīng)式吧，像什么響應(yīng)式布局等等，這都是我們?cè)陂_(kāi)發(fā)中經(jīng)常能遇到的。在年前結(jié)束的一個(gè)公司項(xiàng)目中，涉及到了相關(guān)響應(yīng)式的應(yīng)用，然后在查找響應(yīng)式的資料的時(shí)候，發(fā)現(xiàn)了剪切蒙版視差滾動(dòng)這個(gè)內(nèi)容，因此便借著這個(gè)機(jī)會(huì)，來(lái)好好學(xué)習(xí)一下，便有了今天這個(gè)響應(yīng)式剪貼蒙版視差滾動(dòng)效果。

剪切蒙版視差

這里簡(jiǎn)單介紹一下剪切蒙版視差。

它是一種在網(wǎng)頁(yè)設(shè)計(jì)中常用的視覺(jué)效果技術(shù)。在實(shí)現(xiàn)剪切蒙版視差效果時(shí)，通常會(huì)將不同層級(jí)的元素分為多個(gè)背景層和一個(gè)前景層。背景層通常包括背景圖片、背景顏色等，而前景層則包括文字、按鈕等內(nèi)容。通過(guò)設(shè)置不同層級(jí)元素的滾動(dòng)速度，使得前景層在滾動(dòng)時(shí)速度較快，而背景層則速度較慢，從而營(yíng)造出前景和背景之間的差異。

通過(guò)這種技術(shù)，能夠吸引用戶的注意力，提高用戶對(duì)網(wǎng)頁(yè)內(nèi)容的關(guān)注度。話不多說(shuō)，先來(lái)看一下關(guān)于今天要實(shí)現(xiàn)的這個(gè)效果的預(yù)覽吧。

效果預(yù)覽

以上就是整個(gè)效果的預(yù)覽狀態(tài)，接下來(lái)將帶大家來(lái)實(shí)現(xiàn)它。

HTML

我們先來(lái)看到HTML部分，在這里我們創(chuàng)建了三個(gè)段落，相關(guān)代碼如下。

<section>
      <div class="content">
        <h2>CSS</h2>
        <p>
        內(nèi)容可自定義
        </p>
        <a href="#">閱讀更多</a>
      </div>
    </section>
    <section>
      <div class="content">
        <h2>開(kāi)源</h2>
        <p>
         內(nèi)容可自定義
        </p>
        <a href="#">閱讀更多</a>
      </div>
    </section>
    <section>
      <div class="content">
        <h2>Tailwind</h2>
        <p>
         內(nèi)容可自定義
        </p>
        <a href="#">閱讀更多</a>
      </div>
    </section>

這三個(gè)段落分別由標(biāo)題，內(nèi)容以及鏈接組成，其中內(nèi)容部分可自定義。這里就是我們前面提及到的前景層，而背景層就是由多個(gè)不同的背景圖組成。有了前景層和背景層，下面就到了CSS樣式的設(shè)計(jì)環(huán)節(jié)。

CSS

首先我們把背景圖片準(zhǔn)備好。

section:nth-child(1) .content h2 {
  background-image: url(//img.jbzj.com/file_images/article/202402/2024227154346811.jpg);
  background-size: cover;
}
section:nth-child(2) .content h2 {
  background-image: url(//img.jbzj.com/file_images/article/202402/2024227154346811.jpg);
  background-size: cover;
}
section:nth-child(3) .content h2 {
  background-image: url(//img.jbzj.com/file_images/article/202402/2024227154346811.jpg);
  background-size: cover;
}

這里我們準(zhǔn)備了三張不同的背景圖，作為背景層。如果有n個(gè)段落，就準(zhǔn)備n張背景圖，它們是一一對(duì)應(yīng)關(guān)系。

接著我們來(lái)給每個(gè)段落賦予樣式。

section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}
section .content {
  text-align: center;
}
section .content h2 {
  font-size: 24vw;
  font-weight: 900;
  line-height: 1.5em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
}

在這里我們定義了一些樣式來(lái)設(shè)置section元素以及section里面的子元素的外觀和布局。首先將該元素的定位方式為相對(duì)定位。這意味著該元素的位置將相對(duì)于其正常位置進(jìn)行偏移。其次將元素的布局設(shè)置為彈性布局，這樣子元素可以根據(jù)需要自動(dòng)調(diào)整大小和位置。

接下來(lái)，content類(lèi)段落中的內(nèi)容元素，設(shè)置文本內(nèi)容居中對(duì)齊。

最后，對(duì)于標(biāo)題元素，通過(guò)-webkit-background-clip: text和-webkit-text-fill-color: transparent使得文字內(nèi)容透明顯示。并且通過(guò)background-attachment: fixed將h2元素的背景圖像固定在視口中，不隨滾動(dòng)而移動(dòng)。
到這里主體效果已經(jīng)能展現(xiàn)出來(lái)了，剩下的都是一些樣式上的潤(rùn)色和優(yōu)化。關(guān)于這里的完整代碼大家可以前往碼上掘金查看。

總結(jié)

以上就是整個(gè)效果的實(shí)現(xiàn)過(guò)程了，代碼比較簡(jiǎn)單，沒(méi)有很復(fù)雜的邏輯處理部分。更多相關(guān)CSS 剪切蒙版視差滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論