复杂加载页面动画答案

【问题标题】：Complex loading page animation复杂加载页面动画
【发布时间】：2020-12-24 15:16:21
【问题描述】：

在您阅读其余部分之前这可能被视为一个广泛的问题。如果是的话，我很抱歉，但除了这个我没有别的办法。

所以，我想到了一个加载页面动画，我认为它很复杂，但可能并不复杂。

我想要实现的是：

当页面加载（比如说索引页面）时，您会看到一个人看着他/她的智能手机（或桌面显示器，具体取决于媒体）的视角询问）。所以你基本上会看到你现在看到的。如果你坐在椅子或沙发上，你可能会看到你的腿、手、环境，当然还有设备。在该设备上，您会看到索引页的缩影，就像那个人正在查看您的网站一样。

好的，现在当页面加载时，您会在智能手机/桌面显示器上看到缩放，就像您要“进入屏幕上显示的内容”该人的智能手机/桌面显示器，当它完全加载时，您会看到实际网站完全显示在您的设备上。

换句话说，在动画中，那个人的设备变成了你的设备。希望我已经足够清楚了。

我想到的可能解决方案

将索引页面的屏幕截图放在动画的设备上，然后使用transform: scale(); 进行缩放，但是一旦页面完全加载，我如何摆脱动画的内容，然后有没有显示实际的网站？
使用transform: scale(); 缩小整个<body> 元素并将其定位在用户的设备上，并在加载页面ID 时再次使用transform: scale(); 放大到整个视口的大小。

注意，我只列出了 CSS 解决方案，因为我刚开始学习 JS。

重要提示：我不希望任何人为我编写该代码。我只想知道是否有解决方案，以及我想到的解决方案是否可行。或者，如果我应该使用 JS 或其他我不知道的东西来实现这个动画。

【问题讨论】：

我认为您可以对整个页面内容进行包装。它将以智能手机等的图像作为背景。内容应为scale()d 以适应智能手机屏幕。在页面上发生某些事件后，它应该扩大到其原始页面。我认为加载速度非常快，用户会看到奇怪的闪烁而不是良好的加载效果。也许在 JavaScript 中设置超时？假设在 2 秒后调用了一个函数，该函数将在内容根元素上设置 scale(1)。
非常感谢。我会尝试使用您的解决方案。如果我在页面加载时使用它，有没有办法让它只发生一次？并非每次用户来回浏览页面时，每次您到达主页时它都会弹出，这可能会令人烦恼。
如果你希望它在会话中只发生一次或永远，你可以使用 sessionStorage （第一个场景）或 localStorage （第二个场景）来存储一个标志，表明效果已经已使用，不应再次显示。您可以在页面加载时读取该标志并立即设置scale(1)（如果存在）。
我认为大多数浏览器都会在内存中存储前一页/几页及其状态，因此在这种情况下可能不会显示加载效果
知道了，非常感谢，真的！ :) 用 JS 可以实现吗？我是说国旗

标签： javascript html css animation pageload

【解决方案1】：

我想到的可能解决方案

将索引页面的屏幕截图放在动画设备上，然后然后使用变换： scale();变焦，但我怎么能摆脱页面完全加载后动画的内容，然后是否显示了实际的网站？

页面完全加载后，您可以在 javascript 的帮助下摆脱动画的内容：

window.addEventListener("load", function () {
  var AnimationContent= document.querySelector("#ID OF YOUR ANIMATION CONTENT");

  AnimationContent.remove();

  // or

  AnimationContent.style.display = "none";

});

【讨论】：