Kan CSS-övergångar användas för att låta ett textavsnitt tonas in när sidan laddas?
Jag gillar verkligen hur det såg ut på http://dotmailapp.com/ och skulle gärna vilja använda en liknande effekt med hjälp av CSS. Domänen har sedan dess köpts och har inte längre den nämnda effekten. En arkiverad kopia kan ses på Wayback Machine.
Med denna markering:
<div id="test">
<p>This is a test</p>
</div>
Med följande 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;
}
Hur kan övergången utlösas vid laddning?
Om du letar efter en självupplevd övergång bör du använda CSS 3 Animationer. De stöds inte heller, men det är precis den här typen av saker som de är gjorda för.
#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; }
}
Alla moderna webbläsare och Internet Explorer 10 (och senare): http://caniuse.com/#feat=css-animation
Alternativt kan du använda jQuery (eller vanlig JavaScript; se det tredje kodblocket) för att ändra klassen vid laddning:
$("#test p").addClass("load");
#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;
}
document.getElementById("test").children[0].className += " load";
Alla moderna webbläsare och Internet Explorer 10 (och senare): http://caniuse.com/#feat=css-transitions
Eller så kan du använda den metod som .Mail använder:
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
jQuery 1.x: Alla moderna webbläsare och Internet Explorer 6 (och senare): http://jquery.com/browser-support/
jQuery 2.x: Alla moderna webbläsare och Internet Explorer 9 (och senare): http://jquery.com/browser-support/
Den här metoden är den mest tvärkompatibla eftersom målwebbläsaren inte behöver stödja CSS 3-övergångar eller animationer.
Du kan använda HTML-attributet onload=""
och använda JavaScript för att justera elementets opacitetsstil.
Lämna din CSS som du föreslagit. Redigera din HTML-kod så att:
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
Detta fungerar också för att fade in hela sidan när den är klar att laddas:
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
Kolla på webbplatsen W3Schools: övergångar och en artikel om ändring av stilar med JavaScript.
Som svar på @A.M.K's fråga om hur man gör övergångar utan jQuery. Ett mycket enkelt exempel som jag slängde ihop. Om jag hade haft tid att tänka igenom det här lite mer kanske jag skulle kunna eliminera JavaScript-koden helt och hållet:
<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>