Define Hight and Width of Text after animation

The below code animates the text “hello Your World” on load every thing Seems to be fine but when it is returning to the left panel i want “After Zooming out to the left panel am unable to define the hight width and the Font size as it is in javascript “

jsfiddle

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <span class="theText">
        H<span>ello</span>
  <span class="placeholder"></span>
  Y<span>our</span>
  <span class="placeholder"></span>
  W<span>orld</span>
  </span>
</div>

JavaScript:

 window.onload = function() {

$(function() {
  FixMargins();

var phWidth = $(".placeholder").width();
var height = $(".container").height();
containerHeight = $(".theText").height();
var newTopMargin = (height - containerHeight) / 2;

$(".theText").animate({
  transform: 2
}, {
  step: function(now, fx) {
    var newscale = 1 + +now;
   $(this).css({
     'transform': "scale(" + newscale + "," + newscale + ")",
               "opacity":-1 + now
               });
    $(this).css("margin-top",-150 + (newTopMargin+150) / 2 * now);
    $(".placeholder").css({
      "width": phWidth - phWidth * now/2
    });
    FixMargins();
  },
  duration: 3000
}).promise().done(function() {
  $(this).delay(3000);
  var textTop = $(".theText").css("margin-top").split('p')[0];
  var textLeft = $(".theText").css("margin-left").split('p')[0];
  $(this).animate({
    transform: 2
  }, {
    step: function(now, fx) {
      console.log(textLeft - textLeft * now);
      var newscale = 3 - +now;
      $(this).css('transform', "scale(" + newscale + "," + newscale + ")");

      $(".theText").css("marginLeft", textLeft - textLeft / 2 * now);
      $(".theText").css("marginTop", textTop - textTop / 2 * now);
    },
    duration: 3000


    }).promise().done(function() {

        $(this).find('span').css({
          "position":"absolute"
        }).animate({
          "width":0,
          "opacity":0
        });
      });
    });



});

function FixMargins() {

  width = $(".container").width();
  containerWidth = $(".theText").width();
  leftMargin = (width - containerWidth) / 2;
  $(".theText").css("marginLeft", leftMargin);

}

};

CSS:

.container {
  width: 500px;
  height: 300px;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  border:1px solid red;
}
.theText {
  position: absolute;
  margin-top:-150px;
  opacity:0;
}
.placeholder {
  width: 200px;
  display: inline-block;
}


Source: css

Leave a Reply