在html加载时缩放文本，并在同一页面的不同位置淡出

Zoom text on html load and fade out at different location on same page

本文关键字：一页 淡出 位置 加载 html 缩放 文本      更新时间：2023-09-26

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

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

这是针对徽标的，它是一个文本，当页面加载时，它会放大和缩小，然后它会移动并固定在它的位置。

示例：1.在页面加载时，文本"Hello"缩放比例为200%，从上角开始向页面中心移动2.页面加载持续-比如说页面加载的50%，文本标题向中心的缩放为500%3.页面加载完成-文本"你好"已居中，缩放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%";
}

尝试使用.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>

相关文章：