腾讯云
开发者社区
文档
建议反馈
控制台
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
jQuery滚动和动画路径上的元素
、
、
、
我试图完成两件事:滚动时沿svg路径显示一个元素(在我的例子中:简单的红框)。滚动已经完成,使用非常容易。 但是在路径上显示一个元素是一个挑战。 要了解我正在尝试的内容: 在本例中,动画自动开始和结束,但我希望在用户滚动时移动箭头(动画)。如何将元素的坐标与svg路径相关联? PS:我很想发布我的代码,但它真的是两个插件的混合(混乱)-而且根本不能工作。这就是为什么我要问上面的问题。
浏览 2
提问于2016-02-25
得票数 1
1
回答
SVG对象CSS3动画的缺陷?
、
、
、
所以我只是进入SVG学习它是如何工作的。目前,我正在创建一个项目,该项目涉及以不同的速度旋转几个SVG <circle>,从而学习animateTransform如何工作。 但是,我发现可以在SVG对象上使用CSS3动画(我更熟悉)。我意识到animateTransform可以做更复杂的动画,但我说的是一个简单的动画,这两个选项都有完成的能力。 与animateTransform**?** 相比,(如果有的话)在SVG对象上使用的(如果有的话)动画有哪些缺点?animateTransform的性能更好吗?
浏览 1
提问于2013-12-05
得票数 0
1
回答
在javascript中将SVG(包含动画)保存为无画布的PNG文件
、
、
、
、
如何将svg下载为PNG文件?SVG可能包含动画,所以我不想使用画布,通过下面的代码我可以下载svg格式的图像,有什么建议可以在javascript中将svg转换为png吗? var a = document.createElement('a'); a.href = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="993" height="550">............';
浏览 19
提问于2017-06-28
得票数 1
2
回答
我可以把.SVG动画文件转换成Json吗?
、
、
我正在尝试使用Lottie库编写jetpack 对于动画图像,我制作了动画svg文件。 但是在中,动画的svg文件转换为静态json文件,而我并不打算这样做。 如何将动画svg文件转换为动画json文件?
浏览 17
提问于2022-02-04
得票数 0
1
回答
SVG动画在单页网站上滚动
、
、
、
、
如何实现SVG动画滚动在一个单一页面的网站。,我想做一些类似的网站,和。我更喜欢第一个,因为滚动和滚动控制动画。 我还没有任何SVG代码。试图找出如何在滚动上获得这个流水线工作流动画。我正在使用简单的引导启动模板。 需要你的建议 谢谢
浏览 5
提问于2016-11-09
得票数 0
回答已采纳
1
回答
在滚动体上动画SVG路径
、
、
、
我使用ScrollMagic & GSAP在滚动页上动画一个SVG路径。工作得很好。但是,一旦我用另一个来自名词项目的SVG替换路径,滚动路径-动画。 我尝试过添加容器、将内联转换从g标记移动到path标记本身,以及来自其他解决方案的许多其他方法。 如果有人能帮我理解这是怎么回事,我会非常感激的。
浏览 3
提问于2021-05-28
得票数 0
回答已采纳
1
回答
jQuery中滚动体上的图像闪烁序列
、
、
、
、
我正在创建一个简单的动画,它将在jQuery页面滚动页上显示多个图像序列(大约200个)。下面的代码在Chrome和Safari中工作得很好,但是图片在Firefox中闪烁。我尝试了所有可能的解决方案,包括对图像进行预着色和缩小文件大小,但都没有效果。 var nextImage = "frames/1.png"; var i=0; var myAnim = function(){ $(".myImageHolder").attr('src', nextImage); i++;
浏览 1
提问于2014-08-08
得票数 0
回答已采纳
1
回答
在Jquery事件上启动Svg animateMotion
、
、
、
我目前正在做svg动画。 我有一个SVG元素,它遵循带有animateMotion属性的路径。 我的形状: <g id="dart" transform="scale(-1,1) translate(-587, -145)"> <path d="..." /> </g> 我的道路: <path id="motionPath" fill="none" stroke="none" stroke-miterlimit="10" d=
浏览 3
提问于2016-02-25
得票数 0
回答已采纳
1
回答
在Firefox上重新加载页面后,jQuery停止工作
、
、
、
我最近发表了一个网站,一个简单的SVG动画熊猫火箭上。一旦用户向下滚动,图像就会改变为另一个SVG,熊猫的动画会从屏幕上上下移动。 网站: 我使用这个简单的脚本来实现它: <div style="left:10%;" id="rocket" > <img width="30%" height="auto" src="https://www.aaltowave.com/img/RocketPanda.svg" /> </div> <script> jQuery(win
浏览 2
提问于2018-02-12
得票数 0
回答已采纳
1
回答
复杂SVG在Chrome中的性能较差
、
、
、
、
我使用的是一个相当复杂的内联SVG,它有1000多个单独的路径。我需要对几条路径进行动态样式和动画化。因此,我不能使用普通的PNG/JPG图像。 如果我滚动到使用SVG的区域,Chrome就会变得滞后,而框架也会急剧下降。即使没有动画/样式SVG路径。到目前为止,Firefox和Safari中没有性能问题。 有一个类似的问题,关于SVG性能的工作小提琴。区别在于我同时使用的是一个大的SVG,而不是800+: 有什么办法可以提高Chrome的性能吗?好像是铬虫。所以也许有个解决办法? / 编辑: 下面是一个具有类似SVG文件的JSFiddle。由于版权原因,我无法提供原始的SVG。在本例中,当您
浏览 3
提问于2017-11-10
得票数 13
1
回答
动画/重绘的移动面板是闪烁严重-建议?
、
、
、
希望你们中的一些人能够给我指出正确的方向,当我在应用程序中‘动画’一些组件时,可以处理闪烁/撕裂/重绘问题。 在此之前,我必须指出,‘动画’似乎工作正常(没有闪烁等),而不是在全屏模式-即1024x768,borderstyle=bsSingle。当应用程序接管整个监视器,并且边框样式变为bsNone时,这个问题就变得更加明显。 有2个“动画”: 1-使用Winapi AnimateWindow方法从左向右滚动面板 2- TmsAdvPolyPager遍历它的每一个项目,然后显示它的“页面” 当滚动面板时,正在“退出”的面板会留下一条“痕迹”,动画似乎在颤动,它不再平滑。 当单步执行TmsAd
浏览 1
提问于2012-12-14
得票数 1
1
回答
为什么SVG滚动性能比PNG差得多?
、
、
、
、
我正在工作的一个站点在滚动对话框窗口中显示大量(>50)复杂SVG图像。当在Chrome中查看站点时,对话框窗口的滚动性能非常差--它明显滞后且缓慢。但是,如果我用PNG图像代替SVG图像,滚动是完全平滑和响应的。 下面是区别的演示: 为什么SVG滚动性能比PNG滚动性能差得多?在浏览器呈现SVG图像之后,我假设它不需要重新修改图像,直到以某种方式对图像进行操作(比如调整大小)。滚动包含SVG图像的元素是否会导致为滚动动画的每一帧重新生成图像?
浏览 0
提问于2016-01-16
得票数 11
回答已采纳
2
回答
<object>在svg路径上的定位
、
我有很多对象使用相同的svg路径,这基本上是一个箭头。我想在另一个圆形的svg路径上定位对象,这样箭头看起来就像在向外“辐射”。 我读了几篇文章,其中说使用<object>对svg提供更多的控制,但我找不到如何将<object>定位到另一个svg <object>路径(循环)。 不只是手动旋转每一个<object>,我想把它们放在一条路径上,这样在未来使它们变得更容易。我想让他们从滚动的中心移出一点,我想用路径来制作动画会更容易,而不是手动绘制每个箭头的动画。 我可以像这里的那样沿路径动画,并通过将“跟随路径”上的路径更改为一个圆,但我不想动画,
浏览 5
提问于2014-03-06
得票数 1
回答已采纳
1
回答
SVG圆-动画线段?(甜甜圈图表)
、
<svg width="210px" height="210px" viewBox="0 0 210 210" class="donut"> <circle class="donut-ring" cx="105" cy="105" r="95" fill="transparent" stroke="black" stroke-width="20"></circle> <circl
浏览 0
提问于2017-06-07
得票数 0
1
回答
如何只在元素在屏幕上播放动画
、
、
、
、
我的工作是反应,我需要知道什么时候一个元素在屏幕上播放淡出动画,并使它出现在屏幕上。因为动画总是在页面加载时播放,但是如果必须滚动以查看元素,则永远看不到动画:( <Grid container className="AnimationContainer"> <img src="/images/animation1/circle.svg" className="Animation1-1" /> <img src="/images/animation1/calculator.svg" class
浏览 4
提问于2020-09-16
得票数 1
回答已采纳
1
回答
不使用IE的动画
、
、
我为一个网站做了一个SVG徽标,我现在正试图将它动画化,它在Firefox和Chrome上工作得很好,但是由于某种原因,当我在IE上加载它时,它被视为一个正常的图像,什么也不做。此外,在边缘,它做颜色之间的转换,而不是破折号动画。我用原始的SVG代码:做了一个Fiddle。在我的页面中,我只需放置一个对象,然后嵌入外部.svg文件,如下所示: <object> <embed id="obj" src="LCF.svg"></embed> </object> 如果这个问题已经被问到了,很抱歉,但是我在问之前搜
浏览 0
提问于2016-05-08
得票数 3
回答已采纳
2
回答
使用动态属性键获取javascript对象的属性值
、
、
我目前正在做一个有很多SVG动画的项目。当用户滚动到SVG时,需要触发这些动画。 我决定为每个Snap.SVG动画创建函数,并将它们存储在一个对象数组中,使用SVG作为键,如下所示: //Example Object var item = { aboutUsSVG: function(){ //aboutUsSVG animation code to go here } } 到目前为止,我已经在这里创建了我的代码的Codepen: 我很好地创建了对象数组。我有第二个函数,当SVG出现在屏幕上时播放动画。我在使用动态键访问数组中存储的动画函数时遇到了问题。 如
浏览 0
提问于2016-07-14
得票数 0
1
回答
在页面上多次滚动的SVG textPath动画
、
、
我试图在购物主页上获得多个标题,以便在svg textPath上进行动画。我的代码加载标题,每个标题都位于自己的svg曲线路径上。但是,在滚动上只有一个标题是动画的。如何让每个标题在滚动上都有动画效果?每个标题是否需要多个window.addEventListener(‘scroll’,onScroll-n)函数? <script> console.clear(); var textPath = document.querySelector('#text-path'); var textContainer = document.querySelector(&
浏览 10
提问于2021-06-04
得票数 1
2
回答
如何在css动画之后获得元素的位置(vanilla js)
、
我正在从事一个涉及多个动画的项目,虽然大多数动画都是用css关键帧动画轻松完成的,但其他动画需要javascript,而我对如何执行这些动画感到有些困惑。我会尽我最大的努力来描述我不能在小提琴中显示的东西(我正在编码视频中的演示)。 页面中有几个部分,每个部分都有不同的元素淡入或退出、旋转等。当每个部分滚动到视图中时,就会添加一个“动画”类来触发css动画,其中一个是svg元素,从视图端口的北部降到它所在的视图的底部。但是,当用户继续向下滚动时,我需要将这个svg元素从视图以南的视图中动画化,然后在下一部分滚动到视图中时重新进入。因此,我试图得到findSection函数中元素的位置(请使用香
浏览 8
提问于2018-06-04
得票数 0
回答已采纳
1
回答
进入视口时显示svg动画
、
、
、
、
我有个问题。我在.svg-file中使用了svg动画。这很好用,如果我把它添加到<object>中,它会显示我用css做的动画。一切都好。但是这个svg不在页面的顶部,所以如果用户在那里滚动,动画就已经完成了。当然,我可以添加一个无限参数,但这看起来太疯狂了。因此,我的问题是如何在svg到达视口时触发动画。 有没有什么我还没有找到的插件,你可以在每个svg-object或者类似的插件中添加一个类?或任何其他想法如何实现这一点?它应该支持多个svg-objets在同一页上,以满足我的需求。我找不到任何用wow.js或waypoints.js做这件事的方法。谢谢!
浏览 2
提问于2016-02-17
得票数 0
1
回答
SVG模式动画
、
、
、
我在svg中定义了一个模式。我想不停地旋转它..。我不能在这个模式定义上应用动画。我把同样的动画应用到一个符号上,它可以工作,但它不能在图案上工作. <pattern id="GPattern" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(35)" >
浏览 1
提问于2015-09-30
得票数 3
回答已采纳
4
回答
当背景大小设置为100%时,为什么我的CSS滚动动画不能工作?
、
我试图实现一个CSS动画,滚动一个重复的背景图像无限。为了使滚动尽可能平滑,我希望动画在图像处于与开始时完全相同的位置时循环。为了使动画看起来很好,不管任何特定用户的视口大小,我将使用SVG图形,我希望将background-size属性设置为100%或cover关键字。 我指定的参数不能按预期工作。但是,我选择的任何其他background-size值都是这样的。 为什么我的滚动动画在background-size 100%**?**是时不能工作? 有关工作示例,请参阅或使用以下代码: <div id="element"> <h1>Scroll
浏览 6
提问于2016-01-21
得票数 1
回答已采纳
1
回答
如何在向下滚动的页面上制作圆形进度条动画
、
我有一个圆形进度条,当页面加载时它会动画,但我希望当用户向下滚动到它时它会动画,因为它将在页面的中间。现在,如果页面加载,用户看不到动画。 因此,基本上,动画应该暂停,直到用户向下滚动到某个点,一旦条形显示在视图中,动画就开始了。 我使用了这个jquery插件https://www.jqueryscript.net/loading/jQuery-Plugin-SVG-Progress-Circle.html function makesvg(percentage, inner_text = "") { var abs_percentage = Math.abs(per
浏览 16
提问于2019-05-18
得票数 3
1
回答
移动滚动动画滞后- jQuery
、
、
我试图复制一个滚动动画,我发现从脱口网站设计师Nathan ()。 通过一些小代码从html中更改svg过滤器代码中的一个属性,我已经很容易做到这一点。但问题是,当在移动平台上查看页面时,动画实际上是缓慢和滞后的。 我写的代码: html过滤器: <svg> <defs> <filter id="liquify"> <feturbulence basefrequency="0" numoctaves="3" result="warp" typ
浏览 0
提问于2018-02-12
得票数 0
回答已采纳
2
回答
Webkit动画在其下方打破SVG
、
、
、
我已经在上创建了一个示例页面 如果我在#dog元素上启用sway动画并滚动页面,我会在SVG上看到大量的条带。 如果我关闭动画(删除SVG位),条带就消失了,-webkit-animation-name看起来就像应该的那样(平滑) 有人知道是什么原因导致这个问题吗?有什么办法解决这个问题吗? 我只尝试过Webkit浏览器(Chrome,Canary,都在OSX上)
浏览 0
提问于2012-11-21
得票数 3
回答已采纳
1
回答
错误:离子旋转器有内存泄漏。
平台:All(Android/ios/等) 问题1: 当前实现不清除删除范围。这会导致记忆泄漏。旋转动画继续运行,即使纺纱机已经不在了。当范围被销毁时,动画应该停止。这也降低了滚动性能。 一旦它们被显示,然后再次隐藏,它们仍然保留在DOM中,动画和消耗CPU。过了一段时间,在Android设备上,它加热手机和运行电池非常快,特别是如果你已经加载了动画SVG在多个视图/地点,同时使用该应用。 问题2: 旋转器与无限滚动指令相结合。 光是把旋转器翻译成视域是不够的。(为什么选择这个解决方案而不是不透明?)旋转器仍然是动画,并降低了滚动性能在iOS设备上很多。即使在视线之外。
浏览 3
提问于2016-01-03
得票数 0
回答已采纳
1
回答
滚动锁定的CSS/JS动画
、
、
、
、
我试图用HTML、CSS和javascript来再现这种动画(如果需要的话,也可以使用jQuery)。 基本上,有多个svg或png层的内容和透明的区域。向下滚动时,图层通过动画化transform:translateZ rotate;属性看上去更近。在各层之间,有名字。 下面是我想象的HTML的样子 <body> <div class="layer"></div> <div class="name"></div> <div class="name">
浏览 1
提问于2017-10-22
得票数 2
回答已采纳
1
回答
如何在滚动上触发SVG动画?
、
、
因此,我终于破解了SVG动画(完全是通过欺骗),就像大多数使用SVG动画的站点一样,如果它们在页面的一半处使用,它们就会自动开始,而您却错过了它,那么如何才能触发滚动动画到div容器呢? 任何帮助都会很好, 谢谢!
浏览 1
提问于2014-03-23
得票数 0
1
回答
延迟svg onscroll动画在屏幕上显示后立即进行动画
、
、
、
、
我目前正在开发一个网站,其中我使用了一些svg技术!然而,我有一些svg图标,它们在滚动上是动画的,但它们一出现在屏幕上就会发生这种情况!问题是,我需要这些图标出现在屏幕上,而不是直接触发,我需要它等待用户滚动我多一点,然后开始动画!这是我使用的js: $(window).scroll(function() { drawLines(); }); function drawLines(){ $.each($(".red-line"), function(i, val){ var line = val; drawLine($(this), line); }); } func
浏览 17
提问于2017-07-12
得票数 0
1
回答
用于同步smil动画和svg中的音频的cat 2 JS
、
、
、
、
我使用SVG模板,我还想在其中集成html5动画。音频文件链接到SMIL动画。这只能用javascript来解决。 当音频SVG动画停止并重新启动时,问题就出现了。两者都应该只需单击一次,但没有成功,因为我不能在javacript中为SMIL动画输入两次单击,即已暂停和未暂停。 如何将这两个源连接在一起?:(您可以在站点上看到,您必须单击按钮) 我需要把 svg.addEventListener("mouseout", function() { svg.pauseAnimations(); 转到 svg.addEventListener("c
浏览 33
提问于2021-05-13
得票数 2
1
回答
用Illustrator创建的SVG文件链接到我的html并给它悬停效果的最简单方法是什么?
、
、
我探索了一些选项,比如使用object或svg标记。但是,我很困惑如何将SVG文件链接到html中,然后使用CSS对其进行动画化。 下面是我的代码示例 <div class="pull-left m-l-20 m-t-10 h3 inline-block"> <svg id="lnkLeft" class="c-dark"></svg> </div> 是否可以使用SVG标记并将图像文件链接到其中,然后使用CSS中的类进行动画?
浏览 13
提问于2017-01-23
得票数 0
回答已采纳
1
回答
如果我尝试在React Native中使用flex,则在ScrollView中不显示Svg元素
、
、
我想要一个具有Svg图形在顶部和一些文字解释它的图形下的页面。文本很长,因此页面必须能够滚动。当我在Svg元素上使用固定的宽度和高度时,它可以工作,但我想使用flex。 这是一个使用简单矩形而不是图形的示例。Svg矩形不显示: import React, { Component } from "react"; import { StyleSheet, View, Text, ScrollView} from "react-native"; import Svg,{ Rect} from 'react-native-svg'; export d
浏览 0
提问于2018-03-05
得票数 2
1
回答
滚动到使用自定义CSS3转换
、
、
我有一段代码,它使用标准的jQuery驱动动画来平滑地从页面的一个部分滚动到另一个部分(以避免页面锚中的页面跳转)。下面是: // Scroll to $('.scrollto').click(function() { var elementClicked = $(this).attr("href"); var destination = $(elementClicked).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTo
浏览 2
提问于2015-04-14
得票数 0
回答已采纳
1
回答
使用滚动条作为jquery中动画的时间轴
、
、
我试图在滚动的时候动画一个元素(一个svg),这段时间我在滚动的时候触发了动画,但是我希望滚动的时候像一个“时间线”,所以当你滚动动画的时候,但是如果你停止滚动动画暂停,如果你向上滚动,那么动画就向后走。我想就像视差卷轴一样。 我知道有一些插件可以解决这个问题,但是由于我有时间,我想知道用jquery是否可以解决这个问题。 因此,我的问题是:是否有任何方法可以用简单的jquery来完成这个任务?
浏览 3
提问于2015-04-09
得票数 0
回答已采纳
1
回答
淡出-同时滚动
当用户向下滚动时,有许多示例正在执行fadeOut完整的动画。但是,这些动画可以完成的 fadeIn或fadeOut,而不考虑用户滚动。 如果用户滚动一点点,它会褪色一点,比方说30%,其中的30%继续滚动,它会褪色30%,等等…… 我需要做一些这样的事情,但我需要一些东西来观察,开始。 有没有人有一些例子来分享使用这种效果? 附带注意:当我们向下滚动时,我需要在所有开始从顶部“离开”视图的元素上应用一个fadeOut,然后在我们再次向上滚动时生成fadeIn。这只是一个背景。我并不要求有人为我做这段代码,但我需要一个给定的适当示例的启动。 有人吗?
浏览 4
提问于2014-09-25
得票数 0
回答已采纳
1
回答
滚动中SVG路径上的动画元素
、
、
、
在普通的Javascript中,有一些相对简单的方法可以实现这一点(参见中的一种方法),但我很难让类似的东西在React中工作,特别是使用像Framer这样的动画库。 Framer的返回一个方便的scrollYProgress对象,它的“当前”属性告诉您用户当前滚动页面的百分比。 我想使用这个属性来做这样的事情:const pts = path.getPointAtLength(scrollPercentage * pathLength);,然后使用pts.x和pts.y来表示循环SVG的x和y属性--所以每次我向下滚动(或向上)页面时,圆圈的位置都会沿着SVG路径更新/动画。 我很难让它与R
浏览 4
提问于2020-07-18
得票数 1
回答已采纳
4
回答
SVG动画在IE11上不起作用
、
、
、
我有一个非常简单的加载动画,可以在火狐和Chrome上完美地工作,但在IE11中它不能显示SVG图形。 下面是完整的示例: SVG: <svg class="circular-loader" viewBox="25 25 50 50"> <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10&
浏览 0
提问于2015-11-20
得票数 30
1
回答
如何滚动到视图中,svg路径动画的一部分?
、
、
、
我有一个svg动画在一个反应应用程序,如下所示: path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: dash 5s linear forwards; } @keyframes dash { 100% { stroke-dashoffset: 0; } } <svg width="100%" height="100%" viewBox="0 0 1303 1746" fill="none" xmlns="htt
浏览 0
提问于2022-03-15
得票数 1
1
回答
使用jquery/javascript触发svg动画
、
、
、
、
我有一个.svg文件,它使用animateMotion动画地移动一个圆。问题是我在页面底部使用jquery加载文件。当用户向下滚动时,动画已经播放。我很乐意使用它来触发.svg中的animateMotion。 我们非常欣赏他们的想法和想法。
浏览 2
提问于2014-04-01
得票数 1
1
回答
在ScrollTrigger GSAP水平滚动中动画化子元素
、
、
、
、
我有一个svg,它构成了我的horizontal滚筒的基础。 在这个svg中,我将类.animate添加到元素中,当项目进入视图时,我希望将这些元素淡入其中。用于引用的.animate类已添加到svg中的所有文本项中。 目前,只有视图中的.animate元素开始淡入up。当我向下滚动继续滚动时,其他元素是静态的。他们没有衰退,或translating上升或下降,以任何方式? TL;DR,以下是我正在努力实现的目标: 当滚轴引脚就位,用户继续向下滚动时,开始褪色.horizontalScroller__intro。 一旦.horizontalScroller__intro消失了,启动.h
浏览 36
提问于2022-01-31
得票数 4
回答已采纳
0
回答
当元素垂直居中时,在滚动中添加内联CSS
、
、
、
我有一个带有CSS动画元素的SVG。使用动画播放状态,我将它们保持在暂停状态,使用jQuery或JavaScript,我想将其更改为仅当SVG在滚动上垂直居中时才运行。 我的想法是获取.paused类,让它们都暂停,并用前面提到的内联CSS重写它。
浏览 7
提问于2017-06-12
得票数 0
1
回答
滚动以使jquery中的选定锚点具有动画效果
、
我有一个简单的JS功能,即动画页面滚动到选定的锚由id 我的页面中的所有锚点都有不同的偏移值和位置提示:我的用户砖石效果,但不能正常工作 function scrollToAnchor(aid) { var aTag = $("a[id='" + aid + "']"); $('html,body').animate({ scrollTop: aTag.position().top }, 'slow'); }
浏览 0
提问于2012-10-19
得票数 0
1
回答
获取容器中的滚动位置
、
我正在尝试做一个动画svg,我需要知道我的div上的滚动位置,我已经从复制了一些代码 问题是,我想让scroll在进入div元素时开始计数,下面是我所做的代码: var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); console.log($(".svg-container").scrollT
浏览 3
提问于2016-10-11
得票数 2
1
回答
JavaScript和svg基
、
、
我有一个问题,关于JavaScript与svg的结合。我试图动画的不透明度在JavaScript。我知道我可以用CSS或者用svg的动画来做,但是我想学习JavaScript,所以我决定这么做。我使用的是setInterval,如果我要下降(从1降到0),它工作得很好。部分"sphere.style.opacity =不透明- opac;“工作正常!但是如果我把减号改为加法动画就不起作用了。不是从0到1!我还是不明白。这是最基本的,我不明白。当然,我会更改CSS中的值。有人知道答案吗? HTML: <svg height="99.7%" width="99
浏览 5
提问于2015-10-29
得票数 0
回答已采纳
1
回答
用snap动画svg
、
、
、
我看了很多关于snap.svg的博客文章,都讨论了如何绘制和动画。没有人有关于动画现有svg的信息。 如何使现有的svg动画化?我需要如何将它包含在页面中? 我可以直接使用还是需要使用 有谁有使用现有svg并将其动画化的示例吗? 请注意,我不想将svg源代码包含在页面中,而是链接到文件本身。
浏览 1
提问于2015-08-29
得票数 1
1
回答
页面加载后不使用动态创建的元素的SVG动画
、
、
、
、
我正在使用javascript动态创建svg元素及其内容,并将其添加到div我的网页中。 我想重新绘制的svg上的窗口大小,然而,元素正在重新绘制,但与他们附加的动画没有重新启动,即使在这些元素被重新创建! 不管我做什么,动画只是在页面加载时触发。 我在“调整大小”事件上尝试了以下操作: 清空svg,并重新创建其中的元素-动画在页面加载时工作,在娱乐时不触发。 添加新的动画元素与相同的动画再次到现有的元素-无论多个动画精灵出现在svg元素中,如rect,他们不是动画! 删除整个svg!3:)并从头开始重新创建所有内容(包括svg元素并附加到容器div )--这似乎在
浏览 3
提问于2014-02-12
得票数 1
1
回答
在滚动上显示svg动画
、
、
我有一个动画svg,它紧跟在一个大的标题图像之后(它占据了100%的视口)。 页面一加载,动画就会立即开始,但我想只在用户滚动到页面的特定部分时才触发它。 我知道有像这样的插件,但是,我不知道,它是为animate.css优化的,我找不到一种方法让它在我的代码中工作。 我也被卡住了。我在页面底部添加了js代码,在svg中添加了data-scroll-reveal属性,然后图像就消失了。 有人能帮上忙吗?
浏览 5
提问于2014-10-11
得票数 1
1
回答
GSAP:在动画SVG时保留以前的转换
、
、
、
我正在制作一个小的互动网站使用滚动魔术和GSAP动画SVG元素。 但是,当动画化具有旋转()转换的元素的y值时,转换将被删除。将旋转添加到动画中并不能产生正确的结果;旋转被从动画中移除,然后再次动画化。 有人知道如何在GSAP中动画其他属性时保留SVG元素的旋转吗? 示例代码: html: <svg height='300px' width='500px' style='position: absolute;'> <rect id='rect' width='200' height=
浏览 7
提问于2015-10-26
得票数 0
回答已采纳
2
回答
点击SVG动画
、
、
、
我正在尝试创建一个SVG动画,当一个元素被单击时,它会平滑地模糊,然后在再次单击时平滑地取消它(并且与每次单击保持这样的交替)。 所以我有以下SVG: <?xml version="1.0" standalone="no"?> <svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
浏览 8
提问于2014-06-11
得票数 0
回答已采纳
1
回答
仅在Firefox中在路径上动画的SVG文本
、
、
、
我试图用SVG文本来解决一个问题,这个文本应该在路径上被动画化。 我想要做的是在上展示(必须在火狐中打开) 此SVG的代码可在以下位置获得: 问题 除了Firefox,我无法让它在任何其他浏览器中工作。在Safari (macOS)中,文本位于自身之上。在Chrome中,根本没有文本。 在Firefox中,在动画过程中“丢弃”最后一个字母是个小问题--你可以在路径的左上角看到。 谢谢你的帮助!
浏览 10
提问于2022-09-27
得票数 0
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
程序猿必备的10款web前端动画插件二
在 Node.js 中转换 SVG 图像格式每日前端夜话0xAD
救救我吧,动画按钮到底在哪里啊?
2019年 值得收藏的 15 个 JavaScript 和 CSS 动画库
Mac上HTML5网页设计
热门
标签
更多标签
云服务器
ICP备案
实时音视频
对象存储
云直播
活动推荐
运营活动
广告
关闭
领券