基于javascript的无缝滚动动画1

下面是基于 javascript 的无缝滚动动画攻略:

1、需求分析

首先，我们需要明确我们要做的是一个无缝滚动的动画效果。该效果可以让用户通过鼠标滑轮或手势轻松地左右滑动页面，并且当滑动到页面边缘时会循环滚动，保证用户可以持续无感知地查看页面内容。

2、技术实现

实现无缝滚动的动画效果，可以使用以下技术来完成：

2.1 CSS3动画

可以使用 CSS3 的 translateX 属性来实现页面的左右滑动动画效果。代码示例如下：

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.slide {
  animation: slide 10s infinite linear;
}

在上述示例代码中，我们定义了一个名为 slide 的动画，将页面元素以 translateX 的方式滑动。接着，我们使用 animation 属性将该动画应用到 slide 类名的元素上，并指定了动画的时间、次数和加速方式等参数。

2.2 JavaScript事件监听

JavaScript 可以监听用户的鼠标滑轮或手势事件，并以相应的方式调用滑动页面的函数，从而实现页面的滑动效果。示例代码如下：

document.addEventListener('wheel', function(event) {
  // 滚动1像素代表滚动20px
  var delta = event.deltaY;
  var distance = delta > 0 ? 20 : -20;
  scrollPage(distance);
});

在上述示例代码中，我们使用 addEventListener 方法监听用户的鼠标滑轮事件，并通过 deltaY 属性获得滑轮滚动的距离。接着，根据滚动的距离，我们调用 scrollPage 函数进行滑动操作。

3、代码实现

根据以上技术实现方法，我们可以得到下列代码实现：

<div class="slide-wrapper">
  <div class="slide"> <!--放置需要滑动的元素-->
    <img src="slide1.jpg">
    <img src="slide2.jpg">
    <img src="slide3.jpg">
  </div>
</div>

.slide-wrapper {
  overflow: hidden;
}
.slide {
  width: 300%;
  transition: transform 0.5s ease-in-out;
}

var slide = document.querySelector('.slide');
var timer;

function autoSlide() {
  // 每5秒自动向左滑动
  timer = setInterval(function() {
    slide.style.transform = 'translateX(-33.33%)';
  }, 5000);
}

function smoothScroll(delta) {
  // 滚动1像素代表滚动20px
  var distance = delta > 0 ? 20 : -20;
  scrollPage(distance);
}

function scrollPage(distance) {
  var currentLeft = parseInt(slide.style.transform.match(/-?\d+\.?\d*/g)[0]);
  var totalWidth = slide.offsetWidth * 3;
  var nextLeft = currentLeft + distance;

  if (nextLeft < -totalWidth || nextLeft > 0) {
    return;
  }

  slide.style.transform = 'translateX(' + nextLeft + 'px)';
}

autoSlide();

document.addEventListener('wheel', function(event) {
  event.preventDefault();
  smoothScroll(event.deltaY);
});

slide.addEventListener('transitionend', function() {
  var currentLeft = parseInt(slide.style.transform.match(/-?\d+\.?\d*/g)[0]);
  var totalWidth = slide.offsetWidth * 3;

  if (currentLeft === 0) {
    slide.style.transition = 'none';
    slide.style.transform = 'translateX(-33.33%)';
    setTimeout(function() {
      slide.style.transition = 'transform 0.5s ease-in-out';
    }, 0);
  } else if (currentLeft === -totalWidth) {
    slide.style.transition = 'none';
    slide.style.transform = 'translateX(-33.33%)';
    setTimeout(function() {
      slide.style.transition = 'transform 0.5s ease-in-out';
    }, 0);
  }
});

以上代码分别实现了自动和手动滑动，以及滑动到边缘时的循环滚动效果。

4、示例说明

以下两个示例更直观地展示了上述代码的效果：

示例一

基于javascript的无缝滚动动画1

该示例实现了自动和手动滑动，以及滑动到边缘时的循环滚动效果。用户可以通过鼠标滑轮或手势轻松地左右滑动页面，并且当滑动到页面边缘时会循环滚动，保证用户可以持续无感知地查看页面内容。

示例二

基于javascript的无缝滚动动画2

该示例实现了自动和手动滑动，以及滑动到边缘时的循环滚动效果。不同于示例一，该示例添加了鼠标悬停时暂停滚动，移开时继续滚动的效果，更加注重用户的交互体验。