Κινούμενα εφέ CSS με εναλλακτικά

Περιεχόμενο

• 01. Μια τρισδιάστατη περιστρεφόμενη επαγγελματική κάρτα
• 02. Παροχή εναλλακτικών στυλ
• 03. Κινούμενα σχέδια CSS και JavaScript
• 04. Περίληψη

• Απαιτείται γνώση: Ενδιάμεσο CSS, βασικό JavaScript, προηγμένο HTML
• Απαιτεί: Ένας αξιοπρεπής επεξεργαστής κειμένου, ένας σύγχρονος browser
• Ώρα έργου: Όσο μπορείτε να αντέξετε να εργαστείτε σε αυτό
• Αρχείο υποστήριξης

Αυτό το άρθρο δημοσιεύτηκε για πρώτη φορά στο τεύχος 232 του περιοδικού .net.

Επειδή είμαι γενναιόδωρος σε ένα σφάλμα, αυτό το μήνα θα μοιραστώ μαζί σας κάποιο υλικό που έχει ληφθεί από το βιβλίο μου - Πρακτικό CSS3: Ανάπτυξη και σχεδίαση - και, πιο συγκεκριμένα, από το κεφάλαιο κινουμένων σχεδίων CSS. Είμαι οπαδός των μεταβάσεων, των μετασχηματισμών και των κινούμενων εικόνων CSS, αλλά μέχρι τώρα έχω δει κυρίως να δημιουργούν παραλείψεις.

Όντας ο ρεαλιστικός τύπος, τους έχω εξερευνήσει ως επί το πλείστον από μια πραγματική προοπτική, σκέφτομαι πώς μπορούν να χρησιμοποιηθούν για τη δημιουργία χρήσιμων λειτουργιών σε ιστοσελίδες. Και φυσικά, πρέπει να εξετάσουμε τι συμβαίνει όταν τα παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν αυτές τις λειτουργίες έχουν πρόσβαση στις σελίδες σας. Μερικές φορές μπορούμε να βασιστούμε στη χαριτωμένη υποβάθμιση, αλλά μερικές φορές πρέπει να αντιμετωπίσουμε τέτοιες διαφορές προγράμματος περιήγησης με έναν πιο έξυπνο τρόπο.

Προς το σκοπό αυτό, σε αυτό το σεμινάριο θα σας παρουσιάσω μερικά διασκεδαστικά (και ελπίζουμε χρήσιμα) παραδείγματα που χρησιμοποιούν μετασχηματισμούς CSS3, μεταβάσεις και κινούμενα σχέδια και χρησιμοποιούν το Modernizr για να προσφέρουν εναλλακτικά στυλ σε παλαιότερα, μη υποστηριζόμενα προγράμματα περιήγησης .

01. Μια τρισδιάστατη περιστρεφόμενη επαγγελματική κάρτα

Αρχικά, ας δούμε μια επαγγελματική κάρτα που αναποδογυρίζει με τρισδιάστατο μετασχηματισμό (με ρεαλιστικές διαστάσεις μεγέθους σε χιλιοστά!). Μπορείτε να βρείτε ένα τελικό παράδειγμα στο αρχείο two-face-cheek.html.

Η σήμανση είναι πολύ απλή:

div id = "wrapper" tabindex = "0">
div id = "εσωτερικό-περιτύλιγμα">
div id = "εμπρός">
/ div>
div id = "πίσω">
/ div>
/ div>
/ div>

Σε αυτήν την περίπτωση, το εσωτερικό περιτύλιγμα χρησιμοποιείται για το μέγεθος και τη θέση, και ολόκληρη η σχεδιαστική εργασία εφαρμόζεται στα δύο μπροστινά και πίσω τμήματα για το μπροστινό και το πίσω μέρος της κάρτας. Το εξωτερικό περιτύλιγμα div είναι εκεί για να προσθέσετε hover και άλλα εφέ αλλαγής κατάστασης.

Τα περιεχόμενα div είναι ασήμαντα για τους σκοπούς αυτού του παραδείγματος, αν και για μια πραγματική επαγγελματική κάρτα ίσως θα θέλατε να επισημάνετε τα στοιχεία επικοινωνίας με έναν πιο χρήσιμο τρόπο - για παράδειγμα, χρησιμοποιώντας μια μικρομορφή hCard. Πρώτα θα ορίσουμε μια μετάβαση στο εσωτερικό περιτύλιγμα και μετά θα το πούμε να διατηρήσει τον τρισδιάστατο χώρο:

