CODEWITHSUNDEEP
javascriptjquerycssanimationeffect
timmaktu
timmaktu

Reputation: 163

animation like ning home page in jquery/JS/css?

how to create animation effect like ning home page (http://www.ning.com/) in jquery/JS/css? Iam talking about the curtain like animation for the text "Build and cultivate your own community of followers/fans/members/customers etc". Its a span element with class of "word"

Upvotes: 0

Views: 584

Answers (3)

Mark S
Mark S

Reputation: 3799

You can create an array of words then loop through the array index with setInterval and use jQuery slideUp - slideDown for the animation.

html:

<p>Build and cultivate your own community of</p>
<div id="word">customers</div>

script:

var words = ['followers', 'fans', 'members', 'customers'];
var index = 0;//start with 0, first array index is 0
var $word = $('#word');

setInterval(function () {  
    if (index == words.length) {
        //if current index is equal to the arrays length reset it to 0
        index = 0;
    }
    //slideUp to hide
    $word.slideUp(500, function () {
     //on animation complete hidden change the text then slideDown to show
        $word.text(words[index]).slideDown(500);
        /*
        It's always a good practice to separate increment/decrement 
        in a single line, as it might confuse some(especially new) programmers
        */
        index++;
    });   
}, 2000);

See this jsfiddle.

You can use <span> but it will create a different effect because <span> is an inline element (check this jsfiddle). You need to set it to display:block to achieve the desired effects - jsfiddle demo.

Upvotes: 1

aztechy
aztechy

Reputation: 640

Here's a solution. Made possible through the use of jQuery slideUp() and slideDown(). Additionally to allow for the animation to run every few seconds, I employed standard javascript setInterval().

HTML & JS

<!DOCTYPE html>
<html>

  <head>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  </head>

  <body>
    <h1>Build something...</h1>
    <h1 id="marqueeText">Testing</h1>

    <button id="foo">Foo</button>
    <script>
      $(document).ready(function() {

        // Drumroll, the main function that will start the rolling text.
        var drumrollPlease = function() {
          var index = 0;
          var words = ['Awesome', 'Fun', 'Amazing'];
          var marquee = $('#marqueeText');

          // Key part here.  This is the heart of the script, where your words will get rotated through,
          // animating with slideup/slidedown and changing out your words based on the above words array.
          window.setInterval(function () {
            // Reset to the beginning once we reach end of our words list.
            if (index >= words.length) {
              index = 0;
            }
            // Set the marquee container to slide, update the word in our marquee container and then slide back down to reveal 
            // the new word.
            marquee.slideUp('slow', function() {
              marquee.html(words[index++]);
              marquee.slideDown();
            });
          }, 2000); // Modify this duration in milliseconds as you please.
        }

        // I bound my button foo to illustrate how to trigger it.  I could
        // just as easily have called drumrollPlease() to have the function auto run 
        // when the document was in the ready state.
        $('#foo').click(function() {
          drumrollPlease();
        });
      });
    </script>
  </body>

</html>

See button activated plunker version: HERE

See automatic activated plunker version: HERE

Upvotes: 1

Subash Selvaraj
Subash Selvaraj

Reputation: 3385

You can use TweenlitMax

Includes

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/plugins/TextPlugin.min.js"></script>

HTML

<div>Build and cultivate your own community of</div>
<div id="compatibility">Followers</div>

Css:

#compatibility{
    width:200px; 
    font-size:20px;
    height:100px;
    display:inline-block;
    overflow:hidden;
    position:absolute;
    font-weight:bold;
}

JS:

$(document).ready(function(){
    var tl = new TimelineLite({onComplete:onAnimationComplete});
    text = $("#compatibility");
    tl.fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0})
      .set(text,{text:"fans"})
      .fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0})
      .set(text,{text:"members"})
      .fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0});
    function onAnimationComplete(){
        tl.restart();
    }
});

Check Fiddle

Upvotes: 0

Related Questions