Δημιουργία Slick Ui Animations

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

Το Animation στο πλαίσιο των διεπαφών χρήστη εξακολουθεί να είναι ένα πολύ νέο πεδίο. Δεν υπάρχουν πολλοί πόροι εκεί έξω που διδάσκουν τις βέλτιστες πρακτικές ή δείχνουν κοινά πρότυπα της animation UI που μπορούμε να ακολουθήσουμε. Τις περισσότερες φορές, πρόκειται για πειραματισμό, Δοκιμή χρηστών και ίσως λίγο δοκιμαστική και σφάλμα.

• 15 ανταποκρινόμενοι σεμινάρια σχεδιασμού ιστοσελίδων

Έτσι σε αυτό το σεμινάριο, θα δημιουργήσουμε κάτι που δεν συγχέεται, ακολουθεί κοινά πρότυπα και είναι κομψό. Αυτό θα είναι το τμήμα προφίλ της ομάδας που βλέπετε συχνά σε ιστοσελίδες της εταιρείας. Η ιδέα είναι να δείξουμε λίγες περισσότερες πληροφορίες σχετικά με το μέλος της ομάδας / προσωπικού όταν ο καθένας είναι αιωρείται. Σε όλο το σεμινάριο θα χρησιμοποιήσουμε το Codepen, αλλά φυσικά μπορείτε να χρησιμοποιήσετε το δικό σας αγαπημένο περιβάλλον επεξεργασίας και ανάπτυξης. Θυμηθείτε, η δημιουργία ενός πιο πολύπλοκρου ιστότοπου μπορεί να αλλάξει το δικό σας web hosting Ανάγκες, οπότε βεβαιωθείτε ότι έχετε μια υπηρεσία που λειτουργεί για εσάς.

Θα θέλατε ένα απλό εργαλείο για την κατασκευή ενός ιστότοπου; Χρησιμοποιήστε ένα λαμπρό οικοδόμος ιστότοπου .

01. Ρυθμίστε το

