Comment ajouter de la transition lors du chargement d'une page web

Est-il possible d'ajouter des transition comme lors du chargement d'une page web, comme lorsque vous passez d'un div avec effet de transition.
exemple: cubeupload.com

InformationsquelleAutor Asme Just | 2013-04-29
  1. 4

    Vous pouvez le faire, mais pas le droit de la boîte à l'aide de css3 et html5 seulement! ce que vous pouvez faire, même sans compter sur le plus lourd des cadres, est de s'appliquer à divers élément onload événements et d'ajouter une classe css lorsque le onload événements sont à tirer!

    permet de dire que vous faites de votre corps css ressembler à ceci :

    body {
    opacity : 0;
    transition : opacity 1s ease; 
}

.loaded {
   opacity : 1;
}

    vous pourriez faire quelque chose comme ceci en javascript : 

    <body onload="this.classList.add('loaded')">

    dans certains navigateurs, le this variable au sein de l'élément de corps n'est pas vraiment reconnu, il est préférable d'utiliser document.corps au lieu!

    <body onload="document.body.classList.add('loaded')">

    cela vous donne la liberté de jouer avec les différentes propriétés css à la fois dans les css, transform : all 1s ease; sans les tracas de l'apprentissage de nouveaux cadres à tous!

    Voici un exemple de travail 

    <!doctype>
<html>
    <head>
        <style>

            body { background: orange; -webkit-transition: all 1s ease; transition: all 1s ease; }

            .loaded { background: red; }

        </style>

        <script>function loaded (el) { el.classList.add('loaded') }</script>

    </head>
    <body onload="loaded(document.body)">

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </body>
</html>

    Avis : C'est, comme demandé, un html5/css3 solution! âgées navigateur ne supporte pas le css transitions ou la classList propriété!

    • OK merci beaucoup.
    • si vous ne voulez pas aller avec un gros framework javascript, je viens de revisioned le code et inclus un exemple de travail à la poste!
    • Ouais, bon exemple, je vous remercie.
    • si vous pensez que oui et il m'a semblé utile de vous éventuellement envisager de changer votre réponse 😛
    InformationsquelleAutor Ivo
  2. 1

    De cours.

    Simplement utiliser jQuery et jQuery.blockUI plugin et utiliser un code tel que:

    <script language='javascript' type='text/javascript'>
$(document).ready(function(){
    $.blockUI();
    $(window).load(function(){
        $.unblockUI();
    });
});
</script>

    Dans ce cas, lorsque la page est prêt le bloc est affiché, et lorsque l'ensemble de la page est chargé à bloc est simplement caché. 🙂

    InformationsquelleAutor Fernando Mota
  3. 1

    Si vous voulez l'ensemble de la page pour avoir un effet de transition:

    $(document).ready(function() {
        $("body").css("display", "none");
        $("body").fadeIn(2000);
});

    Aperçu jsFiddle: http://jsfiddle.net/tXeks/

    • OK, je vous Remercie. mais peut-il disposer d'une transition trop?
    • Juste un exemple: jsfiddle.net/tXeks/1 Vous aurez besoin de jouer avec jQuery transitions de trouver celui qui correspond à vos besoins.
    • et puis-je changer la vitesse pour les deux exemple?
    InformationsquelleAutor O P
  4. 0

    Par exemple, à votre exemple, un pur CSS solution:

    a:hover { color:white; }

    Qui ferait le lien de la couleur de texte de tour en blanc sur le vol stationnaire.

    Vous pouvez l'animer avec les transitions CSS. http://www.w3schools.com/css3/css3_transitions.asp

    • et bien en fait je n'ai pas besoin hover, j'ai juste besoin de la transition pour le premier chargement de la page, je vous remercie.
    InformationsquelleAutor Casey Dwayne
  5. 0

    Le mieux est d'utiliser de la plaine du javascript, Vous avez besoin d'attendre pour jquery qui, souvent, est chargé à la fin de la page, un événement que la page est chargée.
    ajouter cette après corps

     <script type="text/javascript">
  var sheet = document.createElement('style');
  sheet.innerHTML = "#main {opacity:0;}"; //your main content
  element = document.getElementById('wrapper'); //your 'main content wrapper
  element.appendChild(sheet);
  setTimeout(function(){ 
    sheet.innerHTML = "#main {opacity:1;}";
    element.appendChild(sheet); 
  }, 400); //time to wait to start transition
    </script>
  <div class="wrapper">
      <div id="main">Magic happens here</div>
 </div>
    InformationsquelleAutor fearis