CODEWITHSUNDEEP
javascriptjquery
Case
Case

Reputation: 281

Jquery / javascript text animation

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

Upvotes: 0

Views: 1121

Answers (3)

Psi
Psi

Reputation: 6793

What they did, is strange, and I have no idea why they did it that way.

Have a look at that URL:

https://media-www-battlefieldwebcore.spark.ea.com/content/dam/ea/battlefield-portal/sequence/BF1_Animated_Logo_94.png

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>

Upvotes: 4

Syden
Syden

Reputation: 8625

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>

Upvotes: 1

Ty T.
Ty T.

Reputation: 586

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

Upvotes: 1

Related Questions