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

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);//取消动画或者重绘任务
      };
    }
  }
}
相关推荐
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack3 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669133 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端