Κατασκευάστε μια κινούμενη σελίδα προσγείωσης διαχωρισμού

Η σελίδα προορισμού σας είναι ένα κρίσιμο στοιχείο στο δικό σας Διάταξη ιστότοπου . Είναι η πρώτη πραγματική ευκαιρία που πρέπει να εισαγάγετε την επιχείρησή σας ή το προϊόν που πουλάτε, οπότε ο σχεδιασμός του είναι το κλειδί. Οι σελίδες προσγείωσης έχουν σχεδιαστεί με έναν ενιαίο εστιασμένο στόχο γνωστό ως κλήση προς δράση (CTA). Τη χρήση χρωμάτων και εικόνων για τη συμπλήρωση των κλήσεων σε δράση και το εμπειρία χρήστη επιβάλλεται.

• Δείτε τον υπολογιστή εργασίας για αυτό το σεμινάριο

Σε αυτό το σεμινάριο, θα περπατήσουμε με το πώς να οικοδομήσουμε μια συμμετοχή σελίδας προορισμού για μια φανταστική μάρκα μόδας. Θα επικεντρωθεί γύρω από ένα σχέδιο διαχωρισμού με μεγάλες εικόνες και κινούμενες μεταβάσεις που συμβαίνουν στο αιωρούμενο. Αυτή η σελίδα θα έχει δύο σαφή κλήση σε κουμπιά δράσης και θα χρησιμοποιήσουμε HTML, Σάλτσα για το στυλ και ένα άγγιγμα της βανίλιας javascript που χρησιμοποιεί τη σύνταξη ES6 (θυμηθείτε να βεβαιωθείτε ότι έχετε web hosting είναι κατάλληλη για τις ανάγκες του ιστότοπού σας). Πολύ περίπλοκο; Δημιουργήστε έναν ιστότοπο χωρίς την ανάγκη για κώδικα, δοκιμάστε ένα απλό οικοδόμος ιστότοπου .

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

Εάν χρησιμοποιείτε το Codepen, βεβαιωθείτε ότι το CSS έχει οριστεί σε 'SCSS' στις ρυθμίσεις στυλό. Μπορείτε να κάνετε αυτή την αλλαγή κάνοντας κλικ στην καρτέλα Ρυθμίσεις, επιλέξτε 'CSS' και αλλάξτε τον προεπεξεργαστή CSS σε SCSS στις αναπτυσσόμενες επιλογές.

Τότε μπορούμε να αρχίσουμε να προσθέτουμε στο HTML μας. Θα τυλίψουμε μια ενότητα που ονομάζεται «αριστερά» και μια ενότητα που ονομάζεται «δεξιά» μέσα σε μια κλάση εμπορευματοκιβωτίων, καθώς και τα δύο τμήματα έλαβαν μια κατηγορία "οθόνης".

 & lt; div class = "εμπορευματοκιβώτιο" & gt;
  & lt; Τμήμα κλάσης = "αριστερή οθόνη" & gt;
  & lt; / τμήμα & gt;
  & lt; Τμήμα κλάσης = "δεξιά οθόνη" & gt;
  & lt; / τμήμα & gt;
& lt; / div & gt; 

02. Τελειώστε το HTML

Για να ολοκληρώσουμε το HTML μας, θα προσθέσουμε έναν τίτλο για κάθε τμήμα χρησιμοποιώντας ένα h1 ετικέτα. Κάτω από αυτό θα πρέπει να προσθέσουμε ένα κουμπί, το οποίο θα συνδέει με μια άλλη σελίδα αν αυτό ήταν ένα πραγματικό πρόγραμμα. Θα δώσουμε αυτή την τάξη κουμπί για να κρατήσετε τα πράγματα ωραία και απλά.

 & lt; div class = "εμπορευματοκιβώτιο" & gt;
   & lt; Τμήμα κλάσης = "αριστερή οθόνη" & gt;
    & lt; h1 & gt; mens fashion & lt; / h1 & gt;
      & lt; button & gt;
       & lt; ένα href = "#" class = "κουμπί" & gt; μαθαίνουν περισσότερα & lt; / a & gt;
      & lt; / κουμπί & gt;
    & lt; / τμήμα & gt;

    & lt; Τμήμα κλάσης = "δεξιά οθόνη" & gt;
       & lt; h1 & gt; fashion & lt; / h1 & gt;
        & lt; button & gt;
          & lt; ένα href = "#" class = "κουμπί" & gt; μαθαίνουν περισσότερα & lt; / a & gt;
        & lt; / κουμπί & gt;
     & lt; / τμήμα & gt; 

