Déclencher une animation à l'ouverture du site.

herde2
Javascript

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour,
Je cherche à déclencher une animation (un logo qui descend) à l'ouverture de mon site.

<script>
$(document).ready(function(){
    $('.logo').hide();
});
$(window).load(function(){
    $('.logo').fadeIn('fast');
    $(".logo").animate({
        marginTop:'0px',
        opacity:1
    },200,'swing');
});
</script>

<!-- /slider monte en parti -->

<script>
$(document).ready(function(){
    $('#slider').hide();
});
$(window).load(function(){
    $('#slider').fadeIn('slow');
    $("#slider").delay(400).animate({
        marginTop:'-1200px',
        opacity:1
    },800,'swing');
});
</script>

Pour le moment, le body reste affiché longtemps avant que l'animation se déclenche :(
Merci.
RD

4 réponses

popotte

Hello :)

Alors si ton animation finit par se déclencher mais que ça prends du temps, c'est juste un soucis d'optimisation, il faut que tu essayes de faire un coup de propre dans ton code pour accelerer le script

Faudrait monitorer ton script avec console.time('le label du time mets ce que tu veux ici')

Dans le cas où c'est impossible d'optimiser, alors tu devrais placer un loader, en gros tu places un overlay de chargement de page, et dans ta fonction tout de suite après document.ready donc dès que la page est prête, tu fait disparaitre le loader et derière l'animation se déclenche de suite :p

herde2
Auteur

Salut popotte !
Merci beaucoup pour ta réponse, c'est très sympa ;)
Ce que j'ai oublié de dire, c'est que je n'y connais rien en js :/
Pour le loader, je vais me renseigner mais j'ai déjà une page d'intro (avec les images de l'animation en 0px X 0px pour qu'elles se chargent).
Le mieux serait, je pense, partir de ce script (!?).
Merci à toi :)

herde2
Auteur

Salut popotte,
Veux-tu parler de ça ?
$(document).ready(function() {
$(".overlay").fadeIn();
});
$(window).on('load', function() {
$(".overlay").fadeOut();
});
Bonne journée ;)

popotte

Avec plaisir ^^

Ah okay x) Alors oui sans connaitre le js mieux vaut passer par un simple bloc qui aura un role de loader

Pour le loader, ce sera juste une page blanche avec un logo, niveau css tu le mets en position: fixed, en inset: 0 et la div doit se trouver sous le body qui lui devra avoir la position: relative, comme ça tu aura au chargement un logo de préchargement, ensuite à l'intérieur de ton $(document).ready tu fait disparaitre le bloc "loader" et tu déclenches l'animation

Sinon l'event load bof, faudrait attendre que le js soit chargé pour ensuite trigger l'event load, mieux vaut faire apparaitre dans l'état initial, et ensuite au ready faire disparaitre

herde2
Auteur

lol... je n'y comprends rien :/
C'est un script chopé sur le net ;)
Il est bon ?
Merci popotte :)