Ελάμε προς τα εμπρός μόνο λίγο εφηβικό εδώ. Αυτή είναι μια αρκετά ολοκληρωμένη σειρά screencast, αλλά είναι μόνο 40 ώρες περίπου και φυσικά αυτό το πραγματικό έργο μοιάζει περισσότερο με μερικές εκατοντάδες. Σε αυτήν την περίπτωση, το άλμα προς τα εμπρός ήταν να διαμορφώσουμε λίγο την εξάπλωση των δύο σελίδων. Περνάμε από αυτές τις αλλαγές στην αρχή.
Οι σελίδες αριστερά και δεξιά έχουν ένα κοινόχρηστο και ένα διαφορετικό όνομα τάξης. Αυτό είναι εξαιρετικά κοινό που βρίσκω σε πολλά διαφορετικά σενάρια στο σχεδιασμό ιστοσελίδων. Σε αυτήν την περίπτωση, οι σελίδες μοιράζονται την ίδια κλίση και το ίδιο μέγεθος. Αλλά διαφέρουν όταν εφαρμόζουμε skew()μετασχηματισμό CSS3 . Αυτό μας δίνει ένα αρκετά καθαρό «ανοιχτό βιβλίο» εφέ. Επειδή όλα αυτά τα εφέ δημιουργούνται με CSS, κλιμακώνονται όμορφα (με τρόπο που μια εικόνα σχεδόν σίγουρα δεν θα).
Είχαμε μια έξυπνη λύση ίσου ύψους, αλλά δυστυχώς λόγω του έξυπνου ανοιχτού βιβλίου μας, αυτό σπάει. Αντ 'αυτού, απλά χρησιμοποιούμε ένα άγγιγμα JavaScript.
Πρώτον, κοιτάζοντας το JavaScript, γράφουμε μια γραμμή που θα κρύψει οποιοδήποτε από τα «γράμματα» που δεν έχουν παιδιά. Για παράδειγμα, δεν υπάρχουν επιλογείς που ξεκινούν με το "Z", αλλά έχουμε μια σελίδα που δημοσιεύεται με την ονομασία, ώστε να είναι ολοκληρωμένη. Ανακαλύπτουμε αυτά (και μετά τα κρύβουμε) με τον εξαιρετικά χρήσιμο :has()επιλογέα jQuery .
Για τα ίδια ύψη, μετράμε και τις δύο στήλες, αποφασίζουμε ποια είναι η ψηλότερη και, στη συνέχεια, και τις δύο στην ψηλότερη. Πρέπει να χρησιμοποιήσουμε ένα ελαφρώς χαλασμένο setTimeout για να λειτουργεί σωστά λόγω της φόρτωσης @ font-face που παίρνει λίγο χρόνο και επηρεάζει τα ύψη. Θα μπορούσαμε τελικά να χρησιμοποιήσουμε κάποιο είδος επιστροφής φόρτωσης γραμματοσειράς. (Ή, αυτό μπορεί να είναι υπερβολικό).
Στη συνέχεια μεταβαίνουμε σε μονές σελίδες αλμανάκ. Φορτηγά γρήγορα τώρα! Έχουμε κάνει κάτι τέτοιο πολλές φορές τώρα, δεν αποτελεί έκπληξη ότι κινούμαστε πιο γρήγορα. Ουσιαστικά κτυπάμε αυτό το πρότυπο σε σχήμα με τον ίδιο τρόπο που διαμορφώσαμε μια μεμονωμένη ανάρτηση ιστολογίου ή μια γενική σελίδα ή κάτι παρόμοιο.
Χρησιμοποιούμε μια «μαύρη μπάρα» για τα ψίχουλα, τσιμεντοποιώντας αυτό το μοτίβο σχεδίασης ως κάτι που θα χρησιμοποιούμε ξανά και ξανά για την πλοήγηση στην περιοχή.