图像动画/加载页面时如何使图像滑入？ （HTML/JAVASCRIPT）[关闭]
Posted
技术标签:
【中文标题】图像动画/加载页面时如何使图像滑入？ （HTML/JAVASCRIPT）[关闭]【英文标题】：Image Animation / How to make image slide in when page is loaded? (HTML/JAVASCRIPT) [closed] 【发布时间】：2021-02-13 17:43:55 【问题描述】：我没有 javascript 经验，阅读了这么多帖子让我不知所措。非常感谢您的帮助。
我正在尝试让我的页面图像慢慢“滑入”到其最终位置：当点击页面时，从（不可见的）左侧到中心。
我试过搜索这个，但弹出的大部分内容都是“如何制作 javascript 幻灯片放映”。
问题也是“如何让 div 从一个位置滑入下一个位置？” （因为图像将在 div 内。
我猜它会在 WindowLoad() 上发生。
再次感谢您的帮助。这个社区很棒。
【问题讨论】：
【参考方案1】：我知道你问的是关于 JS 的问题，但这是一个想法。您也可以在 CSS 中使用动画来做到这一点。看看：
将此应用于容器：
animation: slideInFromRight 1s ease-in;
这需要分开：
@keyframes slideInFromRight
0%
transform: translateX(100%);
100%
transform: translateX(0);
【讨论】：
哇！这太神奇了！非常感谢！【参考方案2】：我们需要三个文件来做到这一点
-
index.html
style.css
script.js
所以我们想把这三者结合起来得到最终的输出。
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Slideshow example</title>
<link rel="stylesheet" href="./style.css"> <!-- load style.js // consider both files in same folder -->
</head>
<body>
<div id="slideshow-example" data-component="slideshow">
<div role="list">
<div class="slide"> <!-- Load image 01 -->
<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" >
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" >
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" >
</div>
</div>
</div>
<script src="./script.js"></script> <!-- load script.js // consider both files in same folder -->
</body>
</html>
script.js
var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // call slidshow data-component
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) // slideshow function
var slides = document.querySelectorAll(`#$slideshow.id [role="list"] .slide`);
var index = 0, time = 5000; // set slide time
slides[index].classList.add('active');
setInterval( () => // slide every 5 second
slides[index].classList.remove('active');
index++;
if (index === slides.length) index = 0;
slides[index].classList.add('active');
, time);
style.css
[data-component="slideshow"] .slide
display: none;
text-align: center;
[data-component="slideshow"] .slide.active
display: block;
在一个文件夹中创建所有这三个文件并运行 index.html 文件。 您可以通过替换 URL 来使用自己的图像。
【讨论】：
非常感谢您为这一切所做的一切！我真的很感激！【参考方案3】：我可以建议一件事，那就是假的。一旦我们加载了我们的网站，我们就可以显示一个动画，显示一些加载效果，然后加载我们的完整网站。
第 1 步
根据您的需要设置 div 样式。
第 2 步
创建一个带有动画样式的单独类（在 CSS 中，不是在 HTML 中）。像这样。
.animation
animation: name duration timing-function delay iteration-count direction fill-mode;
不要忘记添加关键帧。
@keyframes name
0%
/* Styles */
100%
/* Styles */
第 3 步
现在我们使用 JavaScript。
document.addEventListener("DOMContentLoaded", function(event)
document.getElementById('div').classList.add('animation');
);
另外，如果您对 CSS 动画感兴趣，可以查看我的 blog，我正在那里开设关于动画的短期课程。
编码愉快！
【讨论】：
此外，您还可以使用此方法添加 onclick 动画。只需创建一个将动画类添加到 div 的函数，然后添加 onclick 属性并将其链接到该函数。 你们都非常棒。太感谢了！我一定会看看你的博客！ @wolfie777 如果你觉得这有帮助，你可以接受这个作为答案以上是关于图像动画/加载页面时如何使图像滑入？ （HTML/JAVASCRIPT）[关闭]的主要内容，如果未能解决你的问题，请参考以下文章