javascript - 缩放 html 上的文本加载并在同一页面上的不同位置淡出

Question

这适用于带有 CSS 和 Javascript 的 HTML 网站。

我正在尽力存档以下内容，但我没有得到所需的内容。

这是一个文本 Logo ，它会在页面加载时放大和缩小，然后它会回到原位。

例子:1. 在页面加载时，文本“Hello”缩放 200% 从顶 Angular 开始朝向页面中心2. 页面加载继续——比如页面加载的 50%，文本标题向中心的缩放为 500%3. 页面加载完成 - 文本“hello”已居中，缩放比例为 800%4.停顿3秒5. 缩小到 500% 朝向左上角(标志位置)6. 缩小到 200% 朝向左上角(标志位置)7.到达标志时淡出8.标志出现

HTML 分区:

<div id="hello">
<h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">hello </h1>
</div>

JS:

function pageFullyLoaded()
{
    var elem = document.getElementById("hello");
    elem.style.zoom = "500%";
}

Answer 1

尝试使用 .animate()

// 3. Page load completes - the text "hello",
// has come to center with zoom 800%
$("#hello").animate({
  zoom: "800%",
  left: window.innerWidth / 2
}, 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: "200%",
    left:0
  }, 3000, function() {
    $(this).fadeOut()
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello">
  <h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">hello </h1>
</div>