Viac na
Použitie CSS na efekt fade-in pri načítaní stránky
Je možné použiť prechody CSS na to, aby sa textový odsek pri načítaní stránky prelínal?
Veľmi sa mi páči, ako to vyzeralo na http://dotmailapp.com/ a rád by som použil podobný efekt pomocou CSS. Doména bola medzitým zakúpená a uvedený efekt už nemá. Archívnu kópiu si môžete pozrieť na Wayback Machine.
Ilustrácia
S touto značkou:
<div id="test">
<p>This is a test</p>
</div>
S nasledujúcim pravidlom CSS:
#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;
}
Ako sa dá spustiť prechod pri načítaní?
411
3
Metóda 1:
3 Animácie]1. Ani tie nie sú'podporované, ale toto je presne ten druh vecí, na ktoré boli vytvorené.
CSS
Demo
Podpora prehliadačov
Všetky moderné prehliadače a Internet Explorer 10 (a novšie): http://caniuse.com/#feat=css-animation
Metóda 2:
Alternatívne môžete použiť jQuery (alebo obyčajný JavaScript; pozri tretí blok kódu) na zmenu triedy pri načítaní:
jQuery
CSS
Jednoduchý JavaScript (nie je v ukážke)
Demo
Podpora prehliadačov
Všetky moderné prehliadače a Internet Explorer 10 (a novšie): http://caniuse.com/#feat=css-transitions
Metóda 3:
Môžete tiež použiť metódu, ktorú používa .Mail:
jQuery
CSS
Demo
Podpora prehliadačov
jQuery 1.x: Všetky moderné prehliadače a Internet Explorer 6 (a novšie): http://jquery.com/browser-support/
jQuery 2.x: Všetky moderné prehliadače a Internet Explorer 9 (a novšie): http://jquery.com/browser-support/
Táto metóda je najviac kompatibilná s viacerými prehliadačmi, pretože cieľový prehliadač nemusí podporovať prechody CSS 3 alebo animácie.
Môžete použiť atribút
onload=""
HTML a pomocou JavaScriptu upraviť štýl nepriehľadnosti vášho prvku.CSS ponechajte tak, ako ste navrhli. Upravte svoj kód HTML na:
Toto funguje aj na zobrazenie celej stránky po dokončení načítania:
HTML:
CSS:
Pozrite si webovú stránku W3Schools: prechody a článok zmena štýlov pomocou JavaScriptu.
Odpoveď na otázku @A.M.K'o tom, ako robiť prechody bez jQuery. Veľmi jednoduchý príklad, ktorý som hodil dohromady. Keby som mal čas to viac premyslieť, možno by som dokázal úplne odstrániť kód JavaScriptu: