长图滚动加载动画,一进入首页自动加载首页内容

1、背景

一打开url地址进入首页的时候,自动滚动页面内容,点击正在滚动的页面任意位置,停止自动滚动。

2、技术路径

wow.js+animate.css

3、具体操作

页面元素

index.vue 复制代码
<template>
  <div>
    <transition name="fade" @after-leave="onLoadingComplete" >
      <div id="loading"  v-if="isLoading">
        <img src="../../assets/images/Galaxy/logo.png" alt="" class="loading-logo" />
        <div class="progress-box">
          <div class="progress"></div>
        </div>
      </div>
    </transition>
    <div v-show="!isLoading">
      <div class="zeroBgs">
        <img src="../../assets/images/logo.gif" class="img-logo wow fadeIn" data-wow-delay="1.3s">
        ...
      </div>
      <div class="oneBgs">
      ....
      </div>
     </div>
 </template>

初始化动画,并且在页面after-leave完成后,触发自动滚动函数startAutoScroll,通过requestAnimationFrame实现了平滑的自动滚动效果,并且在页面不可见或者手动干预的情况下停止自动滚动。

index.js 复制代码
export default {
  name: "Index",
  data() {
    return {
      isLoading: true
    };
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false;
      this.$wow.init()
    }, 3000);
  },
  methods: {
    //初始化动画离开后立马加载自动滚动
    onLoadingComplete() {
      this.startAutoScroll();
    },
    //自动滚动
    startAutoScroll() {
      const height = window.innerHeight;
      const clientHeight = document.querySelector('.zeroBgs').clientHeight;
      const scrollSpeed = 35; // 像素/秒
      let startTime = null;
      let isScrolling = true;
      let rafId = null;

      // 页面不可见时暂停滚动
      document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
          cancelAnimationFrame(rafId);
          isScrolling = false;
        }
      });

      // 页面发生手动滑动事件时暂停滚动
      document.addEventListener('touchstart', () => {
        cancelAnimationFrame(rafId);
        isScrolling = false;
      });

      function scroll(timestamp) {
        if (!startTime) startTime = timestamp;//如果startTime为null,则将其初始化为当前的时间戳
        if (!isScrolling) return;//如果isScrolling为false,则直接返回,停止滚动

        const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        const elapsed = (timestamp - startTime) / 1000; // 转换为秒

        if (currentScroll >= clientHeight - height) {
          isScrolling = false;
          return;
        }

        const scrollPosition = Math.min(elapsed * scrollSpeed, clientHeight - height);

        window.scrollTo({
          top: scrollPosition,
          behavior: 'auto'
        });

        rafId = requestAnimationFrame(scroll);//启动动画或者重绘任务
        //使用requestAnimationFrame递归调用scroll函数,实现连续的滚动动画
      }

      rafId = requestAnimationFrame(scroll);

      // 返回停止函数以便外部调用
      //返回一个匿名函数,该函数可以将isScrolling设置为false,并调用cancelAnimationFrame(rafId)取消动画帧,从而停止滚动。这样,外部代码可以调用这个返回的函数来停止自动滚动
      return () => {
        isScrolling = false;
        cancelAnimationFrame(rafId);//取消动画或者重绘任务
      };
    }
  }
}
相关推荐
mapbar_front9 分钟前
今天聊聊面试
前端·面试
华仔啊27 分钟前
Vue3+CSS实现一个非常丝滑的 input 标签上浮动画,设计师看了都点赞
前端·css·vue.js
北海道浪子31 分钟前
[免费送$1000]ClaudeCode、Codex等AI模型在开发中的使用
前端·人工智能·后端
明月与玄武37 分钟前
2025 前端框架决战:Vue 与 React 分析优缺点及使用场景!
前端·vue.js·react.js
无盐海1 小时前
XSS漏洞攻击 (跨站脚本攻击)
前端·xss
不一样的少年_1 小时前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
阿奇__1 小时前
el-table默认排序设置
前端·javascript·vue.js
hongc931 小时前
element-ui el-table 设置固定列fixed 高度不对
前端·vue.js·elementui
Forfun_tt1 小时前
xss-labs pass-12
前端·xss
云枫晖2 小时前
Webpack系列-编译过程
前端·webpack