UpWords

flying text

by jury1

HTML

<div id="flyingBox_0">↑ UpWords ↑</div>
<div id="flyingBox_1">↑ SEO ↑</div>
<div id="flyingBox_2">↑ Marketing ↑</div>
<div id="flyingBox_3">↑ Designer ↑</div>
<div id="flyingBox_4">↑ 3D ↑</div>
<div id="flyingBox_5">↑ Coding ↑</div>

CSS

#flyingBox_0 {
   width: 100%;
   opacity: 0;
   position: absolute;
   bottom: 0;
   text-align: left;
 }

 #flyingBox_1 {
   width: 100%;
   opacity: 0;
   position: absolute;
   bottom: 0;
   text-align: left;
   margin-left: 20%;
 }

 #flyingBox_2 {
   width: 100%;
   opacity: 0;
   position: absolute;
   bottom: 0;
   text-align: left;
   margin-left: 40%;
 }

 #flyingBox_3 {
   width: 100%;
   opacity: 0;
   position: absolute;
   bottom: 0;
   text-align: left;
   margin-left: 60%;
 }

 #flyingBox_4 {
   width: 100%;
   opacity: 0;
   position: absolute;
   bottom: 0;
   text-align: left;
   margin-left: 80%;
 }

 #flyingBox_5 {
   width: 100%;
   opacity: 0;
   position: absolute;
   bottom: 0;
   text-align: right;
 }

JavaScript

$(document).ready(function() {


  var timerId = setInterval(function() {
    // first element
    $("#flyingBox_0").animate({
      "opacity": "0.5",
      "bottom": "100%"
    }, 6250, function() {
      $(this).fadeOut(300);
      $(this).css({
        "opacity": "0",
        "bottom": "0"
      });

    });
    $("#flyingBox_0").css("display", "block");

    // end element 
    // first element
    $("#flyingBox_1").animate({
      "opacity": "0.5",
      "bottom": "100%"
    }, 5250, function() {
      $(this).fadeOut(400);
      $(this).css({
        "opacity": "0",
        "bottom": "0"
      });

    });
    $("#flyingBox_1").css("display", "block");

    // end element 
    // first element
    $("#flyingBox_2").animate({
      "opacity": "0.5",
      "bottom": "100%"
    }, 8250, function() {
      $(this).fadeOut(400);
      $(this).css({
        "opacity": "0",
        "bottom": "0"
      });

    });
    $("#flyingBox_2").css("display", "block");

    // end element 
    // first element
    $("#flyingBox_3").animate({
      "opacity": "0.5",
      "bottom": "100%"
    }, 7250, function() {
      $(this).fadeOut(400);
      $(this).css({
        "opacity": "0",
        "bottom": "0"
      });

    });
    $("#flyingBox_3").css("display", "block");

    // end element 
    // first element
    $("#flyingBox_4").animate({
      "opacity": "0.5",
      "bottom": "100%"
    }, 9250, function() {
      $(this).fadeOut(400);
      $(this).css({
        "opacity": "0",
        "bottom": "0"
      });

    });
    $("#flyingBox_4").css("display", "block");

    // end element 
    // first element
    $("#flyingBox_5").animate({
      "opacity": "0.5",
      "bottom": "100%"
    }, 9250, function() {
      $(this).fadeOut(400);
      $(this).css({
        "opacity": "0",
        "bottom": "0"
      });

    });
    $("#flyingBox_5").css("display", "block");

    // end element 

  }, 2000); // начать повторы с интервалом 3 сек

});