scrollTo函数与requestAnimationRequest

分类：编程问答

如何解决scrollTo函数与requestAnimationRequest

我使用本教程创建的函数-> https://www.youtube.com/watch?v=oUSvlrDTLi4。它在我使用过的上一页中起作用，但是在此页面中，它不起作用。它使用请求动画框架API。单击导航后，假定滚动可以在3个＃链接之间工作。关于什么阻止了动画的任何建议？在脚本标签末尾查看“ smoothScroll（）”函数

HTML和JS 

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

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="/css/normalize.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
   <link rel="stylesheet" href="/css/style.css">
   <link rel='stylesheet' href='css/mobile.css' />

   <title>Shek Leung</title>
</head>

<body class="animate__animated animate__fadeIn">

   <section class="projects-container">
      <nav>
         <div class="proj__nav">
            <a href="#archiveFilms" class="archiveFilms active-proj">Archive Films</a>
            <a href="#soundDY" class="dearYou link-color">Sound: Dear You</a>
            <a href="#soundDS" class="directorSt link-color">Sound: Final Director's Statement</a>
         </div>
         <a href="/index.html" class="proj__back link-color">Back</a>
      </nav>

      <main class="projects-main">
         <div id="archiveFilms">
            <div class="carousel">
               <button class="carousel__button carousel__button--left">←</button>
               <div class="carousel__track-container">
                  <ul class="carousel__track">
                     <li class="carousel__slide current-slide">

                        <video class="carousel__video" id="blue" src="/img/Projects/B L U E - Research Film (2015).mp4"
                           preload="metadata"></video>
                     </li>
                     <li class="carousel__slide">

                        <video id="lvproj" class="carousel__video"
                           src="/img/Projects/LV Project_ Hologram Presentation (2016).mp4" preload="metadata"></video>
                     </li>
                     <li class="carousel__slide">

                        <video id="walking" class="carousel__video"
                           src="/img/Projects/We create Paths by Walking (2016).mp4" preload="metadata"></video>
                     </li>
                  </ul>
               </div>
               <button class="carousel__button carousel__button--right">→</button>

               <div class="vid-nav">
                  <p class="carousel__slide-text">BLUE → Research Film (2015)</p>
                  <span class="play">▶</span>
                  <span class="audio">♩</span>
               </div>
            </div>
         </div>
         <div id="soundDY">
            <div class="container__sound">
               <div class="container__audio">
                  <p class="container__header">"Dear You" Sound (2018)</p>
                  <audio controls>
                     <source src="/img/Projects/Dear You (2018).mp3" type="audio/mp3">
                  </audio>
               </div>
               <div class="container__credit">
                  <p>Collaboration for BA Collection→<br><br>
                     Concept by Samson Leung<br>
                     Music composed by Zacharias Wolfe<br>
                     <br>Performed by the following:
                     <br><br>Alto Saxophone solo - Theo Hillborg
                     <br>Violins - Abel Puustinen,Pierpaolo Casamassima,Claire Edwards,Elisabeth Turmo,Ismael Jarmouni Gómez & Esther Park
                     <br>Viola - Georgie Davis & Tiffany Cheng
                     <br>Cello - Shizuku Tatsuno & Meera Priyanka Raja
                     <br>Bass - Peter Farthing
                     <br>Studio engineer and mix - Luke Knott
                     <br>Final mix and editing - Oliver Buckland</p>
               </div>
            </div>
         </div>
         <div id="soundDS">
            <div class="container__sound">
               <div class="container__audio">
                  <p class="container__header">“Final Director's Statement Sound (2020)
                  </p>
                  <audio controls>
                     <source src="/img/Projects/Final Director's Statement (2020).mp3" type="audio/mp3">
                  </audio>
               </div>
               <div class="container__credit">
                  <p>Collaboration for MA Collection→<br><br>
                     Concept by Samson Leung<br>
                     Music composed by Zacharias Wolfe<br>
                  </p>
               </div>
            </div>
         </div>
      </main>
   </section>
   <script>
      const projTabs = document.querySelectorAll('nav a');
      const directorSt = document.querySelector('.directorSt');
      const dearYou = document.querySelector('.dearYou');
      const archiveFilms = document.querySelector('.archiveFilms')
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh',`${vh}px`);

      if (!archiveFilms) {} else {
         archiveFilms.addEventListener('click',() => {
            projTabs.forEach(tab => {
               tab.classList.remove('active-proj');
               tab.classList.add('link-color');
               archiveFilms.classList.remove('link-color');
               archiveFilms.classList.add('active-proj');
               // smoothScroll()
            })
         })
      }

      if (!dearYou) {} else {
         dearYou.addEventListener('click',() => {
            projTabs.forEach(tab => {
               tab.classList.remove('active-proj');
               tab.classList.add('link-color');
               dearYou.classList.remove('link-color');
               dearYou.classList.add('active-proj')
            })
         })
      }
      if (!directorSt) {} else {
         directorSt.addEventListener('click',() => {
            projTabs.forEach(tab => {
               tab.classList.remove('active-proj');
               tab.classList.add('link-color');
               directorSt.classList.remove('link-color');
               directorSt.classList.add('active-proj')
            })
         })
      }


      const track = document.querySelector('.carousel__track');
      const slides = Array.from(track.children);
      const nextBtn = document.querySelector('.carousel__button--right')
      const prevBtn = document.querySelector('.carousel__button--left');
      const slideWidth = slides[0].getBoundingClientRect().width;
      const videoText = document.querySelector(".carousel__slide-text");
      const carouselVideos = document.querySelectorAll('.carousel__video');
      const blue = document.querySelector('#blue');
      const lvProj = document.querySelector('#lvproj');
      const walking = document.querySelector('#walking');
      const audio = document.querySelector('.vid-nav .audio');
      const play = document.querySelector('.play');


      const setSlidePosition = (slide,index) => {
         slide.style.left = slideWidth * index + "px";
      }
      slides.forEach(setSlidePosition);


      const moveToSlide = (track,currentSlide,targetSlide) => {
         track.style.transform = "translateX(-" + targetSlide.style.left + ")";
         currentSlide.classList.remove('current-slide');
         targetSlide.classList.add('current-slide');
         if (targetSlide === slides[1]) {
            videoText.innerHTML = "LV Project → Hologram Presentation (2016) ";
            nextBtn.style.display = "block";
            prevBtn.style.display = "block";

         } else if (targetSlide === slides[2]) {
            videoText.innerHTML = "We Create Paths By Walking (2016)";
            nextBtn.style.display = "none";
            prevBtn.style.display = "block";

         } else if (targetSlide === slides[0]) {
            videoText.innerHTML = "BLUE → Research Film (2015)";
            nextBtn.style.display = "block";
            prevBtn.style.display = "none";
         }
      }


      prevBtn.addEventListener('click',e => {
         const currentSlide = track.querySelector('.current-slide');
         const prevSlide = currentSlide.previousElementSibling;
         moveToSlide(track,prevSlide);
         carouselVideos.forEach(v => {
            if (!v.isPaused) {
               v.pause();
               audio.classList.remove('blinking');
               play.innerHTML = "▶";
            };
         })

      })


      nextBtn.addEventListener('click',e => {
         const currentSlide = track.querySelector('.current-slide');
         const nextSlide = currentSlide.nextElementSibling;
         moveToSlide(track,nextSlide);
         carouselVideos.forEach(v => {
            if (!v.isPaused) {
               v.pause();
               audio.classList.remove('blinking');
               play.innerHTML = "▶";
            };
         })
      })

      if (window.matchMedia("(max-width: 1000px)").matches) {
         carouselVideos.forEach(v => {
            v.controls = true;;
         })
      } else {
         /* The viewport is greater than 700 pixels wide */
      }


      play.addEventListener('click',() => {
         audio.classList.add('blinking');
         if (slides[0].classList.contains('current-slide')) {
            symbolSwitch(blue)
         } else if (slides[1].classList.contains('current-slide')) {
            symbolSwitch(lvProj)
         } else if (slides[2].classList.contains('current-slide')) {
            symbolSwitch(walking);
         }
      })


      function symbolSwitch(element) {

         if (element.paused) {
            element.play();
            play.innerHTML = "||"
            if (element.muted) {
               audio.classList.remove('blinking');
            }
         } else {
            element.pause();
            play.innerHTML = "▶";
            audio.classList.remove('blinking');
         }

      }
      audio.addEventListener('click',() => {

         if (slides[0].classList.contains('current-slide')) {
            symbolBlink(blue)

         } else if (slides[1].classList.contains('current-slide')) {
            symbolBlink(lvProj)
         } else if (slides[2].classList.contains('current-slide')) {
            symbolBlink(walking)
         }
      })


      function symbolBlink(element) {
         if (element.muted === true && (!element.isPaused)) {
            element.muted = false;
            audio.classList.add('blinking');
         } else {
            element.muted = true;
            audio.classList.remove('blinking');

         }
      }
      projTabs.forEach(tab => {
         tab.addEventListener('click',() => {
            const link = tab.getAttribute("href");
            smoothScroll(link,1000);
         })
         
      })

      function smoothScroll(target,duration) {
         var target = document.querySelector(target);
         var targetPos = target.offsetLeft;
         console.log(targetPos)
         var startPos = window.pageXOffset
         var distance = targetPos - startPos;
         var startTime = null; // keeps track of time

         function animation(currentTime) {
            if (startTime === null) startTime = currentTime;
            var timeElapsed = currentTime - startTime;
            var run = easeOut(timeElapsed,startPos,distance,duration)
            window.scrollTo(run,0);
            if (timeElapsed < duration) requestAnimationFrame(animation);
         }

         function easeOut(t,b,c,d) {
            t /= d;
            return -c * t * (t - 2) + b;
         };

         requestAnimationFrame(animation);
      }
   </script>
