Reputation: 9474
I want to create a typography effect and want to rotate a part of sentence. I have tried using jQuery animations.
I want to animate word up. Here is my code
window.setInterval(function() {
$("#tchange").animate({
"top": "-=15px"
}, 100).fadeOut("fast");
$('#tchange').text("Xyz").css('top', '-10px').slideDown("slow");
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">
Get on the Current Release.<br>
Boost your
<span id="tchange">
Competitiveness
</span>
</h1>
Upvotes: 7
Views: 3139
Reputation: 4477
One good way is by using css:
by changing opacity
and rotate
properties.
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 18s linear infinite 0s;
-moz-animation: rotateWord 18s linear infinite 0s;
-o-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #8d6b9d;
}
@keyframes rotateWord {
0% {
opacity: 0;
transform: rotate(0deg);
}
2% {
opacity: 1;
transform: transform: rotate(10deg);
}
5% {
opacity: 1;
transform: transform: rotate(20deg);
}
17% {
opacity: 0.5;
transform: transform: rotate(30deg);
}
25% {
opacity: 0;
transform: rotate(90deg);
}
70% {
opacity: 0;
transform: rotate(180deg);
}
100% {
opacity: 0;
transform: rotate(275deg);
}
}
<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
<span>Competitiveness</span>
<span>abc</span>
<span>def</span>
<span>ghi</span>
<span>jkl</span>
</div>
</h1>
but, ofcourse you can use jQuery too (but it wil use more memory):
var degrees = 0,
timer = 1; //Change timer to change FPS
setInterval(function() {
if (degrees < 359) {
degrees++;
} else {
degrees = 0;
}
$('.rw-words-1 span').css('transform', 'rotate(' + degrees + 'deg)'); //.css('opacity',degrees/359+'');
}, timer);
.rw-words {
display: inline;
text-indent: 10px;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 18s linear infinite 0s;
-moz-animation: rotateWord 18s linear infinite 0s;
-o-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #8d6b9d;
}
@-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
}
5% {
opacity: 1;
}
17% {
opacity: 0.5;
}
20% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
}
5% {
opacity: 1;
}
17% {
opacity: 0.5;
}
20% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-o-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
}
5% {
opacity: 1;
}
17% {
opacity: 0.5;
}
20% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
}
5% {
opacity: 1;
}
17% {
opacity: 0.5;
}
20% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 1;
}
5% {
opacity: 1;
}
17% {
opacity: 0.5;
}
25% {
opacity: 0;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
<span>Competitiveness</span>
<span>abc</span>
<span>def</span>
<span>ghi</span>
<span>jkl</span>
</div>
</h1>
Upvotes: 0
Reputation: 3016
jQuery does not support CSS3 animating. You'll need to either animate purely with CSS, use jQuery to swap CSS classes causing the CSS animation effect or quickly increment the inline CSS3 animation property on the element (like how animating in jQuery actually works).
Eg.
var x=0, timer=1; //Change timer to change FPS
setInterval(function() {
x++;
$('#myelement').css('-webkit-transform', 'scale(' + x + ')');
}, timer);
Upvotes: 1