Μπορούν να χρησιμοποιηθούν μεταβάσεις CSS για να επιτραπεί σε μια παράγραφο κειμένου να αναβοσβήνει κατά τη φόρτωση της σελίδας;
Μου αρέσει πολύ το πώς φαινόταν στο http://dotmailapp.com/ και θα ήθελα πολύ να χρησιμοποιήσω ένα παρόμοιο εφέ χρησιμοποιώντας CSS. Ο τομέας έχει πλέον αγοραστεί και δεν έχει πλέον το αναφερόμενο εφέ. Μπορείτε να δείτε ένα αρχειοθετημένο αντίγραφο στο Wayback Machine.
Έχοντας αυτή τη σήμανση:
<div id="test">
<p>This is a test</p>
</div>
Με τον ακόλουθο κανόνα 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;
}
Πώς μπορεί να ενεργοποιηθεί η μετάβαση κατά τη φόρτωση;
3 Animations]1. Ούτε αυτές υποστηρίζονται, αλλά αυτό ακριβώς είναι το είδος του πράγματος για το οποίο φτιάχτηκαν.
#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; }
}
Όλα τα σύγχρονα προγράμματα περιήγησης και Internet Explorer 10 (και μεταγενέστερα): http://caniuse.com/#feat=css-animation
<br/>,
Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την jQuery (ή απλή JavaScript, βλ. το τρίτο μπλοκ κώδικα) για να αλλάξετε την κλάση κατά τη φόρτωση:
$("#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";
Όλα τα σύγχρονα προγράμματα περιήγησης και Internet Explorer 10 (και μεταγενέστερα): http://caniuse.com/#feat=css-transitions
<br />,
Mail*:
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
jQuery 1.x: Explorer 6 (και μεταγενέστερα): http://jquery.com/browser-support/ <br />, jQuery 2.x: Explorer 9 (και μεταγενέστερα): http://jquery.com/browser-support/
Αυτή η μέθοδος είναι η πιο διασταυρούμενα συμβατή, καθώς το πρόγραμμα περιήγησης-στόχος δεν χρειάζεται να υποστηρίζει μεταβάσεις CSS 3 ή κινούμενα σχέδια.
Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό HTML onload=""
και να χρησιμοποιήσετε JavaScript για να ρυθμίσετε το στυλ αδιαφάνειας του στοιχείου σας.
Αφήστε το CSS σας όπως το προτείνατε. Επεξεργαστείτε τον κώδικα HTML σας ώστε:
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
Αυτό λειτουργεί επίσης για την εμφάνιση ολόκληρης της σελίδας όταν τελειώσει η φόρτωση:
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
Ελέγξτε την ιστοσελίδα W3Schools: μεταβάσεις και ένα άρθρο για την αλλαγή στυλ με JavaScript.
Σε απάντηση στην ερώτηση του @A.M.K's σχετικά με το πώς να κάνετε μεταβάσεις χωρίς jQuery. Ένα πολύ απλό παράδειγμα που έριξα μαζί. Αν είχα χρόνο να το σκεφτώ περισσότερο, ίσως να μπορούσα να εξαλείψω τον κώδικα JavaScript εντελώς:
<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>