Ξεκινήστε ανοίγοντας το πληκτρολόγιο και δημιουργώντας ένα νέο στυλό. Θα χρειαστούμε bootstrap 4 και sass (. Ένας άλλος σύνδεσμος πόρων που θα χρειαστεί να προσθέσετε είναι η γραμματοσειρά Awesome, την οποία θα χρησιμοποιήσουμε για τις κοινωνικές μας εικόνες.

02. Δημιουργία εμπορευματοκιβωτίων, σειρές και στήλες

Τα δοχεία είναι αυτό που χρησιμοποιεί το bootstrap ως βασικό στοιχείο διάταξης και απαιτείται όταν χρησιμοποιείτε το προεπιλεγμένο σύστημα πλέγματος. Εντός εμπορευματοκιβωτίων, πρέπει να προσθέσετε σε μια σειρά. Οι σειρές είναι περιτυλίγματα για στήλες και μπορείτε να καθορίσετε τον αριθμό των στηλών που θέλετε από ένα πιθανό 12 και ποιο θα είναι το σημείο διακοπής. Στην περίπτωσή μας, θέλουμε ένα στοιχείο που έχει ένα μεσαίου μεγέθους σημείο διακοπής και γεμίζει τρεις στήλες σε πλάτος.

 & lt; div class = "container" & gt;
 & lt; div class = "σειρά" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Προσθήκη συνδέσμου εικόνας και χρώμα εδώ
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Ορίστε εικόνα προφίλ και χρώμα

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

 & lt; div class = "Team Blue" & GT;
    & lt; div class = "φωτογραφία" & gt;
       & lt; img src = "https://image.ibbb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Προσθήκη ονόματος προφίλ και τίτλο

Το τελευταίο κομμάτι HTML που θα προστεθεί θα είναι για το όνομα, τον τίτλο και τις κοινωνικές εικόνες, οι οποίες θα προστεθούν κάτω από την τελευταία ετικέτα Div που μόλις προσθέσαμε στο τελευταίο βήμα. Για τις κοινωνικές εικόνες, θα χρησιμοποιήσουμε εκπληκτική γραμματοσειρά και αυτά θα τοποθετηθούν μέσα σε μια μη συνδεδεμένη λίστα.

 & lt; div class = "profile-txt" & gt;
      & lt; h1 class = "τίτλος" & gt; libby & lt; / h1 & gt;
      & lt; span class = "θέση" & gt; web designer & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul class = "κοινωνικά-εικονίδια" & gt;
       & lt; li & gt; & lt; a href = "" class = "fa-facebook" & gt; / a & gt; / li & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-twitter" & gt; / a & gt; / li & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-linkedin" & gt; / a & gt; / li & lt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-dribbble" & gt; / a & gt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Ρυθμίστε τις μεταβλητές SASS

Εάν ακολουθείτε μαζί χρησιμοποιώντας το Codepen, τότε θα έχετε ήδη εγκαταστήσει SASS και έτοιμο να πάτε. Απλά πρέπει να κάνετε κλικ στο εικονίδιο / κουμπί Ρυθμίσεις Pen και να επιλέξετε SCSs ως Preprocessor CSS. Τότε μπορούμε να προχωρήσουμε και να προσθέσουμε μερικές μεταβλητές που θα αποθηκεύσουν όλα τα χρώματα μας. Χρησιμοποιήσαμε το RGBA ως τις χρωματικές τιμές που μας επιτρέπουν περισσότερο τον σημαντικό έλεγχο όλων των αδιαφάνειας των χρωμάτων.

 $ Blugradient: RGBA (103, 188, 223 ,.8).
$ lightgreen: RGBA (188, 219, 183 ,.5).
$ GREEN: RGBA (119, 180, 109, 0,5).
$ Green-Border: RGBA (171, 221, 164, 0,5).
$ BLUE: RGBA (80, 205, 227, 1).
$ Blue-Border: RGBA (147, 223, 236, 1). 

06. Ανεβάστε μια εικόνα φόντου

Για να κάνουν τα πράγματα να φαίνονται πιο ελκυστικά, θα τοποθετήσουμε μια ωραία εικόνα φόντου στο σώμα. Εδώ μπορούμε να χρησιμοποιήσουμε το πρώτο μας σύνολο μεταβλητών και να δώσουμε την εικόνα φόντου μια ευχάριστη επικάλυψη κλίσης που πηγαίνει από ανοιχτό πράσινο έως μπλε. Στη συνέχεια, για να κάνετε την εικόνα φόντου μας να ανταποκρίνεται πλήρως, θα θέσουμε το ύψος της προβολής σε 100VH.

 Σώμα {
 Ιστορικό: Γραμμική κλίση (δεξιά, $ lightgreen, $ bluepradient), διεύθυνση URL ('https://image.ibb.co/mddpu7/clouds_cornfield_countryside_158827.jpg') Κέντρο χωρίς επαναλάβετε;
 Ιστορικό μέγεθος: κάλυψη;
 Θέση: συγγενής.
 Ύψος: 100VH;
 } 

07. Επιλέξτε ένα φόντο και εικόνα προφίλ

Κάθε προφίλ ομάδας θα δοθεί τα ίδια στυλ και η ομάδα της τάξης θα χρησιμοποιηθεί γι 'αυτό. Το φόντο θα είναι λευκό, όλο το περιεχόμενο επικεντρωμένο και πρέπει να βεβαιωθούμε ότι η θέση έχει οριστεί σε συγγενή. Στη συνέχεια, μπορούμε να συμπεριλάβουμε το CSS για την εικόνα προφίλ. Για καλύτερα αποτελέσματα, βεβαιωθείτε ότι η αρχική εικόνα που χρησιμοποιείτε έχει διαστάσεις όχι μεγαλύτερη από την πλατεία 200px. Ωστόσο, θα αλλάξουμε το ύψος και το πλάτος αυτών εντός του κανόνα της φωτογραφίας CSS.

.
 Padding: 30px 0 40px;
 Περιθώριο: 60px;
 Ιστορικό: #FFF;
 Κείμενο-Ευθυγράμμιση: Κέντρο;
 Overflow: Κρυμμένο?
 Θέση: συγγενής.
 Δρομέας: δείκτης?
 Box-Shadow: 0 0 25px 1px RGBA (0,0,0,0,3);
 .φωτογραφία {
 Οθόνη: Inline-Block.
 Πλάτος: 130px;
 Ύψος: 130px;
 Περιθώριο-κάτω: 50px;
 Θέση: συγγενής.
 Z-Δείκτης: 1;
 }
 } 

08. Προσθέστε τα κινούμενα σχέδια