# εσωτερικό-περιτύλιγμα {
...
μετάβαση: 1.5s όλα?
μετασχηματισμός: preserve-3d;
}

Στη συνέχεια, ορίστε οπίσθια ορατότητα: κρυφό; τόσο στο μπροστινό όσο και στο πίσω μέρος div::

#μπροστά πίσω {
...
οπίσθια ορατότητα: κρυφό;
}

Στη συνέχεια, ρυθμίστε την προεπιλεγμένη κατάσταση της επαγγελματικής κάρτας:

# μπροστά {
μετασχηματισμός: rotateX (0deg);
ευρετήριο z: 2;
}
#πίσω {
μετασχηματισμός: rotateX (180deg);
}

Το μπροστινό μέρος της κάρτας δεν χρειάζεται να περιστραφεί για την προεπιλεγμένη του κατάσταση. Ωστόσο, έχω εφαρμόσει ένα rotateX (0deg); μετατρέψτε το σε αυτό, επειδή φαίνεται να λύνει ένα πρόβλημα στον Firefox όπου μέρος του περιεχομένου στο μπροστινό μέρος της κάρτας εμφανίζεται αντίστροφα όταν ενεργοποιείται η αναστροφή της κάρτας, ακόμη και με οπίσθια ορατότητα: κρυφό; εφαρμοσμένος. Παράξενο αλλά αληθινό.

Το πίσω μέρος της κάρτας περιστρέφεται γύρω από τον άξονα X κατά 180 μοίρες από προεπιλογή, επειδή θέλετε να είναι αόρατο από προεπιλογή (οπίσθια ορατότητα: κρυφό;) και ανάποδα. Χρειαζόμαστε επίσης ευρετήριο z στο μπροστινό μέρος για να εμφανιστεί στο μπροστινό μέρος. Από προεπιλογή, θα εμφανίζεται πίσω από το πίσω πρόσωπο, επειδή το πίσω πρόσωπο έρχεται αργότερα στην αρχική σειρά.

Το τελευταίο βήμα είναι να περιστρέψετε ολόκληρη την επαγγελματική κάρτα κατά 180 μοίρες όταν είναι στραμμένη πάνω / εστιασμένη:

#wrapper: hover # inner-wrapper, #wrapper: εστίαση # εσωτερικό-περιτύλιγμα {
μετασχηματισμός: rotateX (180deg);
}

Αυτό παράγει το αποτέλεσμα που φαίνεται στις δύο εικόνες στην αντίθετη σελίδα.

Για να δείξουμε γιατί οπίσθια ορατότητα: κρυφό; είναι απαραίτητο σε τέτοιες καταστάσεις, δοκιμάστε να αφαιρέσετε τη γραμμή από τον κώδικα και να φορτώσετε ξανά. Αν οπτικοακουστική ορατότητα: κρυφό; δεν χρησιμοποιείται, το αποτέλεσμα είναι χαλασμένο, με αποτέλεσμα το περιεχόμενο και των δύο πλευρών να είναι ορατό ανά πάσα στιγμή ή κάτι άλλο απρόσμενο να συμβεί (βλ. εικόνα παραπάνω).

02. Παροχή εναλλακτικών στυλ

Από προεπιλογή, το παράδειγμα αναστροφής της κάρτας βασίζεται σε έναν μετασχηματισμό 3D, ώστε οι θεατές που βλέπουν τα βλέμματα να μπορούν να δουν και τις δύο πλευρές της κάρτας. Αλλά αυτό δεν είναι καλό για προγράμματα περιήγησης που δεν υποστηρίζουν μετασχηματισμούς 3D. Για να παρέχουμε εναλλακτικά στυλ σε παλαιότερα προγράμματα περιήγησης, θα εφαρμόσουμε το Modernizr στη σελίδα μας (βλ two-face-cheek-modernizr.html στα αρχεία κώδικα).

Τα μη υποστηριζόμενα προγράμματα περιήγησης θα λάβουν μια κατηγορία no-csstransforms3d επισυνάπτεται στο δικό τους κεφάλι> μαθήματα, ώστε να μπορείτε να παρέχετε εναλλακτικό στυλ όπως παρακάτω:

.no-csstransforms3d #wrapper: hover #front, .no-csstransforms3d
#wrapper: εστίαση # μπροστά {
transform: rotate (-30deg) μετάφραση (-50%, - 100%);
μετάβαση: 0.8s all easy-in
}

Ο επιλογέας απογόνων εφαρμόζει μια μεταμόρφωση 2D στην μπροστινή όψη της κάρτας μόνο όταν είναι απόγονος του .no-csstransforms3d (Τα προγράμματα περιήγησης που υποστηρίζουν την περιστροφή 3D θα αγνοήσουν αυτό το στυλ). Αυτό το εναλλακτικό στυλ δίνει στα μη υποστηρικτικά προγράμματα περιήγησης πρόσβαση στο πίσω μέρος της κάρτας έτσι (βλ. Πάνω δεξιά).

Τι γίνεται όμως με τα παλαιότερα προγράμματα περιήγησης όπως το IE8 ή το Camino που δεν υποστηρίζουν μονάδες rem, διαβαθμίσεις, μετασχηματισμούς ή σκιά κειμένου; Το Modernizr δεν θα βοηθήσει με τις μονάδες rem, οπότε ο καλύτερος τρόπος για να τα αντιμετωπίσετε είναι να παρέχετε ένα εναλλακτικό μεγέθους pixel πριν από την έκδοση της μονάδας rem της ιδιότητάς σας στο ίδιο φύλλο στυλ ή ακόμα καλύτερα σε ένα φύλλο στυλ επιδιόρθωσης IE κρυμμένο μέσα ένα υπό όρους σχόλιο IE.

margin-top: 5px;
/ * το εναλλακτικό * /
περιθώριο κορυφής: 0.5rem;
/* το πρωτότυπο */

Για άλλες δυνατότητες CSS, θα πρέπει να συμπεριλάβετε τουλάχιστον το ακόλουθο CSS:

.no-csstransforms #wrapper: hover # front, .no-csstransforms #wrapper: εστίαση
# μπροστά {
περιθώριο αριστερά: -350 εικονοστοιχεία;
}
.no-cssgradients #front, .no-cssgradients #back {
φόντο: # FF3500;
}
.no-cssgradients #front p, .no-cssgradients # πίσω p {
/ * ιδανικά θα πρέπει να είναι .no-texthadow, αλλά αυτό
δεν φαινόταν να δουλεύει για μένα * /
χρώμα: # 000000;
}

Ο πρώτος κανόνας εφαρμόζει μια ενημερωμένη : hover /: εστίαση κανόνας στην αναποδογυρισμένη κάρτα έτσι ώστε εάν το πρόγραμμα περιήγησης δεν υποστηρίζει μετασχηματισμούς 2D, αιωρώντας ή εστιάζοντας την κάρτα θα μετακινήσει το μέτωπο πάνω από 350 pixel για να αποκαλύψει το πίσω μέρος. Το δεύτερο παρέχει ένα συμπαγές χρώμα για να αντικαταστήσει το φόντο κλίσης σε μη υποστηρικτικά προγράμματα περιήγησης. Ο τρίτος κανόνας χρωματίζει το κείμενο μαύρο, οπότε είναι αναγνώσιμο χωρίς τις σκιές.

03. Κινούμενα σχέδια CSS και JavaScript

Ένας από τους τρόπους που προβλέπω ότι τα κινούμενα σχέδια CSS είναι χρήσιμα είναι να τα δηλώσω μέσα στο CSS σας και στη συνέχεια να τα ενεργοποιήσω μέσω JavaScript. Για να το δείξω αυτό, δημιούργησα ένα ενδιαφέρον παράδειγμα φόρμας (βλ animated-form.html και animated-form.css στα αρχεία κώδικα). Ας το παραδεχτούμε, μισούμε τις μορφές κωδικοποίησης και ψάχνουμε πάντα τρόπους για να τις κάνουμε πιο εύχρηστες και αποδοτικές στο χώρο! Αυτό το παράδειγμα δείχνει επίσης πώς να χρησιμοποιήσετε το Modernizr JavaScript API.

