javascript - 文字起始位置左，中和右

当我加载此动画时，文本从HTML页面的左侧开始。

但是我需要像下面这样



(我已经编辑了上面的内容，以更好地理解和理解)

所有这些都应该放在放大的中心。所有这些都必须返回缩小到页面的左侧。

JSFiddle

$('#hello').animate({
      zoom: '150%',
      left: window.innerWidth / 1
}, 3000, function() {
    // 4. Pause for 3 seconds
    $(this).delay(3000)
    // 6. zooms out to 200% heading towards left top corner,
    // (logo position)
    // 7. Fades out when reaching the logo 8. Logo appears
    .animate({
        zoom: '40%',
        left:0
    }, 3000, function() {
        $(this).find('span').fadeOut()
    })
});

h1 {
    font-size: 1em;
    zoom: 200%;
    transition: zoom 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="hello">
<h1>&nbsp;H<span>ello</span>&nbsp;Y<span>our</span>&nbsp;W<span>orld</span></h1>

最佳答案

由于您需要的动画非常复杂(可从不同侧面滑动和缩放)，也许可以创建自定义动画？

在下面的示例中，我利用了2D变换和动画的step属性。我在单词之间放了2个长<span>，将它们推到一边。

单击红色框以开始动画。如果您有任何问题随时问。

ps:我在元素上留了边框，以便您可以看到它们如何移动

$(function() {
  FixMargins();

  $(".container").click(function() {
    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: 700
    }).promise().done(function() {
      $(this).delay(500);
      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: 500
      }).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);

}

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

  width: 200px;
  display: inline-block;

}

<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 - 文字起始位置左，中和右，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31099662/