03. Εξερευνήστε τις μεταβλητές SASS

Το ένα πράγμα που όλοι αγαπάμε για τη Sass είναι η χρήση των μεταβλητών. Ακόμα κι αν οι εθνικές μεταβλητές CSS παίρνουν περισσότερη υποστήριξη, θα κρατήσουμε τα πράγματα ασφαλή χρησιμοποιώντας τη SASS. Θα τα βάλουμε στην κορυφή του μας .sscss , και μπορείτε να επιλέξετε τα χρώματα που θέλετε, αλλά χρησιμοποιώντας rgba Οι τιμές θα μας δώσουν μεγαλύτερη ευελιξία.

 / ** Μεταβλητές ** /

$ 5 δοχείο-BGColor: # 444;
$ ΑΡΙΣΤΕΡΑ-BGCOLOR: RGBA (136, 226, 247, 0,7).
$ ΑΡΙΣΤΕΡΑ-Κουμπί-Τοποθετήστε το πλήκτρο: RGBA (94, 226, 247, 0,7).
$ ΔΕΞΙΑ-BGCOLOR: RGBA (227, 140, 219, 0,8).
$ Right-Button-Τοποθετήστε το πλήκτρο: RGBA (255, 140, 219, 0,7).
$ hover-πλάτος: 75%.
$ μικρό πλάτος: 25%.
$ animatespeed: 1000ms; 

04. Ρυθμίστε το στυλ του σώματος

Πρώτον, θα καθαρίσουμε όλα τα προεπιλεγμένα μαξιλάρια και το περιθώριο στο σώμα και στη συνέχεια να ρυθμίσετε την οικογένεια γραμματοσειρών να ανοίξει το Sans. Αυτό θα επηρεάσει μόνο το κουμπί, οπότε δεν έχει σημασία πάρα πολύ τι γραμματοσειρά που χρησιμοποιούμε. Τότε θα ορίσουμε το πλάτος και το ύψος σε 100% Και βεβαιωθείτε ότι ο οτιδήποτε ξεπερνάει ο άξονας x κρυφά.

 html, σώμα {
  Padding: 0;
  Περιθώριο: 0;
  Font-οικογένεια: 'Open Sans', Sans-Serif;
  Πλάτος: 100%.
  Ύψος: 100%.
  overflow-x: κρυμμένο?
} 

05. Στυλ Οι τίτλοι του τμήματος

Ήρθε η ώρα να επιλέξετε μια γραμματοσειρά Google για τους τίτλους του τμήματος - Έχουμε επιλέξει την οθόνη Playfair. Στη συνέχεια, χρησιμοποιώντας μεταφράζω Μπορούμε να βεβαιωθούμε ότι οι τίτλοι του τμήματος είναι πάντα επικεντρωμένοι στον άξονα Χ.

 H1 {
  Μέγεθος γραμματοσειράς: 5Rem;
  Χρώμα: #FFF;
  Θέση: Απόλυτη.
  Αριστερά: 50%.
  Κορυφή: 20%.
  Μετασχηματισμός: Translatex (-50%).
  Λευκό χώρο: NowRap;

  Οικογένεια γραμματοσειράς: «Οθόνη Playfair», Serif.
} 