Δεν υπάρχει τίποτα αξιοσημείωτο για το HTML για αυτό το παράδειγμα. Το μεγαλύτερο μέρος της είναι μια πολύ απλή φόρμα τεσσάρων εισόδων με κουμπί Submit. Αλλά αν κοιτάξετε τον κωδικό, θα παρατηρήσετε ότι χρησιμοποιώ μια πολύ παρόμοια ρύθμιση με το παράδειγμα της επαγγελματικής κάρτας που συζητήθηκε παραπάνω. Το μπροστινό πρόσωπο έχει στοιχεία μορφής σε αυτό, ενώ το πίσω πρόσωπο έχει το μήνυμα «Ευχαριστώ για τα σχόλιά σας!»:

form id = "feedback-form" action = "#">
div id = "εμπρός">
h1> Δώστε μας τα σχόλιά σας! / h1>
div>
ετικέτα για = "name" tabindex = "0">… / label>
type input = "text" name = "name" id = "name">
/ div>
/ div>
div id = "πίσω">
h2> Σας ευχαριστούμε για τα σχόλιά σας! / h2>
/ div>
/ μορφή>

Η διαφορά είναι ότι αντί να το κάνω animation μέσω μιας μετάβασης και να το ενεργοποιώ στο hover / focus μέσω ψευδο-τάξεων, έχω χρησιμοποιήσει ένα animation CSS, όπως αυτό:

@keyframes form-rotate {
από {
μετασχηματισμός: rotateX (0deg);
}
προς την {
μετασχηματισμός: rotateX (180deg);
}
}
.form-περιστροφή {
animation: form-rotate 1s προς τα εμπρός.
}

Τα βασικά καρέ κίνησης περιστρέφονται ό, τι κι αν το κινούμενο σχέδιο εφαρμόζεται γύρω από τον άξονα X κατά 180 μοίρες και το κινούμενο σχέδιο εφαρμόζεται σε οποιοδήποτε στοιχείο έχει μια κλάση μορφή-περιστροφή. Αυτό θα είναι το φόρμα>και θα δούμε πώς γίνεται αυτό σε λίγο.

Η άλλη αξιοσημείωτη πτυχή είναι η h1>, και το γεγονός ότι η φόρμα γλιστρά μέσα και έξω από την οθόνη όταν το h1> γίνεται κλικ (σε προγράμματα περιήγησης που υποστηρίζουν κινούμενες εικόνες). Για να μετακινήσετε το h1> στην προεπιλεγμένη θέση του, θα χρησιμοποιήσουμε έναν μετασχηματισμό:

ω1 {
θέση: απόλυτη;
transform: rotate (90deg) μετάφραση (9.5rem, -23rem);
}

Προκειμένου να γίνει η ολίσθηση ολόκληρης της φόρμας και να μετακινηθεί προς τα έξω, έχουν δημιουργηθεί δύο κινούμενα σχέδια:

@keyframes form-out {
από {
μετασχηματισμός: translateX (0rem);
}
προς την {
μετασχηματισμός: translateX (38rem);
}
}
.form-out {
animation: form-out 1s προς τα εμπρός.
}
@keyframes form-in {
από {
μετασχηματισμός: translateX (38rem);
}
προς την {
μετασχηματισμός: translateX (0rem);
}
}
.form-in {
animation: form-in 1s προς τα εμπρός.
}

Δεν έχουμε εφαρμόσει τις τρεις κατηγορίες που εμφανίζονται παραπάνω σε τίποτα ακόμα - θα το κάνουμε μέσω κάποιου απλού JavaScript όταν κάνετε κλικ στο κουμπί Υποβολή και στο h1>. Ας δούμε λεπτομερώς τη JavaScript, ξεκινώντας από την κορυφή:

var submit = document.getElementById ("υποβολή");
var form = document.querySelector ("φόρμα");
var back = document.getElementById ("πίσω");
var h1 = document.querySelector ("h1");

Εδώ, οι αναφορές σε στοιχεία αποθηκεύονται στη σελίδα στις ακόλουθες μεταβλητές:

• υποβάλλουν: Το αναγνωριστικό εισαγωγής = "submit">
• μορφή: Η μορφή> στοιχείο
• πίσω: Το πίσω πρόσωπο της φόρμας το div> με το χαρακτηριστικό #back
• Η1: Το στοιχείο h1>

Στη συνέχεια, θα δημιουργήσουμε δύο ακροατές εκδηλώσεων:

subm.addEventListener ("κλικ", rotateForm, false);
h1.addEventListener ("κλικ", formOut, false);

