Εάν σας αρέσει το εφέ, τότε μπορείτε απλώς να αντιγράψετε τελειωμένος κωδικόςκαι χρησιμοποιήστε το!
Ζωντανέψτε τον ιστότοπό σας!
Διάφορα εφέ αιώρησης μπορούν να φέρουν φρεσκάδα στις σελίδες του ιστότοπού σας. Προηγουμένως, για οποιοδήποτε αποτέλεσμα, έπρεπε να ασχοληθείς με τη javascript, αλλά σήμερα, μετά την έλευση της τεχνολογίας CSS3, όλα μπορούν να γίνουν παρακάμπτοντας τη χρήση javascript.
Όλα τα σημερινά παραδείγματα έχουν εφαρμοστεί και βελτιστοποιηθεί για νέα σύγχρονα προγράμματα περιήγησης και σίγουρα θα λειτουργήσουν σε αυτά (για παράδειγμα, σε προγράμματα περιήγησης οικογένειας Mozilla ή WebKit). Δεν μπορούμε να σας διαβεβαιώσουμε ότι θα εργαστείτε στο IE, αλλά στα περισσότερα φρέσκες εκδόσειςτα εφέ θα λειτουργήσουν ακριβώς όπως θα έπρεπε. Αλλά μην ξεχνάτε ότι για κάθε εφέ, έχει προετοιμαστεί μια ελκυστική επιλογή επαναφοράς σε περίπτωση που το πρόγραμμα περιήγησης εξακολουθεί να μην υποστηρίζει το εφέ.
01. Ζουμ
Διαδήλωση:Για προβολή
Αυτό το εφέ είναι πολύ απλό στην εφαρμογή του και μπορεί να εφαρμοστεί με διάφορους τρόπους. Χρησιμοποιήσαμε μια μέθοδο όπου μια παράμετρος περιθωρίου προστίθεται σε κάθε εικόνα και, στη συνέχεια, όταν τοποθετηθεί ο δρομέας του ποντικιού, αυτή η παράμετρος αφαιρείται. Ας υποθέσουμε ότι η ρύθμιση του περιθωρίου ξεκινά από τα 15 εικονοστοιχεία και κατά το δείκτη του ποντικιού γίνεται 2 εικονοστοιχεία, γεγονός που κάνει την εικόνα να φαίνεται να αναπηδά. Μπορείτε επίσης να χρησιμοποιήσετε αυτό το εφέ με κείμενο, ακόμα κι αν οι σύνδεσμοι είναι κάθετοι αντί για οριζόντιους.
Η μετάβαση εδώ μπορεί να ρυθμιστεί κατά την κρίση σας και το αποτέλεσμα θα είναι επίσης ελκυστικό χωρίς καμία μετάβαση. Κάναμε, για παράδειγμα, το εφέ λίγο λείο, το οποίο πιστεύαμε ότι θα έδινε όρεξη στο εφέ.
Ανεβάστε το CSS
Ex1 img(
περίγραμμα: 5px συμπαγές #ccc;
float: αριστερά;
περιθώριο: 15 εικονοστοιχεία
-webkit-transition: margin 0,5s ease-out.
-moz-transition: margin 0,5s ease-out.
-o-transition: margin 0,5s ease-out;
}
Ex1 εικόνα: αιώρηση (
margin-top: 2px;
}
02. Stack & Grow
Διαδήλωση:Για προβολή
Ο συγγραφέας αυτού του εφέ προφανώς ήθελε να επιτύχει κάποιου είδους εφέ λάμπας λάβας, καθώς όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από τη λίστα συνδέσμων με το ποντίκι, κάθε εικόνα επεκτείνεται αργά και στη συνέχεια επιστρέφει στο αρχικό της μέγεθος.
Για υλοποίηση, εδώ χρησιμοποιήθηκαν εικόνες μεγέθους 400x133 pixel. Έπειτα άλλαξαν το μέγεθός τους σε 300x100 pixel με CSS και επεκτάθηκαν με το hover. Δεδομένου ότι ολόκληρη η λίστα είναι στοίχιση στο κέντρο στο παράδειγμα, νέο μέγεθοςοι εικόνες διαθλούν όλη την ευθυγράμμιση. Αυτό το πρόβλημα μπορεί να λυθεί ορίζοντας τα αρνητικά περιθώρια στο μισό του πλάτους των μεγεθυσμένων εικόνων.
Κωδικός CSS για Stack & Grow
/*Παράδειγμα 2*/
#container (
πλάτος: 300 px
περιθώριο: 0 αυτόματο;
}
#ex2 img(
ύψος: 100 px;
πλάτος: 300 px
περιθώριο: 15 px 0;
-webkit-transition: all 1s easy?
-moz-transition: all 1s ease?
-o-transition: all 1s ease?
}
#ex2 εικόνα: αιώρηση (
ύψος: 133 px;
πλάτος: 400 px
margin-αριστερά: -50px;
}
03. Διαγραφή κειμένου
Διαδήλωση:Για προβολή
Εδώ ο συγγραφέας ήθελε να δημιουργήσει κάτι σαν εκδήλωση τύπου javascriptόταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο και το εφέ εμφανίζεται σε ένα άλλο. Εδώ, το κείμενο και η εικόνα τραβήχτηκαν και στη συνέχεια τοποθετήθηκαν σε ξεχωριστό τμήμα αριστερής στοίχισης. Στη συνέχεια, το χρώμα: διαφανές και το ύψος γραμμής: 0 px προστέθηκαν στο div. Αυτό επέτρεψε στο κείμενο να τοποθετηθεί στην κορυφή του div και να κρυφτεί εντελώς.
Για να επανεμφανιστεί το κείμενο, απλώς αλλάζουμε το χρώμα και το ύψος της γραμμής. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, το κείμενο εμφανίζεται ξανά. Πολύ διασκεδαστικό και ελαφρύ αποτέλεσμα.
Fade Text In Effect Code CSS
#πρώην 3(
πλάτος: 730 px
ύψος: 133 px;
Ύψος γραμμής: 0 εικονοστοιχεία
χρώμα: διαφανές
μέγεθος γραμματοσειράς: 50 px;
γραμματοσειρά-οικογένεια: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
Βάρος γραμματοσειράς: 300
μετατροπή κειμένου: κεφαλαία;
}
#ex3:hover(
Ύψος γραμμής: 133 px;
χρώμα: #575858;
}
#ex3 img(
float: αριστερά;
περιθώριο: 0 15px;
}
04. Στραβή φωτογραφία
Διαδήλωση:Για προβολή
Αυτό το εφέ είναι πολύ απλό, αλλά είναι εξαιρετικό για μια συλλογή μικρογραφιών. Πρώτα πρέπει να δημιουργήσετε ένα πλέγμα με εικόνες και στη συνέχεια να περιστρέψετε τις εικόνες όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους, κάτι που δημιουργεί ένα ελκυστικό αποτέλεσμα.
Εδώ πρέπει να χρησιμοποιήσετε πολλά νέα τιμές css, επομένως θα πρέπει επίσης να εξετάσετε την επιλογή επαναφοράς για προηγούμενες εκδόσεις προγραμμάτων περιήγησης. Στη γκαλερί μας, θα χρησιμοποιηθούν μεταβάσεις, μεταμορφώσεις, καθώς και σκιές μπλοκ, ωστόσο, σύμφωνα με την επιθυμία σας. Ο μετασχηματισμός θα είναι υπεύθυνος για την περιστροφή της εικόνας και οι μεταβάσεις θα είναι υπεύθυνες για το απαλό και ομαλό αποτέλεσμα.
Εδώ μπορείτε να χρησιμοποιήσετε ψευδο-επιλογείς.
Κωδικός CSS για Crooked Photo
#πρώην 4 (
πλάτος: 800 px
περιθώριο: 0 αυτόματο;
}
#ex4 img(
περιθώριο: 20 px
περίγραμμα: 5px συμπαγές #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
-webkit-transition: όλα τα 0,5s ease-out.
-moz-transition: όλα τα 0,5s ευκολία?
-o-transition: όλα τα 0,5s ευκολία?
}
#ex4 εικόνα: αιώρηση (
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. Fade In and Reflect
Διαδήλωση:Για προβολή
Αυτό το εφέ είναι λίγο δύσκολο να εφαρμοστεί, γι' αυτό έπρεπε να ασχοληθούμε λίγο με αυτό για να λειτουργήσει. Η προεπιλεγμένη θέση εικόνας είναι ελαφρώς διαφανής. Στη συνέχεια, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, το επίπεδο διαφάνειας μειώνεται και η εικόνα επιστρέφει στην αρχική της εμφάνιση, καθώς και μια ελαφριά λάμψη και αντανάκλαση (μόνο για προγράμματα περιήγησης οικογένειας WebKit).
Δυστυχώς, η αντανάκλαση δεν είναι ακριβώς μια μετάβαση, επομένως εμφανίζεται αμέσως, παρόλο που το υπόλοιπο περιεχόμενο εμφανίζεται σε αργή κίνηση.
Εάν έχετε σύγχυση σχετικά με τις αντανακλάσεις CSS, μπορείτε να μάθετε περισσότερα σχετικά με αυτό σε αυτό το άρθρο (David Walsh).
Fade In and Reflect Code CSS
#πρώην 5 (
πλάτος: 700 px
περιθώριο: 0 αυτόματο;
Ελάχιστο ύψος: 300 px
}
#ex5 img(
περιθώριο: 25 εικονοστοιχεία
αδιαφάνεια: 0,8
περίγραμμα: 10px συμπαγές #eee;
/*Μετάβαση*/
-webkit-transition: όλα τα 0,5s ευκολία.
-moz-transition: όλα τα 0,5s ευκολία?
-o-transition: όλα τα 0,5s ευκολία?
/*Αντανάκλαση*/
-webkit-box-reflect: κάτω από 0 εικονοστοιχεία -webkit-gradient(γραμμικό, επάνω αριστερά, κάτω αριστερά, από(διαφανές), color-stop(.7, διαφανές), σε(rgba(0,0,0,0,1)) )
}
#ex5 εικόνα: αιώρηση (
αδιαφάνεια: 1
/*Αντανάκλαση*/
-webkit-box-reflect: κάτω από 0 εικονοστοιχεία -webkit-gradient(γραμμικό, αριστερό επάνω, αριστερό κάτω, από(διαφανές), color-stop(.7, διαφανές), σε(rgba(0,0,0,0,4)) )
/*Λάμψη*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
}
συμπέρασμα
Αυτά τα 5 παραδείγματα θα πρέπει να είναι αρκετά για να σας εμπνεύσουν να δημιουργήσετε κάτι δικό σας. Θυμηθείτε ότι μπορείτε πάντα να πειραματιστείτε ήδη έτοιμα παραδείγματακαι μετά πείτε μας για αυτούς.
Εάν έχετε συναντήσει άλλα εντυπωσιακά εφέ κάπου στο διαδίκτυο, ενημερώστε μας και άλλους αναγνώστες σχετικά.
Καταρχήν, για όσους δεν ασχολούνται καθόλου με το θέμα ή δεν ασχολούνται καθόλου με το θέμα, θα εξηγήσω εν συντομία τι είναι τα εφέ αιώρησης. το διαφορετικά είδηεφέ (αναδυόμενοι υπότιτλοι, συμβουλές εργαλείων, ομαλές μεταβάσεις, μετασχηματισμός, περιστροφή, αύξηση, μετατόπιση, κ.λπ., κ.λπ.) που εφαρμόζονται στα στοιχεία του ιστότοπου όταν τοποθετείτε τον δείκτη του ποντικιού πάνω τους. Αυτά τα αποτελέσματα μπορούν να πραγματοποιηθούν τόσο με τη βοήθεια διαφόρων Πρόσθετα jQueryκαι καθαρό CSS3.
Σήμερα ετοίμασα μια μεγάλη επιλογή από πρωτότυπα εφέ hover για εικόνες που δημιουργήθηκαν με CSS3, χωρίς να συμπεριλάβω βιβλιοθήκες javascript. Δεν θα μιλήσω για τα πλεονεκτήματα και τα μειονεκτήματα της εφαρμογής των εφέ hover σε καθαρό CSS3, αυτό είναι ένα άλλο θέμα, απλά κοιτάξτε τα παραδείγματα και, εάν είναι απαραίτητο, χρησιμοποιήστε αυτό που σας αρέσει στον ιστότοπό σας. Όλα τα εφέ που παρουσιάζονται στην ανασκόπηση παρέχονται με επίδειξη και λεπτομερή τεκμηρίωση με πηγαίους κώδικες. Τα εγχειρίδια είναι ως επί το πλείστον στα αστικά, αλλά όλα είναι λίγο πολύ διαισθητικά.
Θέλω απλώς να επιστήσω την προσοχή σας στο γεγονός ότι όλα αυτά τα παραδείγματα θα λειτουργούν σωστά μόνο σε σύγχρονα προγράμματα περιήγησης που υποστηρίζουν ιδιότητες CSS3.
Για να μην σπάσω τη συνολική εικόνα, δεν παραμόρφωσα τα ονόματα των εφέ με αυτόματη μετάφραση (με εξαίρεση κάποια), άφησα τους αρχικούς τίτλους όπως τους αποκαλούσε ο προγραμματιστής.
Υψηλά ενδιαφέρον αποτέλεσμαόταν τοποθετείτε τον δείκτη του ποντικιού πάνω από μικρογραφίες εικόνων, χρησιμοποιώντας λεπτές γραμμές στο σχεδιασμό και την τυπογραφία. Πολλά διαφορετικά είδη εφέ λεζάντας εικόνας, απαλοί και μη ενοχλητικοί τρισδιάστατοι μετασχηματισμοί και ομαλές μεταβάσεις ψευδοστοιχείων. Λειτουργεί μόνο σε σύγχρονα προγράμματα περιήγησης.
Το iHover είναι μια εντυπωσιακή συλλογή από καθαρά εφέ αιώρησης CSS3 με υποστήριξη Bootstrap 3. Χτισμένο σε Scss CSS (αρχείο), εύκολα τροποποιήσιμο με μεταβλητές. Ο κώδικας είναι αρθρωτός, δεν χρειάζεται να συμπεριλάβετε ολόκληρο το αρχείο. 30+ διαφορετικά εφέ σε ένα πακέτο. Όλα είναι αρκετά καλά τεκμηριωμένα, τα εφέ είναι πολύ εύκολα στη χρήση. Το μόνο που χρειάζεται να κάνετε είναι να δημιουργήσετε σωστά τη σήμανση HTML και να συμπεριλάβετε το αρχείο CSS για να λειτουργήσει.
Δημιουργεί μερικά απλά αλλά κομψά εφέ αιώρησης για λεζάντες εικόνων. Η ιδέα είναι ότι όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τις μικρογραφίες, μπορείτε να εμφανίσετε αποτελεσματικά τον τίτλο, το όνομα του συγγραφέα και το κουμπί σύνδεσης. Ορισμένα εφέ χρησιμοποιούν τρισδιάστατους οπτικούς μετασχηματισμούς.
Ένα πολύ απλό εφέ μετάβασης, χωρίς κανένα κουδούνι και σφυρίχτρα, μια εντελώς στρογγυλή εικόνα σε ένα πλαίσιο, μεταμορφώνεται αλλάζοντας την εστίαση στο hover και τέλος.
CSS3 Εφέ Hover για μικρογραφίες
Ο προγραμματιστής τοποθετεί την εργασία του ως παράδειγμα συλλογής εικόνων με εφέ μετάβασης όταν εμφανίζονται σχολιασμοί (λεζάντες) σε μικρογραφίες. Δηλώθηκε ισχυρή υποστήριξη σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE 9+. Φυσικά, είναι δύσκολο να το ονομάσουμε μια ολοκληρωμένη γκαλερί, αλλά το αποτέλεσμα της εμφάνισης των υπογραφών είναι αρκετά ενδιαφέρον.
Ένα άλλο σύνολο κανόνων CSS για τη δημιουργία εντυπωσιακών εφέ αιώρησης σε τέλεια στρογγυλές μικρογραφίες. Το πακέτο περιέχει 7 τύπους μεταβάσεων CSS3, πολύ λεπτομερή τεκμηρίωση για τη ρύθμιση και τη χρήση. Τα εφέ υποστηρίζονται από όλα τα σύγχρονα προγράμματα περιήγησης.
Περιστρέψτε τις μικρογραφίες κατά την τοποθέτηση του δείκτη
Ένα απλό εφέ της περιστροφής στρογγυλών μικρογραφιών όταν ποντάρετε πάνω τους με τον κέρσορα του ποντικιού, μπορείτε να δείτε περίπου το ίδιο στο ιστολόγιό μου, στις ανακοινώσεις ανάρτησης στην κύρια σελίδα. Υλοποιείται σε μερικές γραμμές κώδικα css.
Αν μεταφραστεί κυριολεκτικά: "Σέξι εφέ όταν αιωρείται πάνω από εικόνες." Φυσικά, είναι απίθανο να παρατηρήσετε κάτι τόσο σέξι σε αυτό το εφέ, εκτός αν έχετε άγρια φαντασία, αλλά το αποτέλεσμα είναι ενδιαφέρον με τον δικό του τρόπο και αξίζει να το προσέξετε.
Πέντε διαφορετικά εφέ για εικόνες όταν αιωρούνται πάνω τους. Αναδυόμενες υπογραφές σε τρεις παραλλαγές, κουρτίνες σε μορφή αλλαγής του βαθμού διαφάνειας και περιστροφής με οριζόντια κίνηση.
4 Τύποι εφέ κινουμένων σχεδίων για λεζάντες εικόνων, που υλοποιούνται αποκλειστικά μέσω CSS3. Διαφορετικές θέσεις στην εμφάνιση και τα εφέ μετάβασης, αρκετά τυπική απόδοση. Για να κατανοήσετε πώς λειτουργεί το κινούμενο σχέδιο, ρίξτε μια ματιά στο πηγήδοκιμαστική σελίδα, δεν βρήκα καμία ξεχωριστή τεκμηρίωση.
Γκαλερί μικρογραφιών με επένδυση πλέγματος με διάφορα εφέ εμφάνισης λεζάντας, περιστροφής, εξασθένισης, αιώρησης κ.λπ. Η τεκμηρίωση σχετικά με τη χρήση και τη διαμόρφωση είναι μάλλον σπάνια, αλλά μπορείτε να τα καταλάβετε με ιδιαίτερη επιθυμία.
Αυτό το εφέ δεν αντιπροσωπεύει τίποτα το ιδιαίτερο, μια συνηθισμένη αλλαγή στη φωτεινότητα των εικόνων κατά την αιώρηση, εκτός από το ότι προστίθενται στοιχεία κινούμενης εικόνας. Θα πρέπει να ασχοληθείτε μόνοι σας με τις λεπτομέρειες της υλοποίησης αποσυνθέτοντας τους πηγαίους κώδικες επίδειξης.
Άλλο ένα σετ 10 εφέ αιώρησης για εικόνες, διάφορες τροποποιήσεις μικρογραφιών κατά την τοποθέτηση του ποντικιού, τη μεγέθυνση, την περιστροφή, την περιστροφή, τη σκουρόχρωμη κ.λπ.
Εφέ κίνησης συνόρων
Διάφορα εφέ animation καρέ γύρω από εικόνες, φαίνεται αρκετά ελκυστική, υπάρχει ένας λεπτομερής οδηγός για τη ρύθμιση και τη χρήση.
Αυθεντικά εφέ αιώρησης CSS3 που χρησιμοποιούνται για να κάνουν τους λεζάντες μικρογραφιών εικόνων να εμφανίζονται αποτελεσματικά κατά την τοποθέτηση του δείκτη. Το σύνολο κανόνων CSS περιλαμβάνει 10 διαφορετικά εφέ που μπορείτε να χρησιμοποιήσετε ξεχωριστά για διαφορετικές εικόνες. Τα εφέ είναι πραγματικά εντυπωσιακά, ειδικά αν σκεφτεί κανείς ότι όλα γίνονται με το CSS3. Αναλυτικός οδηγόςθα σε βοηθήσει να καταλάβεις τι είναι τι.
Η ιδέα είναι να δημιουργήσετε ένα SVG που είναι σχήμα φόντου για κάποιο κείμενο και μετατρέπεται σε διαφορετικό σχήμα κατά την τοποθέτηση του δείκτη. Με αυτόν τον τρόπο, μπορείτε να κάνετε πολλές διαφορετικές επιλογές, αλλά στο παράδειγμα, εμφανίζονται τρεις τύποι εφέ μετάβασης. Το πλεονέκτημα της χρήσης SVG είναι ότι μπορούμε να αλλάξουμε το μέγεθος της φόρμας ώστε να ταιριάζει με το μέγεθος του γονικού κοντέινερ.
Συρόμενες εικόνες
Η ουσία αυτού του εφέ είναι ότι η εικόνα μετακινείται πάνω-κάτω για να εμφανιστεί η λεζάντα. Εάν εργάζεστε με τις παραμέτρους στυλ, νομίζω ότι μπορείτε να επιτύχετε πολύ ωραία εφέ, και από προεπιλογή, όλα φαίνονται πολύ απλά.
Με αυτό το εφέ, όλα είναι απλά, οι λεζάντες των εικόνων γλιστρούν επάνω δεξιά ή κάτω αριστερά, με τη μορφή κορδέλας με ημιδιαφανές σκούρο φόντο, όλα αναδιαμορφώνονται πολύ απλά χρησιμοποιώντας τις ιδιότητες css.
Μια ενδιαφέρουσα λύση, οι μικρογραφίες παρουσιάζονται σε σκούρα μορφή, όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους, εμφανίζονται οι εικόνες και η υπογραφή εμφανίζεται σε ανοιχτόχρωμο φόντο.
Η λεζάντα για την εικόνα εμφανίζεται από τη γωνία και επεκτείνεται διαγώνια σε ολόκληρη την περιοχή της εικόνας.
Μερικές ακόμη ενδιαφέρουσες λύσεις για την εφαρμογή αναδυόμενων λεζάντων για μικρογραφίες εικόνων. Στο ηλεκτρονικό πρόγραμμα επεξεργασίας, μπορείτε να πειραματιστείτε με τις επιλογές και να επιτύχετε πιο εντυπωσιακά αποτελέσματα.
Εργαλειοθήκη όμορφα εφέόταν τοποθετείτε τον δείκτη του ποντικιού πάνω από μικρογραφίες, διάφορους τύπους εμφάνισης και σχεδίασης λεζάντες για φωτογραφίες. Οι λεπτές γραμμές σε αντίθεση με ένα ελαφρώς σκούρο φόντο δημιουργούν ευανάγνωστα μπλοκ πληροφοριών.
Παράξενα σχήματα και εφέ μεγέθυνσης σε συνδυασμό με το κινούμενο εφέ της εμφάνισης λεζάντες σε μικρογραφίες εικόνων.
Υπέροχα εφέ επικάλυψης εικονιδίων σε μικρογραφίες εικόνων σε διάφορες παραλλαγές εμφάνισης. Το παράδειγμα χρησιμοποιεί έναν χαρακτήρα (+) που περιγράφεται από έναν κύκλο χρησιμοποιώντας ακτίνα περιγράμματος: στο CSS, μπορείτε επίσης να χρησιμοποιήσετε μια γραμματοσειρά εικονιδίων για να κάνετε το αναδυόμενο πλαίσιο πιο ενημερωτικό.
6 λεζάντες εικόνων
6 Παραλλαγές εμφάνισης αναδυόμενων λεζάντων για εικόνες που μετακινούνται με χρήση του CSS3. Ένα λεπτομερές μάθημα για την υλοποίηση και τη διαμόρφωση, διαθέσιμοι πηγαίοι κώδικες για λήψη.
Πώς να δημιουργήσετε μερικά διακριτικά και μοντέρνα εφέ υποτίτλων.
Μάθετε πώς να δημιουργείτε μερικά απλά, αλλά κομψά εφέ αιώρησης για λεζάντες εικόνων. Η ιδέα είναι να έχετε ένα πλέγμα ψηφίων και να εφαρμόσετε ένα εφέ αιώρησης στα στοιχεία που θα αποκαλύπτει μια λεζάντα με τον τίτλο, τον συγγραφέα και ένα κουμπί σύνδεσης.
Επίγνωση κατεύθυνσης CSS3 Hover Effect με jQuery
Δημιουργήστε ένα εφέ αιώρησης με επίγνωση κατεύθυνσης χρησιμοποιώντας CSS3 και jQuery.
Μάθετε πώς μπορείτε να δημιουργήσετε ένα εφέ αιώρησης με επίγνωση κατεύθυνσης χρησιμοποιώντας μερικά στοιχεία CSS3 και jQuery. Η ιδέα είναι να σύρετε μια μικρή επικάλυψη πάνω από μερικές μικρογραφίες από την κατεύθυνση από την οποία ερχόμαστε με το ποντίκι.
Circle Hover Effects με μεταβάσεις CSS
Ένα σεμινάριο σχετικά με τον τρόπο δημιουργίας διαφορετικών εφέ αιώρησης σε κύκλους με μεταβάσεις CSS και τρισδιάστατες περιστροφές
Αυτό το σεμινάριο θα σας δείξει πέντε παραδείγματα εφέ αιώρησης CSS3 που χρησιμοποιούν διαφορετικές ιδιότητες CSS. Λάβετε υπόψη ότι τα εφέ CSS3 θα λειτουργούν σωστά μόνο σε σύγχρονα προγράμματα περιήγησης που υποστηρίζουν τις ιδιότητες CSS3 που χρησιμοποιούνται.
Μοναδικά εφέ Hover Button CSS
Μερικά δημιουργικά και μοντέρνα στυλ και εφέ κουμπιών για την έμπνευσή σας.
Αυτό το σετ κουμπιών CSS αποτελείται από μερικά απλά, δημιουργικά και διακριτικά στυλ και εφέ για να σας εμπνεύσει. Τα εφέ μπορούν να φανούν όταν τοποθετείτε τον δείκτη του ποντικιού σε ορισμένα κουμπιά και κάνετε κλικ σε άλλα. Κυρίως, χρησιμοποιούνται μεταβάσεις CSS, αλλά και κινούμενα σχέδια CSS και για ορισμένα κουμπιά χρησιμοποιείται λίγο JavaScript για την προσθήκη/αφαίρεση κλάσεων εφέ.
Εικονίδιο Εφέ Hover
Ένα σύνολο απλών στρογγυλών εφέ αιωρούμενων εικονιδίων με μεταβάσεις CSS και κινούμενα σχέδια για την έμπνευσή σας.
Ακολουθεί μια συλλογή από απλά εφέ αιώρησης εικονιδίων. Δημιουργήστε ένα λεπτό και κομψό εφέ χρησιμοποιώντας μεταβάσεις CSS και κινούμενα σχέδια στις άγκυρες και τα ψευδοστοιχεία τους.
Καταρχήν, για όσους δεν ασχολούνται καθόλου με το θέμα ή δεν ασχολούνται καθόλου με το θέμα, θα εξηγήσω εν συντομία τι είναι το hover-. Πρόκειται για διάφορους τύπους εφέ (αναδυόμενοι λεζάντες, συμβουλές, ομαλές μεταβάσεις, μετασχηματισμός, περιστροφή, αύξηση, μετατόπιση κ.λπ.) που εφαρμόζονται στα στοιχεία του ιστότοπου από τον δρομέα του ποντικιού σε αυτά. Αυτά μπορούν να υλοποιηθούν τόσο με τη βοήθεια διαφόρων πρόσθετων jQuery όσο και σε καθαρό .
Σήμερα ετοίμασα μια μεγάλη επιλογή από πρωτότυπα εφέ hover για εικόνες που δημιουργήθηκαν με CSS3, χωρίς να συμπεριλάβω βιβλιοθήκες javascript. Δεν θα μιλήσω για τα πλεονεκτήματα και τα μειονεκτήματα της εφαρμογής των εφέ hover σε καθαρό CSS3, αυτό είναι ένα άλλο θέμα, απλά κοιτάξτε τα παραδείγματα και, εάν είναι απαραίτητο, χρησιμοποιήστε αυτό που σας αρέσει στον ιστότοπό σας. Όλα τα εφέ που παρουσιάζονται στην ανασκόπηση παρέχονται με επίδειξη και λεπτομερή τεκμηρίωση με πηγαίους κώδικες. Τα εγχειρίδια είναι ως επί το πλείστον στα αστικά, αλλά όλα είναι λίγο πολύ διαισθητικά.
Θέλω απλώς να επιστήσω την προσοχή σας στο γεγονός ότι όλα αυτά τα παραδείγματα θα λειτουργούν σωστά μόνο σε σύγχρονα προγράμματα περιήγησης που υποστηρίζουν ιδιότητες CSS3.
Για να μην σπάσω τη συνολική εικόνα, δεν παραμόρφωσα τα ονόματα των εφέ με αυτόματη μετάφραση (με εξαίρεση κάποια), άφησα τους αρχικούς τίτλους όπως τους αποκαλούσε ο προγραμματιστής.
Πολύ ενδιαφέρον εφέ αιώρησης σε μικρογραφίες εικόνων, χρησιμοποιώντας λεπτές γραμμές στο σχεδιασμό και την τυπογραφία. Πολλά διαφορετικά είδη εφέ λεζάντας εικόνας, απαλοί και μη ενοχλητικοί τρισδιάστατοι μετασχηματισμοί και ομαλές μεταβάσεις ψευδοστοιχείων. Λειτουργεί μόνο σε σύγχρονα προγράμματα περιήγησης.
Το iHover είναι μια εντυπωσιακή συλλογή από καθαρά εφέ αιώρησης CSS3 με υποστήριξη Bootstrap 3. Χτισμένο σε Scss CSS (αρχείο), εύκολα τροποποιήσιμο με μεταβλητές. Ο κώδικας είναι αρθρωτός, δεν χρειάζεται να συμπεριλάβετε ολόκληρο το αρχείο. 30+ διαφορετικά εφέ σε ένα πακέτο. Όλα είναι αρκετά καλά τεκμηριωμένα, τα εφέ είναι πολύ εύκολα στη χρήση. Το μόνο που χρειάζεται να κάνετε είναι να δημιουργήσετε σωστά τη σήμανση HTML και να συμπεριλάβετε το αρχείο CSS για να λειτουργήσει.
Δημιουργεί μερικά απλά αλλά κομψά εφέ αιώρησης για λεζάντες εικόνων. Η ιδέα είναι ότι όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τις μικρογραφίες, μπορείτε να εμφανίσετε αποτελεσματικά τον τίτλο, το όνομα του συγγραφέα και το κουμπί σύνδεσης. Ορισμένα εφέ χρησιμοποιούν τρισδιάστατους οπτικούς μετασχηματισμούς.
Ένα πολύ απλό εφέ μετάβασης, χωρίς κανένα κουδούνι και σφυρίχτρα, μια εντελώς στρογγυλή εικόνα σε ένα πλαίσιο, μεταμορφώνεται αλλάζοντας την εστίαση στο hover και τέλος.
για μικρογραφίες CSS3
Ο προγραμματιστής τοποθετεί την εργασία του ως παράδειγμα συλλογής εικόνων με εφέ μετάβασης όταν εμφανίζονται σχολιασμοί (λεζάντες) σε μικρογραφίες. Η σίγουρη υποστήριξη δηλώνεται από τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE 9+. Φυσικά, είναι δύσκολο να το ονομάσουμε μια ολοκληρωμένη γκαλερί, αλλά το αποτέλεσμα της εμφάνισης των υπογραφών είναι αρκετά ενδιαφέρον.
Ένα άλλο σύνολο κανόνων CSS για τη δημιουργία εντυπωσιακών εφέ αιώρησης σε τέλεια στρογγυλές μικρογραφίες. Το πακέτο περιέχει 7 τύπους μεταβάσεων CSS3, πολύ λεπτομερή τεκμηρίωση για τη ρύθμιση και τη χρήση. Τα εφέ υποστηρίζονται από όλα τα σύγχρονα προγράμματα περιήγησης.
Περιστρέψτε τις μικρογραφίες κατά την τοποθέτηση του δείκτη
Ένα απλό εφέ της περιστροφής στρογγυλών μικρογραφιών όταν ποντάρετε πάνω τους με τον κέρσορα του ποντικιού, μπορείτε να δείτε περίπου το ίδιο στο ιστολόγιό μου, στις ανακοινώσεις ανάρτησης στην κύρια σελίδα. Υλοποιείται σε μερικές γραμμές κώδικα css.
Αν μεταφραστεί κυριολεκτικά: "Εφέ σεξ όταν αιωρείται πάνω". Φυσικά, είναι απίθανο να παρατηρήσετε κάτι τόσο σέξι σε αυτό το εφέ, εκτός αν έχετε άγρια φαντασία, αλλά το αποτέλεσμα είναι ενδιαφέρον με τον δικό του τρόπο και αξίζει να το προσέξετε.
Πέντε διαφορετικά εφέ για εικόνες όταν αιωρούνται πάνω τους. Αναδυόμενες υπογραφές σε τρεις παραλλαγές, κουρτίνες σε μορφή αλλαγής του βαθμού διαφάνειας και περιστροφής με οριζόντια κίνηση.
4 Τύποι εφέ κινουμένων σχεδίων για λεζάντες εικόνων, που υλοποιούνται αποκλειστικά μέσω CSS3. Διαφορετικές θέσεις στην εμφάνιση και τα εφέ μετάβασης, αρκετά τυπική απόδοση. Για να καταλάβετε πώς λειτουργεί το κινούμενο σχέδιο, ρίξτε μια ματιά στον πηγαίο κώδικα της δοκιμαστικής σελίδας, δεν βρήκα καμία ξεχωριστή τεκμηρίωση.
Γκαλερί μικρογραφιών με επένδυση πλέγματος με διάφορα εφέ εμφάνισης λεζάντας, περιστροφής, εξασθένισης, αιώρησης κ.λπ. Η τεκμηρίωση σχετικά με τη χρήση και τη διαμόρφωση είναι μάλλον σπάνια, αλλά μπορείτε να τα καταλάβετε με ιδιαίτερη επιθυμία.
Αυτό το εφέ δεν αντιπροσωπεύει τίποτα το ιδιαίτερο, μια συνηθισμένη αλλαγή στη φωτεινότητα των εικόνων κατά την αιώρηση, εκτός από το ότι προστίθενται στοιχεία κινούμενης εικόνας. Θα πρέπει να ασχοληθείτε μόνοι σας με τις λεπτομέρειες της υλοποίησης αποσυνθέτοντας τους πηγαίους κώδικες επίδειξης.
Άλλο ένα σετ 10 εφέ αιώρησης για εικόνες, διάφορες τροποποιήσεις μικρογραφιών κατά την τοποθέτηση του ποντικιού, τη μεγέθυνση, την περιστροφή, την περιστροφή, τη σκουρόχρωμη κ.λπ.
Διάφορα εφέ animation καρέ γύρω από εικόνες, φαίνεται αρκετά ελκυστική, υπάρχει ένας λεπτομερής οδηγός για τη ρύθμιση και τη χρήση.
Αυθεντικά εφέ αιώρησης CSS3 που χρησιμοποιούνται για να κάνουν τους λεζάντες μικρογραφιών εικόνων να εμφανίζονται αποτελεσματικά κατά την τοποθέτηση του δείκτη. Το σύνολο κανόνων CSS περιλαμβάνει 10 διαφορετικά εφέ που μπορείτε να χρησιμοποιήσετε ξεχωριστά για διαφορετικές εικόνες. Τα εφέ είναι πραγματικά εντυπωσιακά, ειδικά αν σκεφτεί κανείς ότι όλα γίνονται με το CSS3. Ένας λεπτομερής οδηγός θα σας βοηθήσει να καταλάβετε τι είναι τι.
Η ιδέα είναι να δημιουργήσετε ένα SVG που είναι σχήμα φόντου για κάποιο κείμενο και μετατρέπεται σε διαφορετικό σχήμα κατά την τοποθέτηση του δείκτη. Με αυτόν τον τρόπο, μπορείτε να κάνετε πολλές διαφορετικές επιλογές, αλλά στο παράδειγμα, εμφανίζονται τρεις τύποι εφέ μετάβασης. Το πλεονέκτημα της χρήσης SVG είναι ότι μπορούμε να αλλάξουμε το μέγεθος της φόρμας ώστε να ταιριάζει με το μέγεθος του γονικού κοντέινερ.
Συρόμενες εικόνες
Η ουσία αυτού του εφέ είναι ότι η εικόνα μετακινείται πάνω-κάτω για να εμφανιστεί η λεζάντα. Εάν εργάζεστε με τις παραμέτρους στυλ, νομίζω ότι μπορείτε να επιτύχετε πολύ ωραία εφέ, και από προεπιλογή, όλα φαίνονται πολύ απλά.
Με αυτό το εφέ, όλα είναι απλά, οι λεζάντες των εικόνων γλιστρούν επάνω δεξιά ή κάτω αριστερά, με τη μορφή κορδέλας με ημιδιαφανές σκούρο φόντο, όλα αναδιαμορφώνονται πολύ απλά χρησιμοποιώντας τις ιδιότητες css.
Μια ενδιαφέρουσα λύση, οι μικρογραφίες παρουσιάζονται σε σκούρα μορφή, όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους, εμφανίζονται οι εικόνες και η υπογραφή εμφανίζεται σε ανοιχτόχρωμο φόντο.
Η λεζάντα για την εικόνα εμφανίζεται από τη γωνία και επεκτείνεται διαγώνια σε ολόκληρη την περιοχή της εικόνας.
Μερικές ακόμη ενδιαφέρουσες λύσεις για την εφαρμογή αναδυόμενων λεζάντων για μικρογραφίες εικόνων. Στο ηλεκτρονικό πρόγραμμα επεξεργασίας, μπορείτε να πειραματιστείτε με τις επιλογές και να επιτύχετε πιο εντυπωσιακά αποτελέσματα.
Ένα σύνολο όμορφων εφέ όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από μικρογραφίες, διάφορους τύπους εμφάνισης και σχεδιασμό λεζάντες για φωτογραφίες. Οι λεπτές γραμμές σε αντίθεση με ένα ελαφρώς σκούρο φόντο δημιουργούν ευανάγνωστα μπλοκ πληροφοριών.
Παράξενα σχήματα και εφέ μεγέθυνσης σε συνδυασμό με το κινούμενο εφέ της εμφάνισης λεζάντες σε μικρογραφίες εικόνων.
Ένα παράδειγμα δημιουργίας ενός οπτικού εφέ διαφάνειας για την εμφάνιση ογκωδών λεζάντων εικόνων χρησιμοποιώντας μόνο CSS3 και HTML5.
6 λεζάντες εικόνων
6 Παραλλαγές εμφάνισης αναδυόμενων λεζάντων για εικόνες που μετακινούνται με χρήση του CSS3. Ένα λεπτομερές μάθημα για την υλοποίηση και τη διαμόρφωση, διαθέσιμοι πηγαίοι κώδικες για λήψη.
Και τέλος, στο τέλος, για να το πω έτσι, δεν μπορώ παρά να αναφέρω τον απλούστερο τρόπο δημιουργίας μιας αναδυόμενης λεζάντας για μια μικρογραφία χρησιμοποιώντας CSS3.
Μίλησα για αυτή τη μέθοδο σε ένα από τα προηγούμενα μαθήματά μου:.
Θέλετε να ξεκινήσετε την κατασκευή της ιστοσελίδας σας το συντομότερο δυνατό; Τώρα είναι απολύτως εφικτό! Για τον απλό λόγο ότι το TemplateMonster εμφανίστηκε στην αγορά νέα ενότηταΜε . Η συλλογή θα ανανεωθεί, αλλά τώρα μπορείτε ήδη να αναζητήσετε κάτι κατάλληλο για το διαδικτυακό σας έργο. Το μόνο που έχετε να κάνετε είναι να επιλέξετε την τέλεια λύση με το κλειδί στο χέρι και να εργαστείτε για την παρουσίασή σας απαραίτητες πληροφορίες. Και μην ξεχνάτε ότι το κείμενο για το πρότυπο γράφτηκε στο χέρι.
Με όλο τον σεβασμό, Andrew
Καταρχήν, για όσους δεν ασχολούνται καθόλου με το θέμα ή δεν ασχολούνται καθόλου με το θέμα, θα εξηγήσω εν συντομία τι είναι. Αυτοί είναι διάφοροι τύποι εφέ (αναδυόμενοι υπότιτλοι, συμβουλές εργαλείων, ομαλές μεταβάσεις, μετασχηματισμός, περιστροφή, αύξηση, μετατόπιση κ.λπ.) που εφαρμόζονται σε στοιχεία ιστότοπου όταν τοποθετείτε τον δείκτη του ποντικιού πάνω τους. Αυτά τα εφέ μπορούν να υλοποιηθούν τόσο με τη βοήθεια διαφόρων προσθηκών jQuery όσο και σε καθαρό .
Σήμερα ετοίμασα μια μεγάλη επιλογή από πρωτότυπα εφέ hover για εικόνες που δημιουργήθηκαν με CSS3, χωρίς να συμπεριλάβω βιβλιοθήκες javascript. Δεν θα μιλήσω για τα πλεονεκτήματα και τα μειονεκτήματα της εφαρμογής των εφέ hover σε καθαρό CSS3, αυτό είναι ένα άλλο θέμα, απλά κοιτάξτε τα παραδείγματα και, εάν είναι απαραίτητο, χρησιμοποιήστε αυτό που σας αρέσει στον ιστότοπό σας. Όλα τα εφέ που παρουσιάζονται στην ανασκόπηση παρέχονται με επίδειξη και λεπτομερή τεκμηρίωση με πηγαίους κώδικες. Τα εγχειρίδια είναι ως επί το πλείστον στα αστικά, αλλά όλα είναι λίγο πολύ διαισθητικά.
Θέλω απλώς να επιστήσω την προσοχή σας στο γεγονός ότι όλα αυτά τα παραδείγματα θα λειτουργούν σωστά μόνο σε σύγχρονα προγράμματα περιήγησης που υποστηρίζουν ιδιότητες CSS3.
Για να μην σπάσω τη συνολική εικόνα, δεν παραμόρφωσα τα ονόματα των εφέ με αυτόματη μετάφραση (με εξαίρεση κάποια), άφησα τους αρχικούς τίτλους όπως τους αποκαλούσε ο προγραμματιστής.
Πολύ ενδιαφέρον εφέ αιώρησης σε μικρογραφίες εικόνων, χρησιμοποιώντας λεπτές γραμμές στο σχεδιασμό και την τυπογραφία. Πολλά διαφορετικά είδη εφέ λεζάντας εικόνας, απαλοί και μη ενοχλητικοί τρισδιάστατοι μετασχηματισμοί και ομαλές μεταβάσεις ψευδοστοιχείων. Λειτουργεί μόνο σε σύγχρονα προγράμματα περιήγησης.
Το iHover είναι μια εντυπωσιακή συλλογή από καθαρά εφέ αιώρησης CSS3 με υποστήριξη Bootstrap 3. Χτισμένο σε Scss CSS (αρχείο), εύκολα τροποποιήσιμο με μεταβλητές. Ο κώδικας είναι αρθρωτός, δεν χρειάζεται να συμπεριλάβετε ολόκληρο το αρχείο. 30+ διαφορετικά εφέ σε ένα πακέτο. Όλα είναι αρκετά καλά τεκμηριωμένα, τα εφέ είναι πολύ εύκολα στη χρήση. Το μόνο που χρειάζεται να κάνετε είναι να δημιουργήσετε σωστά τη σήμανση HTML και να συμπεριλάβετε το αρχείο CSS για να λειτουργήσει.
Δημιουργεί μερικά απλά αλλά κομψά εφέ αιώρησης για λεζάντες εικόνων. Η ιδέα είναι ότι όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τις μικρογραφίες, μπορείτε να εμφανίσετε αποτελεσματικά τον τίτλο, το όνομα του συγγραφέα και το κουμπί σύνδεσης. Ορισμένα εφέ χρησιμοποιούν τρισδιάστατους οπτικούς μετασχηματισμούς.
Ένα πολύ απλό εφέ μετάβασης, χωρίς κανένα κουδούνι και σφυρίχτρα, μια εντελώς στρογγυλή εικόνα σε ένα πλαίσιο, μεταμορφώνεται αλλάζοντας την εστίαση στο hover και τέλος.
CSS3 Εφέ Hover για μικρογραφίες
Ο προγραμματιστής τοποθετεί την εργασία του ως παράδειγμα συλλογής εικόνων με εφέ μετάβασης όταν εμφανίζονται σχολιασμοί (λεζάντες) σε μικρογραφίες. Η σίγουρη υποστήριξη δηλώνεται από τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE 9+. Φυσικά, είναι δύσκολο να το ονομάσουμε μια ολοκληρωμένη γκαλερί, αλλά το αποτέλεσμα της εμφάνισης των υπογραφών είναι αρκετά ενδιαφέρον.
Ένα άλλο σύνολο κανόνων CSS για τη δημιουργία εντυπωσιακών εφέ αιώρησης σε τέλεια στρογγυλές μικρογραφίες. Το πακέτο περιέχει 7 τύπους μεταβάσεων CSS3, πολύ λεπτομερή τεκμηρίωση για τη ρύθμιση και τη χρήση. Τα εφέ υποστηρίζονται από όλα τα σύγχρονα προγράμματα περιήγησης.
Περιστρέψτε τις μικρογραφίες κατά την τοποθέτηση του δείκτη
Ένα απλό εφέ της περιστροφής στρογγυλών μικρογραφιών όταν ποντάρετε πάνω τους με τον κέρσορα του ποντικιού, μπορείτε να δείτε περίπου το ίδιο στο ιστολόγιό μου, στις ανακοινώσεις ανάρτησης στην κύρια σελίδα. Υλοποιείται σε μερικές γραμμές κώδικα css.
Αν μεταφραστεί κυριολεκτικά: "Εφέ σεξ όταν αιωρείται πάνω". Φυσικά, είναι απίθανο να παρατηρήσετε κάτι τόσο σέξι σε αυτό το εφέ, εκτός αν έχετε άγρια φαντασία, αλλά το αποτέλεσμα είναι ενδιαφέρον με τον δικό του τρόπο και αξίζει να το προσέξετε.
Πέντε διαφορετικά εφέ για εικόνες όταν αιωρούνται πάνω τους. Αναδυόμενες υπογραφές σε τρεις παραλλαγές, κουρτίνες σε μορφή αλλαγής του βαθμού διαφάνειας και περιστροφής με οριζόντια κίνηση.
4 Τύποι εφέ κινουμένων σχεδίων για λεζάντες εικόνων, που υλοποιούνται αποκλειστικά μέσω CSS3. Διαφορετικές θέσεις στην εμφάνιση και τα εφέ μετάβασης, αρκετά τυπική απόδοση. Για να καταλάβετε πώς λειτουργεί το κινούμενο σχέδιο, ρίξτε μια ματιά στον πηγαίο κώδικα της δοκιμαστικής σελίδας, δεν βρήκα καμία ξεχωριστή τεκμηρίωση.
Γκαλερί μικρογραφιών με επένδυση πλέγματος με διάφορα εφέ εμφάνισης λεζάντας, περιστροφής, εξασθένισης, αιώρησης κ.λπ. Η τεκμηρίωση σχετικά με τη χρήση και τη διαμόρφωση είναι μάλλον σπάνια, αλλά μπορείτε να τα καταλάβετε με ιδιαίτερη επιθυμία.
Αυτό το εφέ δεν αντιπροσωπεύει τίποτα το ιδιαίτερο, μια συνηθισμένη αλλαγή στη φωτεινότητα των εικόνων κατά την αιώρηση, εκτός από το ότι προστίθενται στοιχεία κινούμενης εικόνας. Θα πρέπει να ασχοληθείτε μόνοι σας με τις λεπτομέρειες της υλοποίησης αποσυνθέτοντας τους πηγαίους κώδικες επίδειξης.
Άλλο ένα σετ 10 εφέ αιώρησης για εικόνες, διάφορες τροποποιήσεις μικρογραφιών κατά την τοποθέτηση του ποντικιού, τη μεγέθυνση, την περιστροφή, την περιστροφή, τη σκουρόχρωμη κ.λπ.
Διάφορα εφέ animation καρέ γύρω από εικόνες, φαίνεται αρκετά ελκυστική, υπάρχει ένας λεπτομερής οδηγός για τη ρύθμιση και τη χρήση.
Αυθεντικά εφέ αιώρησης CSS3 που χρησιμοποιούνται για να κάνουν τους λεζάντες μικρογραφιών εικόνων να εμφανίζονται αποτελεσματικά κατά την τοποθέτηση του δείκτη. Το σύνολο κανόνων CSS περιλαμβάνει 10 διαφορετικά εφέ που μπορείτε να χρησιμοποιήσετε ξεχωριστά για διαφορετικές εικόνες. Τα εφέ είναι πραγματικά εντυπωσιακά, ειδικά αν σκεφτεί κανείς ότι όλα γίνονται με το CSS3. Ένας λεπτομερής οδηγός θα σας βοηθήσει να καταλάβετε τι είναι τι.
Η ιδέα είναι να δημιουργήσετε ένα SVG που είναι σχήμα φόντου για κάποιο κείμενο και μετατρέπεται σε διαφορετικό σχήμα κατά την τοποθέτηση του δείκτη. Με αυτόν τον τρόπο, μπορείτε να κάνετε πολλές διαφορετικές επιλογές, αλλά στο παράδειγμα, εμφανίζονται τρεις τύποι εφέ μετάβασης. Το πλεονέκτημα της χρήσης SVG είναι ότι μπορούμε να αλλάξουμε το μέγεθος της φόρμας ώστε να ταιριάζει με το μέγεθος του γονικού κοντέινερ.
Συρόμενες εικόνες
Η ουσία αυτού του εφέ είναι ότι η εικόνα μετακινείται πάνω-κάτω για να εμφανιστεί η λεζάντα. Εάν εργάζεστε με τις παραμέτρους στυλ, νομίζω ότι μπορείτε να επιτύχετε πολύ ωραία εφέ, και από προεπιλογή, όλα φαίνονται πολύ απλά.
Με αυτό το εφέ, όλα είναι απλά, οι λεζάντες των εικόνων γλιστρούν επάνω δεξιά ή κάτω αριστερά, με τη μορφή κορδέλας με ημιδιαφανές σκούρο φόντο, όλα αναδιαμορφώνονται πολύ απλά χρησιμοποιώντας τις ιδιότητες css.
Μια ενδιαφέρουσα λύση, οι μικρογραφίες παρουσιάζονται σε σκούρα μορφή, όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους, εμφανίζονται οι εικόνες και η υπογραφή εμφανίζεται σε ανοιχτόχρωμο φόντο.
Η λεζάντα για την εικόνα εμφανίζεται από τη γωνία και επεκτείνεται διαγώνια σε ολόκληρη την περιοχή της εικόνας.
Μερικές ακόμη ενδιαφέρουσες λύσεις για την εφαρμογή αναδυόμενων λεζάντων για μικρογραφίες εικόνων. Στο ηλεκτρονικό πρόγραμμα επεξεργασίας, μπορείτε να πειραματιστείτε με τις επιλογές και να επιτύχετε πιο εντυπωσιακά αποτελέσματα.
Ένα σύνολο όμορφων εφέ όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από μικρογραφίες, διάφορους τύπους εμφάνισης και σχεδιασμό λεζάντες για φωτογραφίες. Οι λεπτές γραμμές σε αντίθεση με ένα ελαφρώς σκούρο φόντο δημιουργούν ευανάγνωστα μπλοκ πληροφοριών.
Παράξενα σχήματα και εφέ μεγέθυνσης σε συνδυασμό με το κινούμενο εφέ της εμφάνισης λεζάντες σε μικρογραφίες εικόνων.
Υπέροχα εφέ επικάλυψης εικονιδίων σε μικρογραφίες εικόνων σε διάφορες παραλλαγές εμφάνισης. Το παράδειγμα χρησιμοποιεί έναν χαρακτήρα (+) που περιγράφεται από έναν κύκλο χρησιμοποιώντας ακτίνα περιγράμματος: στο CSS, μπορείτε επίσης να χρησιμοποιήσετε μια γραμματοσειρά εικονιδίων για να κάνετε το αναδυόμενο πλαίσιο πιο ενημερωτικό.
Ένα παράδειγμα δημιουργίας ενός οπτικού εφέ διαφάνειας για την εμφάνιση ογκωδών λεζάντων εικόνων χρησιμοποιώντας μόνο CSS3 και HTML5.
6 λεζάντες εικόνων
6 Παραλλαγές εμφάνισης αναδυόμενων λεζάντων για εικόνες που μετακινούνται με χρήση του CSS3. Ένα λεπτομερές μάθημα για την υλοποίηση και τη διαμόρφωση, διαθέσιμοι πηγαίοι κώδικες για λήψη.
Και τέλος, στο τέλος, για να το πω έτσι, δεν μπορώ παρά να αναφέρω τον απλούστερο τρόπο δημιουργίας μιας αναδυόμενης λεζάντας για μια μικρογραφία χρησιμοποιώντας CSS3.
Η υπηρεσία SendPulse είναι ένα εργαλείο μάρκετινγκ για τη δημιουργία μιας βάσης συνδρομής και τη μετατροπή τυχαίων επισκεπτών στον ιστότοπό σας σε κανονικούς. Το SendPulse συνδυάζει τα πιο σημαντικά χαρακτηριστικά για την προσέλκυση και τη διατήρηση πελατών σε μία πλατφόρμα:
● ενημερωτικά δελτία ηλεκτρονικού ταχυδρομείου,
● web-push,
● Αποστολές SMS,
● SMTP,
● αποστολές στο Viber,
● αποστολή μηνυμάτων στο facebook messenger.
Ενημερωτικά δελτία ηλεκτρονικού ταχυδρομείου
Μπορείτε να χρησιμοποιήσετε διάφορα τιμολόγια για τη διεξαγωγή ενημερωτικών δελτίων ηλεκτρονικού ταχυδρομείου, συμπεριλαμβανομένων των δωρεάν. Το δωρεάν πρόγραμμα έχει περιορισμούς: η βάση συνδρομής δεν είναι μεγαλύτερη από 2500.Το πρώτο πράγμα που πρέπει να ξεκινήσετε όταν εργάζεστε με μια υπηρεσία αλληλογραφίας ηλεκτρονικού ταχυδρομείου είναι να δημιουργήσετε τη δική σας βιβλίο διευθύνσεων. Ορίστε έναν τίτλο και ανεβάστε μια λίστα με διευθύνσεις e-mail.
Το SendPulse διευκολύνει τη δημιουργία του έντυπα συνδρομήςμε τη μορφή αναδυόμενου παραθύρου, ενσωματωμένες φόρμες, που αιωρούνται και στερεώνονται σε ένα συγκεκριμένο μέρος της οθόνης. Με τη βοήθεια των εντύπων συνδρομής, θα συλλέξετε μια βάση συνδρομητών από την αρχή ή θα συμπληρώσετε τη βάση σας με νέες διευθύνσεις.
Στο πρόγραμμα δημιουργίας φορμών, μπορείτε να δημιουργήσετε ακριβώς τη φόρμα συνδρομής που ταιριάζει καλύτερα στις ανάγκες σας και οι συμβουλές υπηρεσίας θα σας βοηθήσουν να αντεπεξέλθετε σε αυτήν την εργασία. Είναι επίσης δυνατή η χρήση μιας από τις διαθέσιμες έτοιμες φόρμες.
Κατά τη δημιουργία φορμών συνδρομής, είναι υποχρεωτική η χρήση ηλεκτρονικού ταχυδρομείου με εταιρικό τομέα. Διαβάστε πώς.
Πρότυπα μηνυμάτωνθα σας βοηθήσει να σχεδιάσετε όμορφα τις επιστολές σας προς τους συνδρομητές. Το δικό του πρότυπομπορείτε να δημιουργήσετε γράμματα σε έναν ειδικό κατασκευαστή.
Αυτόματες αποστολές. Οι διαχειριστές περιεχομένου χρησιμοποιούν ενεργά την αυτόματη διανομή. Βοηθά στην αυτοματοποίηση της διαδικασίας εργασίας με πελάτες. Υπάρχουν διάφοροι τρόποι για να δημιουργήσετε ένα αυτόματο ταχυδρομείο:
● Διαδοχική σειρά γραμμάτων. Αυτή είναι η απλούστερη επιλογή, όταν, ανεξάρτητα από τις συνθήκες, γράφονται πολλές επιστολές που θα σταλούν στους παραλήπτες με συγκεκριμένη σειρά. Μπορεί να υπάρχουν επιλογές εδώ - σειρά μηνυμάτων(απλή αλυσίδα μηνυμάτων), ειδική ημερομηνία(οι επιστολές είναι χρονισμένες σε συγκεκριμένες ημερομηνίες), γράμμα σκανδάλης - η επιστολή αποστέλλεται ανάλογα με τις ενέργειες του συνδρομητή (άνοιγμα του μηνύματος κ.λπ.).
● Automation360– αποστολή αλληλογραφίας με συγκεκριμένα φίλτρα και συνθήκες, καθώς και συνυπολογισμός μετατροπών.
● Τελειωμένες αλυσίδεςκατά πρότυπο. Μπορείτε να δημιουργήσετε μια σειρά γραμμάτων με βάση ένα δεδομένο πρότυπο ή να τροποποιήσετε το πρότυπο και να το προσαρμόσετε ώστε να ταιριάζει στις ανάγκες σας.
Δοκιμή A/Bθα σας βοηθήσει να πειραματιστείτε με διαφορετικές επιλογές για την αποστολή μιας σειράς email και να προσδιορίσετε την καλύτερη επιλογή για ανοίγματα ή μεταβάσεις.
Αποστολή Push Notifications
Τα Push-mailings είναι μια συνδρομή σε ένα παράθυρο του προγράμματος περιήγησης, είναι ένα είδος αντικατάστασης για τις συνδρομές rss. Οι τεχνολογίες web-push έχουν εισέλθει γρήγορα στη ζωή μας και είναι ήδη δύσκολο να βρεθεί ένας ιστότοπος που να μην χρησιμοποιεί push mailings για να προσελκύσει και να διατηρήσει πελάτες. Ζητήστε σενάριο για , μπορείτε να στείλετε μηνύματα ηλεκτρονικού ταχυδρομείου τόσο με μη αυτόματο τρόπο όσο και να δημιουργήσετε αυτόματες εκπομπές δημιουργώντας μια σειρά από μηνύματα ηλεκτρονικού ταχυδρομείου ή συλλέγοντας δεδομένα από RSS. Η δεύτερη επιλογή σημαίνει ότι μετά την εμφάνιση ενός νέου άρθρου στον ιστότοπό σας, μια ειδοποίηση σχετικά με αυτό θα σταλεί αυτόματα στους συνδρομητές σας με μια σύντομη ανακοίνωση.
Νέο από Αποστολήσφυγμός– τώρα μπορείτε να δημιουργήσετε έσοδα από τον ιστότοπό σας με ειδοποιήσεις push ενσωματώνοντας διαφημίσεις σε αυτές. Όταν φτάσετε στα $10, κάθε Δευτέρα πραγματοποιούνται πληρωμές σε ένα από τα συστήματα πληρωμών - Visa / mastercard, PayPal ή Webmoney.
Τα μηνύματα push στην υπηρεσία είναι εντελώς δωρεάν. Η πληρωμή γίνεται μόνο για White Label - αποστολές χωρίς να αναφέρεται η υπηρεσία SendPulse, αλλά αν το λογότυπο της υπηρεσίας δεν σας ενοχλεί, τότε μπορείτε να χρησιμοποιήσετε τις ειδοποιήσεις push δωρεάν χωρίς περιορισμούς.