06. Κάντε τα CTAs ξεχωρίζουν

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

 .Button {
  Οθόνη: μπλοκ;
  Θέση: Απόλυτη.
  Αριστερά: 50%.
  Κορυφή: 50%.
  Ύψος: 2.6Rem;
  padding-top: 1.2rem;
  Πλάτος: 15Rem;
  Κείμενο-Ευθυγράμμιση: Κέντρο;
  άσπρο χρώμα;
  σύνορα: 3px στερεό #fff;
  Ακτίνα συνοριακής ακτίνας: 4px;
  Γραμματοσειρά γραμματοσειράς: 600;
  Κείμενο-μετασχηματισμό: κεφαλαία;
  Κείμενο-διακόσμηση: Κανένα;
  Μετασχηματισμός: Translatex (-50%).
  Μετάβαση: όλα .2, 

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

 .Screen.Left .Button: hover {
  Ιστορικό-Χρώμα: $ ΑΡΙΣΤΕΡΑ-BUTTON-TOVER.
  Χρώμα συνόρων: $ αριστερά-κουμπί-αιωρείται.
}

.Screen.Right .button: hover {
  Ιστορικό-χρώμα: $ σωστό κουμπί-αιωρείται.
  Συνοριακό χρώμα: $ σωστό κουμπί-αιωρείται. 

07. Ορίστε το φόντο και τις οθόνες του δοχείου

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

 .Container {
  Θέση: συγγενής.
  Πλάτος: 100%.
  Ύψος: 100%.
  Ιστορικό: $ δοχείο-Bgcolor?
  
    .Screen {
      Θέση: Απόλυτη.
      Πλάτος: 50%.
      Ύψος: 100%.
      Overflow: Κρυμμένο?
    }
} 

08. Προσθέστε εικόνες φόντου

Τόσο η αριστερή όσο και η δεξιά τμήματα θα εμφανίσουν μια εικόνα, και μπορείτε να βρείτε royalty free stock photos από ιστοσελίδες όπως Απάγω , Pixabay ή Τακέλ (που έχω χρησιμοποιήσει σε αυτό το σεμινάριο). Για να κάνετε τα πράγματα ευκολότερα, έχω χρησιμοποιήσει μια δωρεάν υπηρεσία φιλοξενίας εικόνων και κοινή χρήση που ονομάζεται ImgBB ότι μπορούμε να συνδεθούμε στο CSS μας.

 .Screen.Left {
  Αριστερά: 0;
  Ιστορικό: URL ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') Κέντρο Κέντρο Δεν επαναλαμβάνεται?
  Ιστορικό μέγεθος: κάλυψη;
  
    & amp;: πριν {
       Θέση: Απόλυτη.
      Περιεχόμενο: "";
      Πλάτος: 100%.
      Ύψος: 100%.
      Ιστορικό: $ ΑΡΙΣΤΕΡΑ-BGCOLOR.
    }
} 

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

 .Screen.Right {
  Δεξιά: 0;
  Ιστορικό: URL ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') Κέντρο κέντρου χωρίς επαναλάβετε;
  Ιστορικό μέγεθος: κάλυψη;
  
   & amp;: πριν {
      Θέση: Απόλυτη.
      Περιεχόμενο: "";
      Πλάτος: 100%.
      Ύψος: 100%.
      Ιστορικό: $ δεξιά-Bgcolor;
    }
} 

09. Προσθέστε μεταβάσεις και εφέ αιωρείται

Η ταχύτητα κινούμενης εικόνας για την επίδραση του αιώρημου και στις δύο οθόνες θα ελέγχεται από μια μετάβαση που κατέχει την αξία της μεταβλητής μας $ animatespeed , το οποίο είναι 1000ms (ένα δευτερόλεπτο). Στη συνέχεια, θα τελειώσουμε δίνοντας το κινούμενο σχέδιο κάποια χαλάρωση, η οποία είναι μια ευκολία μέσα και έξω που θα σας βοηθήσει να μας δώσετε μια ομαλότερη κινούμενη εικόνα.

 .screen.left, .screen.right, .screen.right: πριν, .screen.left: πριν {
  Μετάβαση: $ animatespeed όλα τα ευκολία-in-out.
} 

Αυτό που θέλουμε να συμβεί τώρα είναι ότι όταν τοποθετείτε πάνω από την αριστερή οθόνη, θα υπάρχει μια τάξη που προστίθεται σε αυτό το τμήμα χρησιμοποιώντας το JavaScript (το οποίο θα γράψουμε σε ένα μεταγενέστερο βήμα). Όταν προστεθεί αυτή η κατηγορία, τότε αυτή η οθόνη θα τεντώσει σε οποιοδήποτε πλάτος της μεταβλητής που καθορίσαμε - το οποίο θα είναι 75% και στη συνέχεια η δεξιά πλευρά θα ρυθμιστεί στη μεταβλητή μικρότερη πλάτος (25%).

 .Hover-αριστερά. {
  Πλάτος: $ hover-πλάτος;
}

.Hover-αριστερά.
  Πλάτος: $ μικρό πλάτος.
}
.Hover-αριστερά: πριν {
  Ζ-δείκτη: 2;
} 

Αυτό λειτουργεί ακριβώς το ίδιο με την αριστερή πλευρά, όπου μια νέα τάξη θα προστεθεί στο ποντίκι στο ποντίκι χρησιμοποιώντας το JavaScript και η δεξιά οθόνη θα τεντώσει ανάλογα. Πρέπει επίσης να βεβαιωθούμε z-ευρετήριο Έχει οριστεί 2 Έτσι το κουμπί CTA γίνεται πιο εμφανές.

 .Hover-Right.
  Πλάτος: $ hover-πλάτος;
}

.Hover-Δεξιά. {
  Πλάτος: $ μικρό πλάτος.
}