Το πρώτο κομμάτι κινούμενων σχεδίων που θα προσθέσουμε θα είναι στην κορυφή του στοιχείου προφίλ μας. Η ιδέα είναι ότι όταν δεχόμαστε πάνω από όλο το στοιχείο, ένα μπλε κυκλικό σχήμα θα κινήσει κάτω. Μπορούμε να ελέγξουμε πόσο από το μπλε μπορούμε να δούμε καθορίζοντας τη θέση αυτού για να έχει ένα κάτω ποσοστό. Έτσι παίζετε με αυτό το ποσοστό και θα πάρετε μια καλύτερη ιδέα για το πώς λειτουργεί αυτό. Ποτέ δεν ξέρεις: Ίσως να ανακαλύψετε ένα καλύτερο αποτέλεσμα!

 .Blue .photo: πριν {
 Περιεχόμενο: "";
 Πλάτος: 100%.
 Ύψος: 0px;
 Ακτίνα συνοριακής ακτίνας: 50%.
 Ιστορικό: $ μπλε?
 Θέση: Απόλυτη.
 Κάτω: 130%.
 Δεξιά: 0;
 Αριστερά: 0;
 Μετασχηματισμός: Κλίμακα (3).
 Μετάβαση: όλα τα γραμμικά 0s.
}
.Team: hover .photo: πριν {
 Ύψος: 100%.
} 

09. Ζωγραφίστε τη φωτογραφία της ομάδας

Η φωτογραφία της ομάδας είναι το σημείο εστίασής μας σε αυτό το UI και είναι ίσως το πιο προφανές στοιχείο που θα περίμενε κανείς να ζωντανέψει σε κάποιο σχήμα ή μορφή. Το CSS θα προσθέσουμε σε αυτό το βήμα θα γυρίσει πρώτα τη φωτογραφία σε μικρότερο κύκλο, τότε όταν αιωρείται εκεί θα υπάρχει ένα γαλάζιο σύνορο που θα προστεθεί σε αυτό και η φωτογραφία θα κλιμακωθεί μαζί με τα σύνορα. Με τις προστιθέμενες μεταβάσεις, παίρνουμε ένα ωραίο υγρό animation.

. Ιππασία: Μετά το {
 Περιεχόμενο: "";
 Πλάτος: 100%.
 Ύψος: 100%.
 Ακτίνα συνοριακής ακτίνας: 50%.
 Ιστορικό: $ μπλε?
 Θέση: Απόλυτη.
 Κορυφή: 0;
 Αριστερά: 0;
 Z-Δείκτης: 1;
}
.Team .photo img {
 Πλάτος: 100%.
 Ύψος: Auto?
 Ακτίνα συνοριακής ακτίνας: 50%.
 Μετασχηματισμός: Κλίμακα (1).
 Μετάβαση: όλα τα 0,9s ευκολία 0s.
}
. Βλάβη: hover .photo img {
 Box-Shadow: 0 0 0 14px $ Blue-Border;
 Μετασχηματισμός: Κλίμακα (0,6).
 }

10. Τραβήξτε το όνομα και τη θέση του προφίλ

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

 .Profile-txt {
 Περιθώριο-κάτω: 30px;
 .τίτλος {
 Μέγεθος γραμματοσειράς: 2Rem;
 Γραμματοσειρά γραμματοσειράς: 700;
 Χρώμα: # 333;
 Επιστολή: 1.5px;
 Κείμενο-μετασχηματισμό: Κεφαλαιοποίηση.
 Περιθώριο-κάτω: 6px;
 }
 .θέση{
 Οθόνη: μπλοκ;
 Μέγεθος γραμματοσειράς: 1Rem;
 Χρώμα: # 555;
 }
} 

11. Προσθέστε κοινωνικά εικονίδια

Οι κοινωνικές εικόνες θα τοποθετηθούν πρώτα από το κάτω μέρος της σελίδας από -100px. Στη συνέχεια, όταν δεχόμαστε πάνω από αυτό, η κάτω θέση θα οριστεί στο μηδέν και με μια προστιθέμενη μετάβαση, αυτό θα μας δώσει μια ωραία ομαλή κινούμενη εικόνα καθώς κινείται προς τα πάνω. Οι εικόνες θα λάβουν το δικό τους κράτος του αιωρούμενου, που θα θέτουν το φόντο τους σε λευκό και το εικονίδιο σε μπλε.

. Focial-icons {
 Πλάτος: 100%.
 Λίστα-στυλ: Κανένα;
 Padding: 0;
 Περιθώριο: 0;
 Ιστορικό: $ μπλε?
 Θέση: Απόλυτη.
 Κάτω: -100px;
 Αριστερά: 0;
 Μετάβαση: όλα τα 0,6s ευκολία.
 li {
 Οθόνη: Inline-Block.
 
 ένα {
 Οθόνη: μπλοκ;
 Padding: 8PX;
 Μέγεθος γραμματοσειράς: 1Rem;
 Χρώμα: #FFF;
 Κείμενο-διακόσμηση: Κανένα;
 Μετάβαση: όλα τα 0,5s ευκολία.
 & amp;: hover {
 Χρώμα: $ μπλε?
 Ιστορικό: #FFF;
 }
 }
 }
}
.Team: hover .social-icons {
 Κάτω: 0px;
} 

