鏤空廣告，一行CSS實現滾動時藏在信息流后面的廣告效果

、首先看一看是什么效果？

2、一行background-attachment:fixed搞定鏤空信息流廣告

這個方法理論上是最簡單效果也最好的方法。

CSS中有個background-attachment屬性，當我們設置屬性值為fixed的時候，背景圖片相對于窗體定位，不受滾動影響。

于是，我們的實現就很簡單：信息流列表HTML中插入個廣告<a>鏈接，然后廣告圖作為背景圖呈現，設置background-attachment:fixed效果就可以實現了，就這么簡單。

HTML和CSS代碼示意：

<div class="list">信息流列表1</div>
<div class="list">信息流列表2</div>
<a href="#" class="ad" target="_blank">廣告</a>
<div class="list">信息流列表3</div>
<div class="list">信息流列表4</div>
.ad {
 display: block;
 height: 600px;
 background: url(./ad.jpg) no-repeat top fixed;
 background-size: 100%;
}

唯一的不足：iOS Safari不支持background-attachment:fixed

iOS Safari很早時候position:fixed也不支持，后來妥協了，支持了；但是background-attachment:fixed還是老樣子，不支持，怕是嫌棄background-attachment:fixed燒性能，對于一個連IE6，IE7瀏覽器都支持良好的CSS聲明，Safari不支持（包括iOS微信），我也無力說些什么。

因此，我們還需要額外做些功夫，兼容下iPhone手機瀏覽器。

我的做法是如果是iPhone手機，廣告圖片postion:fixed定位，配合JS實時clip剪裁。核心JS如下：

// ele就是廣告元素DOM對象
window.addEventListener('scroll', function () {
 var bound = ele.parentElement.getBoundingClientRect();
 var clip = 'rect('+ [bound.top + 'px', ele.parentElement.clientWidth + 'px', bound.bottom + 'px', 0].join() +')';
 ele.style.clip = clip;
});

查了下瀏覽器兼容性資料，發現Android4.4+版本開始，放棄了對background-attachment:fixed的支持，但是Android Chrome瀏覽器卻支持，這有些令人不解（見下圖）。

我用家里人的Android手機測試，背景效果表現為scroll，看來JS補丁要多個Android設備。

3、position:fixed也可以實現藏在后面的信息流廣告

position:fixed也可以實現藏在后面的信息流廣告，實現原理就是藏在其他信息流元素的背后，以及頭部或者底部元素（如果有）的底部，關鍵就是z-index層級控制了。雖然原理簡單，但是實際操作還是有些啰嗦的，通常信息流頁面的HTML結構都比較復雜，此時再z-index屬性各種設置，很容易造成z-index混亂。

效果大致如下GIF截屏：

HTML和CSS代碼原理示意：

<div class="list">信息流列表1</div>
<div class="list">信息流列表2</div>
<a href="#" class="ad" target="_blank">
 <img src="./ad.jpg">
</a>
<div class="list">信息流列表3</div>
<div class="list">信息流列表4</div>

.list {
 background-color: #fff;
 position: relative;
 z-index: 1;
}
.ad {
 display: block;
 height: 576px;
}
.ad img {
 position: fixed; top: 0;
 width: 400px;
}

優點和不足

基于position:fixed實現的優點在于：

1. 我們的廣告內容可以支持復雜HTML，而不僅僅是一張圖片；

2. 所有瀏覽器都兼容，包括iPhone Safari瀏覽器。

不足在于：

1. 需要其他元素進行層級配合，相互耦合增加了CSS的復雜度。

如果實際開發時候發現z-index層級控制比較麻煩，可以試試第一個demo中使用的CSS clip剪裁，直接只顯示當前廣告區域內容，不過需要JS配合，不是純CSS實現了，自己權衡。

4、結束語

采用position:fixed固定定位實現的時候，我們還可以把廣告元素從信息流列表中抽離，直接放在整個容器的后面，然后借助visibility屬性實現點擊穿透，如下示意：

<a href="#" class="ad">廣告</a>
<ul>
 <li>信息流列表1</li>
 <li>信息流列表2</li>
 <li></li> <!-- 撐開高度 -->
 <li>信息流列表3</li>
 <li>信息流列表4</li>
</ul>

.ad {
 position: fixed;
}
ul {
 position: relative;
 visibility: hidden;
}
li:empty {
 /* 撐開高度，實際開發請使用類名控制，這里精簡HTML才使用:empty */
 height: 576px;
}
li:not(:empty) {
 visibility: visible;
}

具體就不展開了。

英格蘭涼了，比利時很強。

希望本文內容可以幫助需要的人。

然后，如果你有更好地實現方法，歡迎不吝賜教！

者 | 大澈

大家好，我是大澈！

又是好久沒更文了，前陣子駕著新車回了趟老家，很“幸運”的經歷了平原縣地震的余波。

回想當時，半夜凌晨，房屋晃動，如同身處過山車，一切都很不真實。雖然震感時間很短暫，但是現在依舊讓我記憶猶新，人類在大自然面前真的是太渺小了，很多時候真的是力不從心。

所以，真心想和大家說一句，生活不易，及時行樂，珍惜身邊人，且行且珍惜。

