-1
私はマウスの後ろにgreensockで作った小さなプリローダーを持っていますが、アニメーションの後に大きくなるとマウスに追いつくのをやめてもらいたいのですが、 greensockもjQuery/javascriptもありません。 特定の時間の後に機能を停止する
var self = this;
self.hello = 'hello';
var $fade = $('.fade-bounce');
var $circle = $('.icon');
var movementTimer = null;
TweenMax.to($circle, 3, {
repeat: 2,
rotation: 760,
transformOrigin: "50% 50%",
ease: Bounce.easeOut,
margin: " 0 auto"
});
TweenMax.to(
$circle, 500, {
repeat: -1,
rotation: 50,
delay: 7
});
TweenMax.to(
$circle,
1, {
width: "800vh",
overflow: "hidden",
delay: 7,
y: "-50%",
transformOrigin: "50% 50%",
x: "-50%",
ease: Quad.easeInOut
});
TweenMax.staggerFrom($fade,
1, {
opacity: 0,
scale: 0.1,
delay: 8,
ease: Bounce.easeOut
}, 1.1);
$(window).on('mousemove', moveCircle);
function moveCircle(e) {
TweenLite.to($circle, 0.2, {
css: {
left: e.pageX,
top: e.pageY
}
});
}$color1:#3f88c5;
body {
overflow: hidden;
height: 100vh;
}
.bg-home {
background-color: $color1;
text-align: center;
width: 100%;
height: 100vh;
margin: 0 auto;
position: absolute;
}
.icon-holder {
margin: 0 auto;
text-align: center;
width: 100%;
height: 100vh;
padding: 0;
z-index: 4;
position: absolute;
}
.icon {
margin: 20px auto;
opacity: 1;
position: absolute;
z-index: 3;
text-align: center;
padding: 0;
width: 30px;
overflow: scroll;
}
.st0 {
fill: #F6A900;
}
.st1 {
fill: #F9CC00;
}
.bigM {
position: relative;
z-index: 2;
width: 100%;
height: 100vh;
display: block;
margin: 0 auto;
background-position: center;
background-size: contain;
padding-top: 20%;
img {
width: 100%;
height: auto;
margin: 0 auto;
}
}
.contentInlog {
width: 100%;
height: 100vh;
position: absolute;
margin: 0 auto;
top: 0;
z-index: 4;
opacity: 1;
}
.win {
position: relative;
z-index: 5;
width: 600px;
height: 400px;
margin: 0 auto;
margin-top: 60px;
margin-bottom: 0px;
top: 0;
margin-bottom: 0;
background-image: url(' ../img/hoofdtekst.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.logo {
position: relative;
z-index: 5;
width: 300px;
height: 300px;
margin: 0 auto;
top: 0;
background-image: url(' ../img/logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.fade-bounce {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<section id="home">
<div class="bg-home"></div>
<div class="icon-holder small-12 columns">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<circle class="st0" cx="199.5" cy="199.7" r="191.1" />
<path class="st1" d="M199.8 390.8l1-191.1c2.3 0-2.3 0.3 0 0l26.1 189.2C218 390.1 208.8 390.8 199.8 390.8zM172.7 388.9c-9-1.3-18-3.2-26.7-5.8l54.8-183.5c2.2 0.6-2.3-0.3 0 0L172.7 388.9zM253.6 383.1l-52.8-183.4c2.2-0.6-2.1 0.9 0 0l78.4 173.8C270.9 377.3 262.3 380.5 253.6 383.1zM120.4 373.6c-8.3-3.8-16.3-8.2-24-13.1l104.3-160.8c1.9 1.2-2.1-1 0 0L120.4 373.6zM303.1 360.4L200.8 199.7c1.9-1.2-1.8 1.5 0 0l124.1 144.4C318 350 310.7 355.5 303.1 360.4zM74.6 344.2c-6.8-5.9-13.3-12.4-19.2-19.2l145.4-125.3c1.5 1.8-1.8-1.5 0 0L74.6 344.2zM344.1 324.8L200.8 199.7c1.5-1.8-1.2 1.9 0 0L360.5 303C355.6 310.6 350.1 318 344.1 324.8zM39 303.2c-4.9-7.6-9.3-15.7-13.1-23.9l174.8-79.6c0.9 2.1-1.2-1.9 0 0L39 303.2zM373.6 279.1l-172.8-79.4c0.9-2.1-0.6 2.2 0 0l182.4 53.8C380.6 262.2 377.3 270.8 373.6 279.1zM16.3 253.7c-2.6-8.7-4.5-17.7-5.8-26.7l190.2-27.3c0.3 2.3-0.6-2.2 0 0L16.3 253.7zM388.9 226.8l-188.1-27.1c0.3-2.3 0 2.4 0 0l0 0 190-0.3v0.3C390.8 208.7 390.2 217.8 388.9 226.8zM8.6 199.8v-0.1c0-9 0.6-18 1.9-26.9l190.3 26.9c-0.3 2.3 0-2.3 0 0L8.6 199.8zM200.8 199.7C200.4 197.4 201.4 201.8 200.8 199.7L383 145.5c2.6 8.7 4.5 17.7 5.8 26.7L200.8 199.7zM200.8 199.7L16.2 146.1c2.5-8.7 5.8-17.4 9.5-25.6L200.8 199.7C199.8 201.7 201.4 197.5 200.8 199.7zM200.8 199.7C199.8 197.6 202 201.6 200.8 199.7L360.2 96c4.9 7.6 9.3 15.7 13.1 23.9L200.8 199.7zM200.8 199.7L38.8 96.5c4.9-7.6 10.4-15 16.3-21.8L200.8 199.7C199.2 201.4 202 197.7 200.8 199.7zM200.8 199.7C199.2 197.9 202.5 201.2 200.8 199.7L324.6 55c6.8 5.9 13.3 12.4 19.3 19.2L200.8 199.7zM200.8 199.7L74.3 55.4c6.8-5.9 14.2-11.4 21.8-16.4L200.8 199.7C198.8 200.9 202.5 198.1 200.8 199.7zM200.8 199.7C198.8 198.4 202.8 200.6 200.8 199.7l78.1-174c8.3 3.8 16.3 8.2 24 13.1L200.8 199.7zM200.8 199.7L120 25.9c8.3-3.8 16.9-7 25.6-9.6L200.8 199.7C198.6 200.3 202.8 198.7 200.8 199.7zM200.8 199.7C198.6 199 203 200 200.8 199.7l25.7-189.2c9 1.3 18 3.2 26.7 5.7L200.8 199.7zM200.8 199.7L172.3 10.5c8.9-1.3 18-1.9 27.1-2L200.8 199.7C198.4 199.7 203 199.3 200.8 199.7z"
/>
</svg>
</div>
<div class="bigM small-12 large-10 columns ">
<img ng-src="img/BigM.png" width="80%" height="auto">
</div>
<div class="contentInlog">
<div class="win small-12 large-10 columns fade-bounce">
</div>
<div class="logo small-12 large-10 fade-bounce"></div>
<form>
<!-- <section class="content">
<span class="input input--jiro">
\t \t \t \t \t <input class="input__field input__field--jiro" type="text" id="input-10" />
\t \t \t \t \t <label class="input__label input__label--jiro" for="input-10">
\t \t \t \t \t \t <span class="input__label-content input__label-content--jiro">Voer u email in</span>
</label>
</span>
<span class="input input--jiro">
\t \t \t \t \t <input class="input__field input__field--jiro" type="text" id="input-11" />
\t \t \t \t \t <label class="input__label input__label--jiro" for="input-11">
\t \t \t \t \t \t <span class="input__label-content input__label-content--jiro" value="dd/mm/yy">Wat is u geboortedatum?</span>
</label>
</span>
\t \t \t \t <span class="input input--jiro">
\t \t \t \t \t <input class="input_submit" type="submit" value="DOE MEE" id="input-12" />
</span>
</section> -->
</form>
</div>
</section>
質問の中にあなたのコードを投稿してください。 CodePenがダウンした場合、この質問は返答されません。 –
コールバックを使用してください：http://stackoverflow.com/questions/15815648/tweenmax-callback-being-executed-before-the-animation-end – mplungjan
ありがとうRory私は質問、それは動作しませんmousemouve関数でコールバック関数を格納している使用しているのエラーが表示されます： –