12. Κάντε το μέλος της πράσινης ομάδας

Για να αναμίξετε τα πράγματα λίγο, μπορούμε να αρχίσουμε να προσθέτουμε περισσότερα μέλη στην ομάδα μας. Το χρώμα που θα χρησιμοποιήσουμε για αυτό το επόμενο θα είναι πράσινο. Αλλά πρώτα επιστρέψτε στο τμήμα / αρχείο HTML και το μόνο που πρέπει να κάνουμε είναι να αντιγράψετε την τάξη Col-MD-3 - όχι η σειρά - κάτω στην τελευταία ετικέτα DIV κάτω από τα κοινωνικά εικονίδια και επικολλήστε το.

 & lt; div class = "Team Green" & GT;
 & lt; div class = "φωτογραφία" & gt;
 & lt; img src = "https://image.ibbb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt; 

Μόλις αλλάξετε την μπλε τάξη στο πράσινο, μπορούμε τελικά να προσθέσουμε όλα τα css που θα μας δώσουν την ίδια κινούμενη εικόνα.

 .Green: hover .photo img {
 Box-Shadow: 0 0 0 14px $ Green-Border;
 Μετασχηματισμός: Κλίμακα (0,6).
 }
.Green .photo: πριν {
 Περιεχόμενο: "";
 Πλάτος: 100%.
 Ύψος: 0px;
 Ακτίνα συνοριακής ακτίνας: 50%.
 Ιστορικό: $ GREEN.
 Θέση: Απόλυτη.
 Κάτω: 135%.
 Δεξιά: 0;
 Αριστερά: 0;
 Μετασχηματισμός: Κλίμακα (3).
 Μετάβαση: όλα τα γραμμικά 0s.
}
.Green .social-icons {
 Πλάτος: 100%.
 Λίστα-στυλ: Κανένα;
 Padding: 0;
 Περιθώριο: 0;
 Ιστορικό: $ GREEN?
 Θέση: Απόλυτη.
 Κάτω: -100px;
 Αριστερά: 0;
 Μετάβαση: όλα τα 0,6s ευκολία.
 li {
 Οθόνη: Inline-Block.
 ένα {
 Οθόνη: μπλοκ;
 Padding: 8px;
 Μέγεθος γραμματοσειράς: 1Rem;
 Χρώμα: #FFF;
 Κείμενο-διακόσμηση: Κανένα;
 Μετάβαση: όλα τα 0,5s ευκολία.
 & amp;: hover {
 Χρώμα: $ Πράσινο.
 Ιστορικό: #FFF;
 }
 }
 }
} 

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

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

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 307 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 307 ή Εγγραφείτε στο NET .

Θέλετε να μάθετε περισσότερα για τα Ins και Outs της UI Animation;

Εάν ενδιαφέρεστε να μάθετε περισσότερα για το πώς μπορείτε να κάνετε τους ιστότοπούς σας ποπ και λάμψη χρησιμοποιώντας κομψή animation UI, βεβαιωθείτε ότι έχετε πάρει το εισιτήριό σας για Δημιουργία Λονδίνου .

Ένας σχεδιαστής και ο προγραμματιστής του μπροστινού άκρου που εργάζονται σήμερα ως δημιουργικός προγραμματιστής για το Asemblr.com, ο Steven Roberts θα παράγει τη συζήτησή του - CSS animation: πέρα ​​από τις μεταβάσεις - στις οποίες θα σας δείξει τα καλύτερα εργαλεία για τη δουλειά και να αναδημιουργήσετε μερικά από τα καλύτερα κινούμενα σχέδια Ο ιστός έχει να προσφέρει, ενώ ανακαλύπτει τις δυνατότητες και τους περιορισμούς της animating με μόνο CSS.

Δημιουργία Λονδίνο λαμβάνει χώρα από τις 19-21 Σεπτεμβρίου 2018. Πάρτε το εισιτήριό σας τώρα .

Σχετικά Άρθρα:

• Πώς να χρησιμοποιήσετε κινούμενα σχέδια σε εφαρμογές για κινητά
• Ο οδηγός του Pro για το σχεδιασμό UI
• Ένας οδηγός για αρχάριους για τον σχεδιασμό κινούμενων εικόνων διεπαφής