</body>

</html>

CSS 

/* Projects page */

.projects-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   /* scroll-behavior: smooth; */
   overflow: hidden;
}


.projects-container nav {

   width: 80vw;
   height: 8vh;
   position: fixed;
   display: block;
   display: flex;
   justify-content: space-between;
   align-items: center;

}

.projects-container a {
   font-family: Helvetica,sans-serif;
   font-weight: bold;
   font-size: 1.2rem;
   text-decoration: none;
   text-transform: uppercase;
   transition: all 1s;
}

.link-color {
   color: black;
}

.proj__nav {
   width: 45vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.projects-main {
   width: 100vw;
   height: 100vh;
   display: flex;
   /* scroll-behavior: smooth; */

}

#archiveFilms {
   background-color: white;
   min-width: 100vw;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

}


.vid-nav {
   position: relative;
   height: 5vh;
   width: 100%;
   display: flex;
   margin: 0 auto;
   padding-top: 2rem;
}

.carousel__slide-text {
   width: 100%;
   font-family: Helvetica,sans-serif;
   font-size: 1rem;
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 0.1rem;
   transition: opacity 1s;

}


.vid-nav span {
   cursor: pointer;
   font-size: 1.1rem;
}

.play {
   padding-right: 1rem;
}

.blinking {
   animation: blinkingAudio 1.2s infinite;
}

