Javascript 格林斯托克动画未按预期工作
我正在尝试按以下顺序使用介绍文本和箭头设置介绍页面的动画: 背景图像前后移动两次。之后,箭头应从1缩放到1.5,并重新缩放到原始大小 简介文本还应缩放至1.5,并重新缩放至其原始大小 由于某些原因,箭头和文本从一开始就被缩放为1.5,如何在背景图像信息仍在运行时保留箭头和文本的大小 以下是迄今为止的代码:Javascript 格林斯托克动画未按预期工作,javascript,css,animation,gsap,Javascript,Css,Animation,Gsap,我正在尝试按以下顺序使用介绍文本和箭头设置介绍页面的动画: 背景图像前后移动两次。之后,箭头应从1缩放到1.5,并重新缩放到原始大小 简介文本还应缩放至1.5,并重新缩放至其原始大小 由于某些原因,箭头和文本从一开始就被缩放为1.5,如何在背景图像信息仍在运行时保留箭头和文本的大小 以下是迄今为止的代码: <html> <head> <meta name="viewport" content="width=device-width, initial-scal
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta charset="utf-8">
<style type="text/css">
.intro-text {
display: block;
font-size: 16px !important;
text-transform: uppercase;
font-weight: bold;
position: fixed;
top: 50%;
right: 140px;
z-index: 99;
color: red;
}
.intro-arrow {
display: block;
font-size: 16px !important;
text-transform: uppercase;
font-weight: bold;
position: fixed;
top: 45%;
right: 70px;
z-index: 99;
color: white;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js" crossorigin="anonymous"></script>
<script>
var tl = new TimelineMax();
tl
.fromTo("body", 0.5, {x:-15}, {x:0})
.fromTo("body", 0.5, {x:-15}, {x:0})
.fromTo('.intro-arrow', 0.5, {scale: 1},{scale: 1.5})
.fromTo('.intro-arrow', 0.5, {scale: 1.5},{scale: 1})
.fromTo('.intro-text', 0.5, {scale: 1}, {scale: 1.5})
.fromTo('.intro-text', 0.5, {scale: 1.5}, {scale: 1})
</script>
</head>
<body>
<div class="container" style="height:100vh; background-image: url('http://rheinmainsport.de/images/news/boxcamp.png')">
<div class="intro-text">Here some intro text</div>
<div class="intro-arrow">
<span class="SVGInline"><!--?xml version="1.0" encoding="UTF-8"?-->
<svg class="SVGInline-svg" width="59px" height="130px" viewBox="0 0 59 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
<title>Fill-1</title>
<desc>Created with Sketch.</desc>
<g id="Main-Story" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Arrow" transform="translate(-166.000000, 0.000000)" fill="#ff0000" fill-rule="nonzero">
<g id="icon/arrow/x-large/white" transform="translate(166.000000, 0.000000)">
<path d="M2.2131,130.025 L0.0001,128 L54.7241,68.21 C56.3381,66.446 56.3381,63.578 54.7241,61.815 L0.0001,2.025 L2.2131,0 L56.9371,59.789 C59.5731,62.669 59.5731,67.355 56.9371,70.235 L2.2131,130.025 Z" id="Fill-1"></path>
</g>
</g>
</g>
</svg>
</span>
</div>
</div>
</body>
</html>
.简介文本{
显示:块;
字体大小:16px!重要;
文本转换:大写;
字体大小:粗体;
位置:固定;
最高:50%;
右:140px;
z指数:99;
颜色:红色;
}
.intro arrow{
显示:块;
字体大小:16px!重要;
文本转换:大写;
字体大小:粗体;
位置:固定;
最高:45%;
右:70px;
z指数:99;
颜色:白色;
}
var tl=新的TimelineMax();
热释光
.fromTo(“body”,0.5,{x:-15},{x:0})
.fromTo(“body”,0.5,{x:-15},{x:0})
.fromTo('.intro arrow',0.5,{scale:1},{scale:1.5})
.fromTo('.intro arrow',0.5,{scale:1.5},{scale:1})
.fromTo('.intro text',0.5,{scale:1},{scale:1.5})
.fromTo('.intro text',0.5,{scale:1.5},{scale:1})
这里有一些介绍文字
填充-1
用草图创建。
关于代码笔
这是因为您正在使用
.fromTo()
设置动画.from()
和.fromTo()
默认情况下将immediatender
设置为true
(因为通常这是人们想要的)。您可以为导致缩放问题的二者设置immediater
为false
或者,只需使用.to()调用即可。使用repeat
和yoyo
也可以让你的工作更轻松。我将如何以GSAP 3格式编写:
var tl = gsap.timeline();
tl
.fromTo("body", {x: -15}, {x: 0, repeat: 1})
.to('.intro-arrow', {scale: 1.5, repeat: 1, yoyo: true})
.to('.intro-text', {scale: 1.5, repeat: 1, yoyo: true})
由于GSAP 3中的默认值为0.5,因此可以省略持续时间。如果要更改tween的持续时间,建议将其放入vars参数中,如duration:1
我们强烈推荐这篇文章,因为你可以学到很多类似的东西:)
我们还强烈推荐您,因为您可以从GSAP和web动画专家那里获得快速、高质量的帮助。这是因为您正在使用
.fromTo()
制作动画.from()
和.fromTo()
默认情况下将immediatender
设置为true
(因为通常这是人们想要的)。您可以为导致缩放问题的二者设置immediater
为false
或者,只需使用.to()调用即可。使用repeat
和yoyo
也可以让你的工作更轻松。我将如何以GSAP 3格式编写:
var tl = gsap.timeline();
tl
.fromTo("body", {x: -15}, {x: 0, repeat: 1})
.to('.intro-arrow', {scale: 1.5, repeat: 1, yoyo: true})
.to('.intro-text', {scale: 1.5, repeat: 1, yoyo: true})
由于GSAP 3中的默认值为0.5,因此可以省略持续时间。如果要更改tween的持续时间,建议将其放入vars参数中,如duration:1
我们强烈推荐这篇文章,因为你可以学到很多类似的东西:)
我们还强烈推荐您,因为您可以从GSAP和网络动画专家那里获得快速、高质量的帮助。。非常感谢Zach Saucier!你的解决方案看起来很棒!非常感谢Zach Saucier!你的解决方案看起来很棒!