JavaScript显示介绍动画，然后是网站

javascript show intro animation, then website

本文关键字：然后 网站 动画 显示 JavaScript      更新时间：2023-09-26

我必须在html页面中添加介绍动画。所以我需要加载页面时可见的第一件事是全屏的 gif（大约需要 2 秒），然后我必须淡出 gif 并淡入 html 页面。你可以帮我吗？我的网页包含在这样的div 中：

<body>
    <div id="site">
        <div id="menu">
        ...
        </div>
        <div id="content">
        ...
        </div>
    </div>
</body>

"site"中包含的内容必须在 gif 介绍播放并结束后出现 - 褪色。

这是我首先尝试的：

<script>
$(window).ready(function() {
$('#intro').css('visibility','visible').hide().delay(3000).fadeIn(300);
$('#site').css('visibility','visible');
});
</script>

但我认为这不是正确的方式。

最好的方法是使用CSS动画。 它无需jQuery即可直接在GIF上运行（无需div）GIF 必须具有：

@keyframes customanim
{
0%   {values;}
100%   {values;}
}
@-webkit-keyframes customanim /* Safari and Chrome */
{
0%   {css-values;}
100%   {more-values;}
}
.animationclass {

position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
animation: customanim 3s;
-webkit-animation: customanim 5s;
-webkit-animation-fill-mode: forwards;
}

确保使用"-webkit-animation-fill-mode：转发"，以便 GIF 在动画后保持隐藏状态，否则 GIF 将返回到其原始状态。

要再次播放动画，只需在 js 中执行以下行：

document.getElementById('objecttobeanimated').className ='animationclass';

链接到 W3C：

http://www.w3schools.com/css3/css3_animations.asp

希望我能帮到你

如果是我，我会把我的 gif 放在一个 DIV 中，并在网站外部使用它。然后使用jQuery像这样的东西：-

var timer = 0; //setting this up as global
$(document).ready( function () {
        $("#site").hide(); // you could have the site as display:none in css instead of this line.
        timer = setInterval( showSite , 2000 ) // here's your 2 seconds delay
});
function showSite() {
      clearInterval(timer);
      $("#myGIFdiv").fadeOut();
      $("#site").fadeIn();
}

我建议更长的延迟，因为您不知道您的 gif 需要多长时间才能加载......查找预加载等以了解更多信息。这是一个非常粗略的例子，可以帮助您入门。

这是一个解决方案：

.JS：

$(window).load(function(){
    $("#preloader-anim").fadeOut(500);$("#preloader").delay(500).fadeOut(500);
});

.CSS：

.preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 99999999; }
.preloader-anim { position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; }

.HTML：

<div id="preloader" class="preloader"><div id="preloader-anim" class="preloader-anim"><img src="http://www.iec.ch/img/loading_sliders_2.gif" /></div></div>

工作原理：

在页面完全加载之前，将显示div id="preloader"。然后，连续淡出加载器.gif和div id="preloader"。

注意：为了便于说明，我使用了我找到的第一个加载 gif。不建议使用热链接。

相关文章：