Δημιουργία της ιστοσελίδας StartupGiraffe

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

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

Η πρόκληση για εμάς ήταν να σιγουρευτούμε ότι δεν πήγαμε υπερβολικά πέρα ​​από το σκάφος με το Javascript για να φορολογήσουμε την απόδοση του site και να αποσπάσουμε την εμπειρία του χρήστη. Τελικά αποφασίσαμε να απορρίψουμε την ιδέα μιας παράλλαξης υπέρ μιας επίδρασης "αυξανόμενης καμηλοπάρδαλης".

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

Δομή ιστοτόπου

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

Για αυτό το demo, θα παραλείψουμε το περιτύλιγμα φόντου επειδή δεν υπάρχουν πολλά πράγματα για αυτό.

Αυξημένη επίδραση καμηλοπάρδαλης

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

Υπάρχουν πραγματικά πολλοί τρόποι να το κάνετε αυτό (και είμαστε σίγουρα ανοιχτοί σε προτάσεις), αλλά αυτό που επιλέξαμε χρησιμοποιεί jQuery.waypoints ως μέσο για την ανίχνευση και την ανταπόκριση στα γεγονότα κύλισης.

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

HTML

CSS

body {background-color: #000;}#content-wrapper, #giraffe-wrapper {position: absolute;top: 0px;left: 0px;width: 100%;}#first-content {position: relative;}#big-logo-wrapper {position:fixed;top: 250px;width: 100%;max-width: 1920px;}#big-logo {width:465px; height:231px;display:block; margin:0 auto;}#giraffe {position: relative;left: 100px;height: 3200px;}

JavaScript

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

$(function() {var windowHeight = $(window).height(),giraffe = $("#giraffe"),firstHeight = windowHeight + 380,firstContent = $("#first-content");giraffe.css("top", windowHeight + "px");firstContent.css("height", firstHeight + "px")});

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

Το plugin waypoints μας επιτρέπει να καλέσουμε μια λειτουργία όταν ο χρήστης κυλάει πέρα ​​από ένα συγκεκριμένο στοιχείο DOM. Επίσης, μας επιτρέπει να εντοπίσουμε σε ποια κατεύθυνση θα μετακινηθεί ο χρήστης. Χρησιμοποιήσαμε αυτά τα συμβάντα "επάνω" και "κάτω" για να προσθέσετε ή να αφαιρέσετε μια κλάση που αλλάζει την ιδιότητα θέσης του λογότυπου μεταξύ σταθερού και απόλυτου.

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

 var logo = $('#big-logo-wrapper');firstContent.waypoint(function( direction) {if ( direction === 'down' ) {logo.addClass("first-scroll");} else {logo.removeClass('first-scroll');}},{offset: logo.height() + (parseInt(logo.css("top"))) - firstHeight});

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

Έχετε ερωτήσεις; Έχετε έναν καλύτερο τρόπο να το κάνετε; Ενημερώστε μας στα σχόλια.