Ok I have seen several sites with some text animations, and have been unable to locate anyway of accomplishing this on my site.. if you go here https://www.battlefield.com/
the text is animated however not sure what the text is using. how can I animate text simple fade transition like on the above site.
example
line 1 hello line 2 welcome line 3 to our community
etc
What they did, is strange, and I have no idea why they did it that way.
Have a look at that URL:
This is only one of ~110 full sized images (just change the sequence number in the filename) they load into the page and then ... playback manually. That means, they update the image source ~15-20 times per second via javascript. That explains the flickering image at the beginning, when the images are being loaded for the first time... Maybe they even liked that effect.
So it is not an animated PNG, it is no multimedia content, it is just about 100 frames that manually get assigned to the image.
You may want to inspect the page, search for an element with the tag <bf-animated-sequence>. It contains some sub elements, one of them is the image that gets its src changed several times a second.
And - please - don't follow their example, for the sake of your viewers. There are much better ways to do that (canvas, video playback, whatever).
For the text-animation, I recommend reading the jquery animate api: http://api.jquery.com/animate/
[edit] With jquery you can do something like this:
$(function(){
var $texts = $("#textfield .text");
var textIndex = 0;
function nextLine(){
//Step 1: Fade in text
$($texts[textIndex]).animate({opacity:1,"margin-top":12}, 500, "linear", function(){
//Step 2: Fade out text
setTimeout(function(){
$($texts[textIndex]).animate({opacity:0,"margin-top":20}, 500, "linear", function(){
//Step 3: Reset current and call next text
$($texts[textIndex]).css({"margin-top":20});
textIndex++;
textIndex %= $texts.length;
nextLine();
});
}, 3000);
});
}
nextLine();
}); #textfield{
border:1px solid black;
height:40px;
position:absolute;
left:10px;
right:10px;
top:20px;
overflow:hidden;
}
#textfield .text{
position:absolute;
text-align:center;
width:100%;
margin-top:20px;
font-family:Arial;
opacity:0;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textfield">
<div class="text">Hello</div>
<div class="text">Welcome to</div>
<div class="text">our site</div>
</div>
fadeIn and fadeOut. In the css display:none is not longer used but opacity:0, Also, the margin-top values have been adapted.You can achieve this with a CSS3 keyframes animation (I'd strongly suggest you to consider going this route, it will be much lighter resource consumption-wise):
* {
padding: 0;
margin: 0;
box-sizing: boder-box;
}
.animateText div {
position: absolute;
box-sizing: border-box;
width: 100%;
top: 30px;
font-size: 24px;
text-align: center;
animation: blurFadeInOut 2s ease-in backwards;
}
.animateText div.line-1 {
animation-delay: 0s;
opacity: 0;
}
.animateText div.line-2 {
animation-delay: 2s;
opacity: 0;
}
.animateText div.line-3 {
animation-delay: 4s;
opacity: 0;
}
@keyframes blurFadeInOut {
0% {
opacity: 0;
top: 30px;
}
20%,
75% {
opacity: 1;
top: 20px;
}
100% {
opacity: 0;
top: 10px;
}
}<div class="animateText">
<div class="line-1">Hello</div>
<div class="line-2">Welcome</div>
<div class="line-3">To our community</div>
</div>You will have to play with the settings but I believe this could point you closer in the right direction.
https://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations
