复杂的加载页面动画
[英]Complex loading page animation
问题描述
Before you read the rest this might be considered a broad question .
在您阅读其余部分之前，这可能被认为是一个广泛的问题。 I'm sorry if it is, but I have no other way to ask it than this.如果是这样的话，我很抱歉，但除了这个我没有其他方法可以问它。
So, I thought about a loading page animation, which I consider to be complex, but it may not be.所以，我想到了一个加载页面动画，我认为它很复杂，但可能不是。
What I want to achive is this:我想要实现的是：
When the page loads (let's say the index page), what you would see would be the point of view of a person looking at his/her smartphone (or desktop monitor, depending on the media query).当页面加载时（比方说索引页面），你会看到一个人看着他/她的智能手机（或桌面显示器，取决于媒体查询）的观点。 So you would basically see what you see right now.所以你基本上会看到你现在看到的。 If you're on a chair or a sofa you see maybe your legs, your hands, the environment and of course the device.如果您在椅子或沙发上，您可能会看到您的腿、手、环境，当然还有设备。 On that device you would see a miniature of your index page, like that person is looking at your website.在该设备上，您会看到索引页的缩影，就像那个人正在查看您的网站一样。
Ok, now when the page is loading you would see a zoom on the smartphone/desktop monitor like you are going "into the content" that's displayed on the screen of that person's smartphone/desktop monitor, and when it's completely loaded you see the actual website fully displayed on your device.好的，现在当页面加载时，您会在智能手机/桌面显示器上看到缩放，就像您要“进入显示在该人的智能手机/桌面显示器屏幕上的内容”一样，当它完全加载时，您会看到实际网站完全显示在您的设备上。
In other words, in the animation, that person's device becomes your device.换句话说，在动画中，那个人的设备变成了你的设备。 Hope I was clear enough.希望我说得够清楚了。
POSSIBLE SOLUTIONS I THOUGHT ABOUT我想过的可能解决方案
Putting a screenshot of the index page on the animation's device and then using
transform: scale();将索引页面的屏幕截图放在动画设备上，然后使用transform: scale();for the zoom, but how could I get rid of the animation's content once the page is fully loaded, and then have the actual website displayed?用于缩放，但是一旦页面完全加载，我怎么能摆脱动画的内容，然后显示实际的网站？Having the entire
<body>element zoomed out usingtransform: scale();使用transform: scale();缩小整个<body>元素transform: scale();and positioned on the person's device, and when the page id loaded usingtransform: scale();并定位在人的设备上，当页面 id 使用transform: scale();加载时transform: scale();again to zoom in to the full viewport's size.再次放大到完整视口的大小。
Note that I listed only CSS solutions, because I just started learning JS.请注意，我只列出了 CSS 解决方案，因为我刚刚开始学习 JS。
IMPORTANT : I don't want nobody to write that code for me.重要提示：我不希望任何人为我编写该代码。 I only want to know if there's a solution, and if the solutions I thought about could work.我只想知道是否有解决方案，以及我想到的解决方案是否可行。 Or, if I should use JS or other stuff I'm not aware about, in order to achive this animation.或者，如果我应该使用 JS 或其他我不知道的东西来实现这个动画。
1 个解决方案
解决方案1
1 2020-09-05 17:57:59
POSSIBLE SOLUTIONS I THOUGHT ABOUT
- Putting a screenshot of the index page on the animation's device and then using transform: scale();
you can get rid of the animation's content once the page is fully loaded with the help of javascript:一旦页面完全加载，您可以在 javascript 的帮助下摆脱动画的内容：
window.addEventListener("load", function () {
var AnimationContent= document.querySelector("#ID OF YOUR ANIMATION CONTENT");
AnimationContent.remove();
// or
AnimationContent.style.display = "none";
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.