@keyframes blinkingAudio {
   0% {
      color: #000;
   }

   49% {
      color: #000;
   }

   60% {
      color: transparent;
   }

   99% {
      color: transparent;
   }

   100% {
      color: #000;
   }
}

.carousel {
   position: relative;
   height: 75vh;
   width: 75%;
   margin: 0 auto;

}

.carousel__video {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.carousel__track-container {
   height: 100%;
   position: relative;
   overflow: hidden;
}

.carousel__track {
   padding: 0;
   margin: 0;
   height: 100%;
   list-style: none;
   transition: transform 250ms ease-in;
   -webkit-transition: transform 250ms ease-in;
   -moz-transition: transform 250ms ease-in;

}

.carousel__slide {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
}

.carousel__button {
   position: absolute;
   top: 50%;
   background: transparent;
   border: 0;
   font-size: 3rem;
}

.carousel__button--left {
   left: -6vw;
   display: none;
}

.carousel__button--right {
   left: 80vw;
}

#soundDY {
   background-color: white;
   min-width: 100vw;
   min-height: 100vh;
}

.container__sound {
   width: 100%;
   height: 80vh;
   display: flex;
   justify-content: space-evenly;
   align-items: center;

}



.container__audio {
   width: 30vw;
   height: 20vh;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   border: 3px solid black;
   padding: 2rem;


}

.container__header {
   font-family: Helvetica,sans-serif;
   font-size: 1.5rem;
   text-transform: uppercase;
   color: black;
   letter-spacing: 0.2rem;

}

audio {
   width: 30vw;

}



.container__credit {
   margin-top: 15vh;
   width: 25vw;
   height: auto;
   padding: 3rem;
   border: 3px solid black;
}

.container__credit p {
   font-family: Helvetica,sans-serif;
   font-size: 1rem;
   font-weight: bold;
   align-self: flex-end;
   text-transform: capitalize;
   color: black;
   line-height: 2;
}

#soundDS {
   background-color: white;
   min-width: 100vw;
   min-height: 90vh;
}

.active-proj {
   background-color: black;
   color: var(--grCol3);
}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot