javascript - 文本起始位置左、中和右

Question

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

但我需要像下面这样

1. "Hello" Should start from little outside of Left Top corner side of the html page
2. "Your" should start from little outside Middle Top (center top) of the page
3. "World" should start from little outside Right Top Corner of the page

(为了更清楚和理解，我已经编辑了上面的内容)

所有一起，应该来到中心放大。他们都必须返回缩小到页面的左侧。

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>

Answer 1

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

在下面的示例中，我使用了 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>