js無縫滾動實例

ello,大家好，今天介紹一個小實例，無縫滾動，效果圖如下所示：

這個例子呢，可以讓圖片向左向右滾動，具體代碼如下所示：

這是html結構：

樣式代碼：

js代碼：

好了，大家覺的ok的話，記得關注我哦～～

、HTML

二、CSS

三、javascript

window.onload=function(){

var oDiv=document.getElementById("box");

var oLeft=oDiv.getElementsByTagName("div")[0];

var oInner=oDiv.getElementsByTagName("div")[1];

var oRight=oDiv.getElementsByTagName("div")[2];

var oUl=oInner.getElementsByTagName("ul")[0];

var aLi=oUl.getElementsByTagName("li");

oUl.innerHTML+=oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";

var speed=-5;

var timer=null;

timer=setInterval(function(){

oUl.style.left=oUl.offsetLeft+speed+"px";

if (oUl.offsetLeft<-oUl.offsetWidth/2) {

oUl.style.left=0+"px";

}

else if (oUl.offsetLeft>0) {

oUl.style.left=-oUl.offsetWidth/2+"px";

};

},30)

oLeft.onmousedown=function(){

speed=-5;

}

oRight.onmousedown=function(){

speed=5;

}

oUl.onmouseover=function(){

clearInterval(timer);

}

oUl.onmouseout=function(){

timer=setInterval(function(){

oUl.style.left=oUl.offsetLeft+speed+"px";

if (oUl.offsetLeft<-oUl.offsetWidth/2) {

oUl.style.left=0+"px";

}

else if (oUl.offsetLeft>0) {

oUl.style.left=-oUl.offsetWidth/2+"px";

};

},30)

}

四、最終效果

tip：

第34行oUl.innerHTML+=oUl.innerHTML;將oUl內容復制，防止出現空白。
第35行oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";設置oUl的寬，與aLi相匹配的。
第38-46行，設置oUl的運動，改變的是oUl的left值，第40-41行，避免右面出現空白和卡頓；第43-44行，避免左面出現空白和卡頓。

詳細介紹如何使用 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

在線咨詢

上一篇：從0到1上手Pytest
下一篇：01 Vue介紹

您的項目需求

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

整合營銷服務商

js無縫滾動實例

HTML 結構

CSS 樣式

技術實現

最后

您的項目需求