javascript - 滚动上的多个变形
问题描述
努力让多个 SVG 在滚动时进行动画处理。我按照 CodePen 操作,第一个动画效果很好,但第二个动画效果不好。我需要能够在主页上运行其中的 4-5 个。
var scrollMorph1 = new TimelineLite({paused:true})
.to("#headerBottomMask",1, {morphSVG:"#headerBottomMask2"},0)
.to("#headerBottom01a",1, {morphSVG:"#headerBottom01b"},0)
.to("#headerBottom02a",1, {morphSVG:"#headerBottom02b"},0)
.to("#headerBottom03a",1, {morphSVG:"#headerBottom03b"},0)
.to("#headerBottom04a",1, {morphSVG:"#headerBottom04b"},0)
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var diff = 50;
var object1 = $('#header h1');
var topOfRange1 = object1.offset().top + diff;
if (scrolled > topOfRange1 ) {
scrollMorph1.play().timeScale(1);
} else {scrollMorph1.reverse().timeScale(1);}
});
var scrollMorph2 = new TimelineLite({paused:true})
.to("#clientsMask",1, {morphSVG:"#clientsMask2"},0)
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var diff = 50;
var object2 = $('#weare a');
var topOfRange2 = object2.offset().top + diff;
if (scrolled > topOfRange2 ) {
scrollMorph2.play().timeScale(1);
} else {scrollMorph2.reverse().timeScale(1);}
});
解决方案
代码工作正常。不是针对路径,而是针对第二个 SVG 的 ID。必须瞄准路径。
推荐阅读
- typescript - 如何在打字稿中扩展基本类型?
- javascript - “查询”类型的对象不是 JSON 可序列化的
- .htaccess - 删除 htaccess 重写规则中的斜杠
- php - .htaccess rewrite ErrorDocument 没有被重定向
- gurobi - MiniZinc-Gurobi 在同一问题上的不同结果但具有不同的域变量
- c# - 从另一个线程 C# 调用 UI 线程
- xml - 逻辑应用使用 XPath 从具有属性的节点获取值
- kubernetes - 删除后取回 docker-for-windows Kuberentes kubeconfig 文件
- swift - 表视图控制器中的错误使用 segue 致命错误:索引超出范围
- google-chrome - 如何在别人的浏览器中注入 Cookie