ONE

需求分析，問題描述

一、需求

一個可以滾動的菜單，為它添加一個可以下拉滾動的提示。要求滾動到菜單最底部時，隱藏下拉滾動的提示，否則讓其一直顯示。

二、問題

1、如何實現滾動條效果？

2、如何判斷是否滾動到底部？

TWO

解決問題，答案速覽

實現代碼如下，復制粘貼即可直接使用。

代碼中滾動條的實現使用了element的el-scrollbar組件。組件中包裹的第一個div，指的是需要滾動的視圖。組件中包裹的第二個div，指的是下拉滾動提示的圖標，這里根據需求進行設置，可以更換靜態的或者那種閃爍跳躍的動態提示圖標。

// 1、模版
<el-scrollbar max-height="calc(100vh - 84px)" @scroll="handleScroll" ref="myScrollbar">
<div class="sideBarIn"></div>
<div class="pcSign pcIcon" v-if="isShowIcon">
<img class="iconImg" src="../assets/images/common/xiaGery.png"></div>
</el-scrollbar>


// 2、邏輯
// 滾動條事件
const handleScroll = (val) => {
// 防止Scrollbar實例為空
if (!myScrollbar.value) {
return
}

// 判斷是否滾動到底部
let isScrollToEnd = Number(myScrollbar.value.wrapRef.scrollTop.toFixed(0)) 
+ Number(myScrollbar.value.wrapRef.clientHeight.toFixed(0))
=== Number(myScrollbar.value.wrapRef.scrollHeight.toFixed(0));

if (isScrollToEnd) {
// 滾動到底部的處理邏輯
isShowIcon.value = false
} else {
// 非滾動到底部的處理邏輯
isShowIcon.value = true
}
}


// 3、樣式
.pcIcon {
width:100%;
height: 100px;
position: absolute;
bottom: -4px;
left: 0;
text-align: center;
line-height: 130px;
background: linear-gradient(to bottom, rgba(234, 234, 234, 0.5), rgba(234, 234, 234, 1));

.iconImg {
width: 20px;
height: 20px;
}
}
.pcSign{
display: block;
}

THREE

問題解析，知識總結

一、如何實現滾動條效果？

實現滾動條效果有兩種實現方式：利用css的overflow: scroll屬性、利用element的el-scrollbar組件。

1、overflow: scroll屬性

在div元素上添加 overflow-y: scroll; css屬性，就能顯示出一個滾動條，如果不指定是x或y軸，則水平和垂直都會出現滾動條。

當然，前提是你需要指定div元素的高度或者最大高度。

2、el-scrollbar組件

一般在vue項目中，我們可直接使用element的el-scrollbar組件，因為官方為我們提供了許多API，以及各種適配優化。

el-scrollbar組件的屬性如下：

el-scrollbar組件的事件如下：

el-scrollbar組件的實例屬性如下：

二、如何判斷是否滾動到底部？

這里判斷是否滾動到底部的關鍵在于scrollTop+clientHeight是否等于scrollHeight的值。只有當滾動的距離+可視區域的高度，與scrollHeight相等時，才證明滾動條滾動到了底部。

同樣的，如果scrollHeight與可視區域的高度直接就相等時，又說明元素不可以滾動，也就沒有滾動條。這一點在有此需求時，可以進行實用。

元素的幾個寬高屬性釋義如下：

- END -

詳細介紹如何使用 HTML 和 CSS 創建文本與圖片的無限滾動動畫效果。網頁內容包含兩個部分，一個是標簽組滾動，另一個是圖片組滾動，其中動畫的效果主要表現為標簽和圖片一直橫向的水平滾動，并且元素會無縫銜接從而實現無限循環，并且首尾兩端有漸變蒙層效果，以造成出現和消失的過渡。

HTML 結構

首先，HTML 代碼部分包含了5個.scroll元素，這個數量取決于你網頁有幾個無限滾動區域。每個scroll元素都放了兩個div(d1和d2)用于創建滾動容器，其中每個div元素都具有相同的內容元素，用于展示滾動內容。本案例的主要內容就是標簽組span和圖片組img。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Infinite Scrolling Animation</title>

  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="scroll" style="--t: 20s">
    <div>
      <span>HTML</span>
      <span>CSS</span>
      <span>JavaScript</span>
      <span>Vue</span>
      <span>React</span>
      <span>Figma</span>
      <span>Photoshop</span>
    </div>

    <div>
      <span>HTML</span>
      <span>CSS</span>
      <span>JavaScript</span>
      <span>Vue</span>
      <span>React</span>
      <span>Figma</span>
      <span>Photoshop</span>
    </div>
  </div>

  <div class="scroll" style="--t: 30s">
    <!-- 同上 -->
  </div>

  <div class="scroll" style="--t: 10s">
    <!-- 同上 -->
  </div>

  <div class="scroll" style="--t: 35s">
    <!-- 同上 -->
  </div>

  <div class="scroll img-box" style="--t: 25s">
    <div>
      <img src="./images/img_01.jpg" alt="image">
      <img src="./images/img_02.jpg" alt="image">
      <img src="./images/img_03.jpg" alt="image">
      <img src="./images/img_04.jpg" alt="image">
      <img src="./images/img_05.jpg" alt="image">
      <img src="./images/img_06.jpg" alt="image">
      <img src="./images/img_07.jpg" alt="image">
      <img src="./images/img_08.jpg" alt="image">
      <img src="./images/img_09.jpg" alt="image">
    </div>

    <div>
      <!-- 同上 -->
    </div>
  </div>
</body>

</html>

標簽組和圖片組里的兩個div要寬度保持一致，也就是說d1和d2里的每個標簽span要對應相同，否則兩個div就會出現滾動覆蓋或距離過大。還有就是每個scroll標簽的自定義變量--t的值不一樣(又快又慢)，要想滾動效果統一的話時間調整一樣就可以了。

CSS 樣式

接下來，看 CSS 部分設置了一些基本的全局樣式，有重置樣式、內容水平垂直居中布局、背景字體顏色等不做過多贅述。

/* @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700,800&display=swap'); */
@import './google-fonts.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  min-height: 100vh;
  background-color: #222;
  color: #fff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}

/* ... */

滾動容器scroll有一個固定寬度，然后對于溢出的內容隱藏不可見，以及使用 mask-image 創建了一個線性漸變遮罩，給內容帶來滾動時的淡出淡入視覺效果。

span元素標簽的樣式設置了內聯塊級元素的展示方式，以及一些邊距、邊框、字母間距和文本轉換。此外，當鼠標懸停時，還設置了背景顏色的變化。
img圖片的樣式設置了最大寬度和灰度濾鏡，當鼠標懸停在圖片上時，濾鏡會被移除，呈現出原始彩色圖片。兩者都提供了一種交互反饋的效果。


.scroll {
  display: flex;
  width: 700px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.scroll > div span {
  display: inline-block;
  margin: 10px;
  padding: 5px 10px;
  background-color: #333;
  border-radius: 5px;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  cursor: pointer;
  transition: background-color 0.5s;
}
.scroll > div span:hover {
  background-color: #4caf50;
}

.img-box img {
  max-width: 150px;
  filter: grayscale(1);
  
  cursor: pointer;
  transition: filter 0.5s;
}
.img-box img:hover {
  filter: grayscale(0);
}

/* ... */

技術實現

接著就是每個滾動容器內包裹兩個一樣的div元素，用于創建無縫銜接，下面分別簡稱為d1和d2。通過 white-space: nowrap 屬性確保 div 內的內容不換行，從而使得內容能夠水平滾動。

主要通過兩個不同的關鍵幀動畫@keyframes關鍵幀和過渡animation屬性控制兩個滾動區域實現的滾動效果。讓元素以無限循環和線性動畫的方式在.scroll滾動容器內移動。拿本案列的img-box元素闡釋一下動畫執行過程：

首先，它定義的CSS變量是--t: 25s。里面兩個div元素都應用了25s勻速無限循環動畫。
然后，在d1中應用了延遲25s * -1 = -25s，animate動畫從 transform: translateX(100%) 開始，將元素初始位置設置在容器的右側外部。在動畫結束時，元素移動到了容器的左側外部，即 transform: translateX(-100%)。
最后，在d2中應用了延遲25s / -2 = -12.5s，animate2動畫從 transform: translateX(0) 開始，將元素初始位置設置在容器的右側外部。在動畫結束時，元素移動到了容器的左側更遠的位置，即 transform: translateX(-200%)。滾動的距離是比第一個d1滾動區域更遠的，這樣可以實現錯開的滾動效果。


.scroll > div {
  white-space: nowrap;
  animation: animate var(--t) linear infinite;
  animation-delay: calc(var(--t) * -1);
}
@keyframes animate {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.scroll > div:nth-child(2) {
  animation: animate2 var(--t) linear infinite;
  animation-delay: calc(var(--t) / -2);
}
@keyframes animate2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}



@media screen and (max-width: 768px) {
  .scroll {
    width: 90vw;
  }

  .scroll > div span {
    background-color: #4caf50;
  }

  .img-box img {
    width: 33vw;
    filter: grayscale(0);
  }
}

由于animate延遲小于animate2，所以動畫a2先執行，從右向左持續滾動到x: -200%，當滾動到-100%時也就是當前可見區域，此時a1開始執行動畫 1 ，從右向左持續滾動到x: -100%，當滾動到100%時也就是當前可見區域，a2已經到-200%了，接著看a1繼續滾動到-100%，a2繼續從0到-200%，如此循環往復。

最后

通過本篇文章相信能夠幫助你更好地使用CSS來創建一個文本與圖片無限滾動動畫，從而理解掌握和應用這個效果。通過 transform 屬性的變化實現了水平滾動效果，使得 div 內的內容能夠在容器內水平滾動，呈現出無限循環的連接效果。豐富了網頁增添加了動態和交互性。

「絕無僅有」CSS打造吸睛的文本與圖片無限滾動動畫
原文鏈接：https://juejin.cn/post/7306442463765544971

在線咨詢

上一篇：HTML 文件路徑
下一篇：集成Lodop打印控件實現打印教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商