.Hover-Δεξιά. Πριν {
  Ζ-δείκτη: 2;
} 

10. Μετακινηθείτε στο JavaScript

Θα χρησιμοποιήσουμε ένα άγγιγμα της Vanilla JavaScript για να μας βοηθήσετε να προσθέσουμε και να καταργήσουμε τα CSS Classes και θα χρησιμοποιήσουμε επίσης μερικά από τα νέα χαρακτηριστικά ES6. Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δηλώσουμε κάποιες σταθερές μεταβλητές.

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

 conct doc = έγγραφο; 

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

 Const Right = doc.queryselector ("δεξιά");
const αριστερά = doc.queryselector ("αριστερά");
const conteder = doc.queryselector ("δοχείο"); 

Χρησιμοποιώντας την αριστερά Σταθερή μεταβλητή που δηλώσαμε στο τελευταίο βήμα, μπορούμε τώρα να προσθέσουμε έναν ακροατή εκδήλωσης σε αυτό. Αυτό το γεγονός θα είναι το ποντίκι συμβάν και αντί να χρησιμοποιήσετε μια λειτουργία επανάκλησης, θα χρησιμοποιήσουμε μια άλλη λειτουργία ES6 που ονομάζεται Λειτουργίες βέλους (() = & GT;) .

 // Προσθέτει μια κλάση στο στοιχείο του περιέκτη στο αιωρούμενο
αριστερά.addeventListener ("Mouseenter", () = & GT; {
  container.classlist.add ("Hover-αριστερά").
}) · 

11. Προσθέστε και αφαιρέστε μια τάξη

Στο τελευταίο βήμα, ο ακροατής εκδήλωσής μας πρόσθεσε ένα ποντίκι γεγονός που στοχεύει στην κύρια τάξη εμπορευματοκιβωτίων και προσθέτει μια νέα κλάση που ονομάζεται hover-αριστερά στο στοιχείο αριστερού τμήματος. Με αυτό το καλούμενο προστιθέμενο, πρέπει τώρα να το αφαιρέσουμε όταν το δεχόμαστε. Θα το κάνουμε αυτό χρησιμοποιώντας το mouseleaveve συμβάν και το .αφαιρώ() μέθοδος.

 // Καταργεί την τάξη που προστέθηκε στο αιωρίδα
αριστερά.addeventListener ("mouseleave", () = & gt; {
  container.classlist.Remove ("Hover-αριστερά").
}) · 

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

 right.addeventListener ("mouseenter", () = & gt; {
  container.classlist.add ("hover-right").
});

δεξί.AddeventListener ("mouseleave", () = & gt; {
  container.classlist.Remove ("hover-right").
}) · 

12. Κάντε την ανταποκρινόμενη

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

 @Media (μέγιστο πλάτος: 800px) {
  h1 {
    Μέγεθος γραμματοσειράς: 2Rem; }

  .Button {
    Πλάτος: 12Rem;
  } 

Έχουμε βεβαιωθεί ότι όταν το πλάτος της σελίδας μας κατεβαίνει στο 800px, η γραμματοσειρά και τα κουμπιά θα μειωθούν σε μέγεθος. Έτσι, για να ολοκληρώσετε τα πράγματα μακριά θέλουμε να στοχεύσουμε και το ύψος και βεβαιωθείτε ότι τα κουμπιά μας μετακινούνται προς τα κάτω τη σελίδα όταν το ύψος της σελίδας παίρνει κάτω από το 700px.

 @Media (μέγιστο ύψος: 700px) {
  .Button {
    Κορυφή: 70%.
}} 

Θέλετε να αποθηκεύσετε τις σελίδες σας; Να τα εξάγει ως PDF και να τα αποθηκεύσετε σε ασφαλή αποθήκευση σύννεφων .

Web Design Event Δημιουργία Λονδίνου Επιστρέφει στις 19-21 Σεπτεμβρίου 2018, προσφέροντας ένα συσκευασμένο πρόγραμμα κορυφαίων ομιλητών της βιομηχανίας, μια ολόκληρη μέρα εργαστηρίων και πολύτιμες ευκαιρίες δικτύωσης - μην το χάσετε. Πάρτε το εισιτήριο σας τώρα .

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Net Magazine Τεύχος 305 . Εγγραφείτε τώρα .

Διαβάστε περισσότερα:

• 5 εντυπωσιακές νέες ιστοσελίδες που εμπνέονται από
• Δημιουργήστε ένα κινούμενο κείμενο 3D κειμένου
• 19 Μεγάλες ιστοσελίδες κύλισης Parallax