Η πρώτη γραμμή προσθέτει έναν ακροατή συμβάντων στο υποβάλλουν μεταβλητή αναφορά, η οποία εκτελεί το περιστροφήForm όταν κάνετε κλικ στο κουμπί Υποβολή. Η δεύτερη γραμμή προσθέτει έναν ακροατή συμβάντων στο η1 μεταβλητή αναφορά, η οποία εκτελεί το formOut λειτουργία όταν το h1> κλικ στο στοιχείο.

Παρακαλούμε να σημειώσετε ότι querySelector και addEventListener δεν υποστηρίζονται από εκδόσεις IE νωρίτερα από την έκδοση 9. Επομένως, για υποστήριξη IE 6-8, θα πρέπει να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε διαφορετικό κώδικα - θα το αφήσω ως άσκηση αναγνώστη!

Τώρα, ας προχωρήσουμε στην πρώτη λειτουργία:

function formOut () {
if (form.className === "" || form.className === "form-in") {
εάν (Modernizr.cssanimations) {
form.setAttribute ("class", "form-out");
} αλλιώς {
form.setAttribute ("class", "form-fallback");
form.style.left = "0rem";
}
h1.innerHTML = "Απόκρυψη φόρμας σχολίων!";
} αλλιώς {
εάν (Modernizr.cssanimations) {
form.setAttribute ("class", "form-in");
} αλλιώς {
form.setAttribute ("class", "");
form.style.left = "-38rem";
}
h1.innerHTML = "Δώστε μας τα σχόλιά σας!";
}
}

Έχω χρησιμοποιήσει ένα αν ... αλλιώς δήλωση για να δείτε αν η φόρμα είναι εκτός οθόνης και θέλω να τη μετακινήσω ή αν είναι στην οθόνη και θέλω να την μετακινήσω. Ουσιαστικά, form.className === "" || form.className === "form-in" καθορίζει «εάν η κλάση της φόρμας είναι κενή Ή έχει ρυθμιστεί σε φόρμα, τότε θα είναι εκτός οθόνης. επομένως, εκτελέστε την πρώτη δοκιμή Modernizr ». Εν τω μεταξύ modernizr.cssanimations ελέγχει αν τα κινούμενα σχέδια CSS υποστηρίζονται από το τρέχον πρόγραμμα περιήγησης. Εάν είναι, ορίζουμε την τιμή τάξης της φόρμας σε διαμορφώνω για να ενεργοποιήσετε την κινούμενη εικόνα που την φέρνει στην οθόνη.

Εάν η δοκιμή Modernizr επιστρέψει ψευδής, τότε το κινούμενο σχέδιο δεν θα λειτουργήσει - έτσι αντ 'αυτού ορίζουμε το αριστερά ιδιοκτησία της φόρμας προς 0rem για να εμφανιστεί η φόρμα στην οθόνη με μία κίνηση και ορίστε την κλάση φόρμας σε εναλλακτική φόρμα, διασφαλίζοντας ότι το δεύτερο μέρος της συνάρτησης θα εκτελεστεί όταν ο χρήστης προσπαθήσει να αποκρύψει ξανά τη φόρμα (εάν παραλείψετε να το κάνετε αυτό, το δεύτερο μέρος της συνάρτησης δεν θα εκτελεστεί ποτέ επειδή η κλάση φόρμας θα είναι πάντα κενή). Δεν είναι τόσο ωραίο, αλλά τουλάχιστον λειτουργεί.

Το τελευταίο μέρος αυτής της ενότητας του κώδικα (το h1.innerHTML μέρος) αλλάζει το κείμενο μέσα στο h1> στοιχείο σε ένα μήνυμα που λέει στους χρήστες ότι μπορούν να το κρύψουν ξανά αν το θέλουν.

Εάν το εξωτερικό αν το τεστ επιστρέφει ψευδές, τότε η φόρμα πρέπει να είναι στην οθόνη και ο κωδικός μέσα στο αλλού εκτελείται μπλοκ, το οποίο τρέχει άλλο modernizr.cssanimations δοκιμή. Εάν αυτό επιστρέψει αληθινό, ο κωδικός αλλάζει την τιμή κλάσης σε έντυπο για να το κινούμε ξανά εκτός οθόνης.

