Sayfa yüklenirken bir metin paragrafının soluklaşmasına izin vermek için CSS geçişleri kullanılabilir mi?
http://dotmailapp.com/][1] adresinde nasıl göründüğünü gerçekten çok beğendim ve CSS kullanarak benzer bir efekt kullanmayı çok isterim. Alan adı o zamandan beri satın alındı ve artık bahsedilen efekte sahip değil. Arşivlenmiş bir kopyası Wayback Machine'de görülebilir.
Bu işaretlemeye sahip olmak:
<div id="test">
<p>This is a test</p>
</div>
Aşağıdaki CSS kuralı ile:
#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;
}
Geçiş yük üzerinde nasıl tetiklenebilir?
Kendi kendini harekete geçiren bir geçiş arıyorsanız CSS 3 Animations kullanmalısınız. Onlar da desteklenmiyor, ancak tam olarak bu tür bir şey için yapılmışlar.
#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; }
}
Tüm modern tarayıcılar ve Internet Explorer 10 (ve sonrası): http://caniuse.com/#feat=css-animation
Alternatif olarak, yükleme sırasında sınıfı değiştirmek için jQuery (veya düz JavaScript; üçüncü kod bloğuna bakın) kullanabilirsiniz:
$("#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";
Tüm modern tarayıcılar ve Internet Explorer 10 (ve sonrası): http://caniuse.com/#feat=css-transitions
Ya da .Mail'in kullandığı yöntemi kullanabilirsiniz:
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
jQuery 1.x: Tüm modern tarayıcılar ve Internet Explorer 6 (ve sonrası): http://jquery.com/browser-support/
jQuery 2.x: Tüm modern tarayıcılar ve Internet Explorer 9 (ve sonrası): http://jquery.com/browser-support/
Hedef tarayıcının CSS 3 geçişlerini veya animasyonları desteklemesi gerekmediğinden bu yöntem en çapraz uyumlu yöntemdir.
Onload=""` HTML niteliğini kullanabilir ve öğenizin opaklık stilini ayarlamak için JavaScript kullanabilirsiniz.
CSS'nizi önerdiğiniz gibi bırakın. HTML kodunuzu şu şekilde düzenleyin:
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
Bu, yükleme bittiğinde sayfanın tamamını soluklaştırmak için de çalışır:
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
W3Schools]1 web sitesini kontrol edin: geçişler ve JavaScript ile stilleri değiştirme için bir makale.
A.M.K'nin jQuery olmadan geçişlerin nasıl yapılacağı hakkındaki sorusuna yanıt olarak. Birlikte attığım çok basit bir örnek. Bunu biraz daha düşünecek zamanım olsaydı, JavaScript kodunu tamamen ortadan kaldırabilirdim:
<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>