javascript show intro animation, затем сайт

-7

Мне нужно добавить на html-страницу интро-анимацию. Поэтому мне нужно, чтобы первое, что было видно при загрузке страницы, - это gif на полном экране (это занимает около 2 секунд), тогда мне нужно затухать gif и перейти на страницу html. Вы можете мне помочь? Мой веб-страницы содержится в DIV так: должен появитьсяjavascript show intro animation, затем сайт

<body> 

    <div id="site"> 

     <div id="menu"> 
     ... 
     </div> 

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

Что содержится в «месте» - замирание - после того, как GIF интро играл и закончился.

Это то, что я пытался первым:

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

, но я думаю, что это не правильный путь.

источник

2013-09-23 maurice77

Попробуйте сами, а затем покажите нам, что вы сделали. – Bucket

http://api.jquery.com/animate/? – David

Если бы это был я, я бы поместил свой 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 потребуется для загрузки ... посмотреть поджимать и т.д., чтобы узнать больше о том, что , Это очень грубый пример, чтобы вы начали.

источник

2013-09-23 15:38:55

Привет, я понял ваш пример. Я попробовал, но, похоже, не работает. Возможно, мне не хватает информации о том, как включить этот код.Я помещал его в теги , но он вызывает ошибку. – maurice77

Я немного испортил код ... Я исправил его сейчас. Конечно, вам нужно будет включить jQuery, а также использовать CSS для размещения двух DIVs абсолютно, чтобы они могли перекрываться (если это то, что вы хотите). –

Лучший способ - использовать анимацию css. она работает без JQuery и непосредственно на 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-анимация-заполняющая режим: форварды» поэтому GIF остается скрытыми после анимации иначе gif вернется в исходное состояние.

играть анимацию снова просто выполнить эту строку в ЯШ:

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

Ссылка на W3C:

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

надежды я мог бы помочь вам

источник

2013-09-23 15:39:32

Спасибо, но я не понял, как включить этот код в свой проект. Я должен положить его в css и переименовать .animationclass с классом моего gif, правильно? А потом? – maurice77

Кроме того, я вижу, что IE9 и ранее не поддерживают правило ключевого кадра, и это не подходит для меня. – maurice77

Вот это раствор:

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 = "прелоадер" Показано, пока страница полностью загружен. Затем последовательно исчезает loader.gif, а div id = «preloader».

Примечание: Для иллюстрации я использовал первый загрузочный gif, который я нашел. Не рекомендуется использовать hotlinking.

источник

2013-10-15 08:58:25 BMX700

javascript show intro animation, затем сайт

ответ

Смежные вопросы