Εάν επιστρέψει ψευδές, το αριστερά η ιδιότητα επιστρέφεται στην αρχική της τιμή - για να την μετακινήσετε ξανά στην οθόνη με λιγότερο λαμπερό τρόπο - και η κλάση φόρμας έχει ρυθμιστεί ξανά σε κενό για να την επιστρέψει στην αρχική της κατάσταση.

Το τελευταίο μέρος του άλλου μπλοκ αλλάζει το h1> επιστρέψτε σε αυτό που ήταν αρχικά. Τώρα στη δεύτερη λειτουργία, περιστροφήForm ():

συνάρτηση rotateForm () {
εάν (Modernizr.cssanimations && Modernizr.csstransforms3d) {
form.setAttribute ("class", "form-rotate");
form.style.left = "0rem";
} αλλιώς {
back.style.zIndex = "5";
}
}

Εδώ, εάν Modernizr.cssanimations και Modernizr.csstransforms3d είναι αλήθεια, setAttribute θα ορίσει το φόρμα>Το χαρακτηριστικό της κατηγορίας στο μορφή-περιστροφή. Αυτό ισχύει για το γυρίζω κινούμενη εικόνα στη φόρμα, καθιστώντας την περιστρεφόμενη για να αποκαλύψει το μήνυμα «Ευχαριστώ». Αλλά θέτοντας το φόρμα>Τάξη για μορφή-περιστροφή θα παρακάμψει την κατηγορία του διαμορφώνω ορίστηκε νωρίτερα, κάτι που θα έκανε τη φόρμα να μετακινηθεί ξανά εκτός οθόνης. επομένως, έχουμε αναγκάσει τη φόρμα να παραμείνει στην οθόνη ορίζοντας το αριστερά ιδιότητα έως 0 με form.style.left = "0rem".

Εάν η δοκιμή Modernizr δεν είναι αληθινή, το πρόγραμμα περιήγησης δεν υποστηρίζει CSS Animations ή / και 3D μετασχηματισμούς. Επομένως, θέλω διαφορετικά στυλ να εμφανίζονται όταν κάνετε κλικ στο κουμπί Υποβολή.

Προκειμένου να επιτρέψουμε στα προγράμματα περιήγησης που δεν υποστηρίζουν να βλέπουν το μήνυμα «Ευχαριστώ», χρησιμοποιήσαμε back.style.zIndex = "5"; για να ορίσετε το ευρετήριο z απο #πίσω div στο 5, κάνοντάς το να εμφανίζεται πάνω από οτιδήποτε άλλο στη σειρά στοίβαξης όταν κάνετε κλικ στο κουμπί Υποβολή. Μπορείτε να δείτε πώς οι τρεις καταστάσεις που κινούμαι στο μεταξύ φαίνονται στις παραπάνω εικόνες και στην προηγούμενη σελίδα.

Τέλος, προστίθενται ορισμένα εναλλακτικά του Modernizr CSS για να επιτρέψουν σε παλαιότερα προγράμματα περιήγησης να κάνουν χρήση της φόρμας:

.no-cssgradients # εμπρός, .no-cssgradients #back {
χρώμα φόντου: # 009999;
}
μορφή .no-cssanimations {
αριστερά: 0;
}
.no-csstransforms h1 {
θέση: στατική;
}
.no-csstransforms .extended-info {
οθόνη: κανένα;
}

04. Περίληψη

Σίγουρα δεν περιμένω να πρέπει να γνωρίζετε το JavaScript μόνο για να χρησιμοποιήσετε το CSS. Εάν δεν καταλαβαίνετε τον κωδικό JS, απλώς δώστε τον στον φιλικό προγραμματιστή JavaScript και συνεργαστείτε σε αυτόν. Αυτός ή αυτή μπορεί πιθανώς να κάνει πολύ καλύτερη δουλειά από αυτό που έχω.

Σε κάθε περίπτωση, αξίζει να εξερευνήσετε τέτοιες τεχνικές, διότι είναι ωραίο να χειρίζεστε το animation με CSS αντί να χρειάζεται να τα γράφετε όλα σε JavaScript. Ακόμα κι αν χρησιμοποιείτε το jQuery ή μια παρόμοια βιβλιοθήκη, είναι ακόμα πολύ βαρύ να προσθέσετε στη σελίδα μόνο για μερικά απλά κινούμενα σχέδια.

Ανακαλύψτε 101 σεμινάρια CSS και Javascript.