CSS gebruiken voor een fade-in-effect bij het laden van pagina’s

Kunnen CSS-overgangen worden gebruikt om een ​​tekstparagraaf te laten infaden bij het laden van een pagina?

Ik vind het erg leuk hoe het eruit zag op http:// dotmailapp.com/en zou graag een soortgelijk effect gebruiken met CSS. Het domein is inmiddels gekocht en heeft niet langer het genoemde effect. Een gearchiveerde kopie kan op de Wayback Machineworden bekeken .

Illustratie

Met deze opmaak:

<div id="test">
    <p>​This is a test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Met de volgende CSS-regel:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}​

Hoe kan de overgang worden geactiveerd bij belasting?


Antwoord 1, autoriteit 100%

Methode 1:

Als u op zoek bent naar een zelfoproepende overgang, moet u gebruiken CSS 3 Animaties. Ze worden ook niet ondersteund, maar dit is precies waarvoor ze gemaakt zijn.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Demo

Browserondersteuning

Alle moderne browsers en Internet Explorer 10 (en hoger): http://caniuse.com /#feat=css-animatie

Methode 2:

U kunt ook jQuery (of gewoon JavaScript; zie het derde codeblok) gebruiken om de klasse bij het laden te wijzigen:

jQuery

$("#test p").addClass("load");​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}
#test p.load {
    opacity: 1;
}

Gewoon JavaScript (niet in de demo)

document.getElementById("test").children[0].className += " load";

Demo

Browserondersteuning

Alle moderne browsers en Internet Explorer 10 (en hoger): http://caniuse.com /#feat=css-transitions

Methode 3:

Of u kunt de methode gebruiken die .Mailgebruikt:

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

Demo

Browserondersteuning

jQuery 1.x: alle moderne browsers en Internet Explorer 6 (en hoger): http://jquery.com/browser-support/

jQuery 2.x: alle moderne browsers en Internet Explorer 9 (en hoger): http://jquery.com/browser-support/

Deze methode is het meest compatibel met elkaar omdat de doelbrowser geen CSS 3-overgangen of-animaties hoeft te ondersteunen.


Antwoord 2, autoriteit 3%

U kunt het HTML-kenmerk onload=""gebruiken en JavaScript gebruiken om de dekkingsstijl van uw element aan te passen.

Laat je CSS achter zoals je hebt voorgesteld. Bewerk uw HTML-code in:

<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>​This is a test</p>
    </div>
</body>

Dit werkt ook om de volledige pagina in te faden wanneer het laden klaar is:

HTML:

<body onload="document.body.style.opacity='1'">
</body>

CSS:

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

Controleer de W3Schools-website: overgangenen een artikel voor stijlen wijzigen met JavaScript.


Antwoord 3

Als antwoord op de vraag van @A.M.K over hoe je overgangen kunt maken zonder jQuery. Een heel eenvoudig voorbeeld dat ik bij elkaar heb gegooid. Als ik tijd had om hier nog eens goed over na te denken, zou ik de JavaScript-code misschien helemaal kunnen verwijderen:

<style>
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
</style>
<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>
<body>
    <p>test</p>
</body>

Antwoord 4

Ik kijk uit naar webanimatiesin 2020.

Other episodes