前言

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

剪切蒙版視差

這里簡單介紹一下剪切蒙版視差。

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

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

效果預(yù)覽

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

HTML

我們先來看到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>開源</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張背景圖，它們是一一對應(yīng)關(guān)系。

接著我們來給每個(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;
}

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

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

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

總結(jié)

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

最新評論