3 Cool CSS3 εφέ κίνησης εικόνας
Στο σύγχρονο ιστό υπάρχουν πολλές τεχνικές που μπορούν να χρησιμοποιηθούν για να δημιουργηθούν ενδιαφέρουσες αλληλεπιδράσεις, αλλά το απλούστερο και πιο κομψό είναι συνήθως το CSS και συγκεκριμένα οι προσθήκες που συνοδεύουν το CSS3.
Επιστροφή στις παλιές εποχές, έπρεπε να βασιστούμε στο JavaScript για αυτό το είδος εφέ, αλλά χάρη στην ολοένα αυξανόμενη υποστήριξη για το CSS3 σε όλα τα προγράμματα περιήγησης, τώρα είναι δυνατό να δημιουργήσουμε εφέ σαν αυτά χωρίς κανένα scripting. Υπάρχουν δυστυχώς ακόμη προγράμματα περιήγησης (IE9 και παρακάτω) που δεν υποστηρίζουν το CSS3, οπότε είτε θα χρειαστείτε μια εναλλακτική λύση για τα προγράμματα περιήγησης παλαιού τύπου είτε για να αντιμετωπίσετε το αποτέλεσμα ως προοδευτική βελτίωση.
Σήμερα, θα δούμε πώς μπορούμε να εφαρμόσουμε δροσερά, αλλά τακτοποιημένα εφέ κίνησης για να δείξουμε και να αποκρύψουμε τις λεζάντες των εικόνων.
Αν προτιμάτε να ακολουθήσετε μαζί με τον κώδικα, μπορείτε κατεβάστε τα αρχεία εδώ.
Επίδειξη 1
Το πρώτο demo είναι το πιο απλό: η εικόνα θα πετάει προς τα δεξιά για να αποκαλύψει τη λεζάντα.
Η σήμανση
Για το html του δεύτερου demo, θα χρησιμοποιήσουμε πολύ παρόμοια σήμανση με το πρώτο μας demo. Αλλά αυτή τη φορά θα χρησιμοποιήσουμε το demo-2 ως τάξη και θα προσθέσουμε την τάξη μηδέν :
This is a cool title!
Lorem ipsum dolor sit amet.
Το CSS
Το CSS θα είναι σχεδόν το ίδιο με το πρώτο demo, εκτός από το ότι αυτή τη φορά θα μετακινήσουμε την εικόνα μας κάτω από τις ρυθμίσεις του κάτω μέρους της ιδιότητας σε -96px. Θα χρησιμοποιήσουμε επίσης τη μετάβαση του CSS3 για να δημιουργήσουμε ένα ομαλό αποτέλεσμα:
.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}Επίδειξη 3
Για το τελευταίο μας demo, θα δημιουργήσουμε ένα αποτέλεσμα καρτών. Αυτό σημαίνει ότι όταν τοποθετείτε το ποντίκι πάνω στην εικόνα, θα περιστραφεί γύρω από τον άξονά του για να αποκαλυφθεί η περιγραφή.