Geek Answers Handbook

JQuery animation spinning words

I want to create a typography effect and want to rotate part of the sentence. I tried using jQuery animation.

I want to revive the word. 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>
+7
source share
2 answers

jQuery does not support CSS3 animations. You need to either animate purely with CSS, or use jQuery to replace the CSS classes that cause the CSS animation effect, or quickly increase the built-in CSS3 animation property on the element (for example, how animation works in jQuery).

Eg.

 var x=0, timer=1; //Change timer to change FPS setInterval(function() { x++; $('#myelement').css('-webkit-transform', 'scale(' + x + ')'); }, timer);
+1
source

One good way is to use css: by changing the 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 of course you can also use jQuery (but it will 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>
0
source

More articles:


All Articles