Πώς να κάνετε τον ιστότοπό σας αποκριτικό και διαδραστικό με CSS και JavaScript

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

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

Σε αυτό το άρθρο εκμάθησης, θα μάθετε πώς να κάνετε τον ιστότοπό σας HTML και CSS να αποκρίνεται και να είναι διαδραστικός.

Κάνοντας τον Ιστότοπό σας Διαδραστικό

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

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

κύλιση και στο κλικ εκδηλώσεις.

Η ενεργοποίηση ενός στοιχείου μενού κάθε φορά που κάνετε κύλιση προς τα πάνω ή προς τα κάτω σε έναν ιστότοπο θα απαιτεί τη χρήση μιας λειτουργίας JavaScript που μπορείτε να ονομάσετε "activeMenu". Αυτή η λειτουργία θα χρειαστεί πρόσβαση στα στοιχεία μενού στη γραμμή πλοήγησης, καθώς και σε κάθε ενότητα του ιστότοπου. Ευτυχώς, μπορείτε να το πετύχετε με τη χρήση του querySelectorAll Επιλογέας DOM.

Στον κατάλογο του έργου σας, θα χρειαστεί να δημιουργήσετε ένα νέο αρχείο JavaScript και να το συνδέσετε με το αρχείο HTML χρησιμοποιώντας την ακόλουθη γραμμή κώδικα:

Σε ένα γραφή ετικέτα, το src τιμή είναι το όνομα του αρχείου JavaScript, το οποίο στο παραπάνω παράδειγμα είναι main.js.

Το αρχείο main.js

// χρησιμοποιώντας javascript για να ενεργοποιήσετε το στοιχείο μενού onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("section");
συνάρτηση activeMenu(){
ας len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("active"));
li[len].classList.add("ενεργό");
}
activeMenu();
window.addEventListener("scroll", activeMenu);

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

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

#navbar .menu li.active a{
χρώμα: #fff;
}

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

 //χρησιμοποιώντας το jquery για να ενεργοποιήσετε το στοιχείο μενού με κλικ
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

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

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

Ενότητα{
scroll-margin-top: 4,5rem;
}

Ο παραπάνω κώδικας θα διασφαλίσει ότι όταν πλοηγείστε σε κάθε ενότητα κάνοντας κλικ, η γραμμή πλοήγησης θα παραμείνει 4,5 εκ. πάνω από κάθε ενότητα (ή 72 εικονοστοιχεία). Ένα άλλο ωραίο χαρακτηριστικό που μπορείτε να προσθέσετε στον ιστότοπό σας είναι ομαλή κύλιση, το οποίο μπορείτε να πραγματοποιήσετε με τον ακόλουθο κώδικα CSS:

html {
κύλιση-συμπεριφορά: ομαλή;
}

Κάνοντας την αρχική σας σελίδα διαδραστική

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

Στον ιστότοπο του χαρτοφυλακίου, ο μόνος σύνδεσμος στην αρχική σελίδα έχει το btn τάξη (που του δίνει την εμφάνιση ενός κουμπιού). Έτσι, για να κάνετε αυτό το κουμπί διαδραστικό, μπορείτε απλά να αντιστοιχίσετε το :φτερουγίζω επιλογέας στο btn τάξη.

Χρησιμοποιώντας τον επιλογέα :hover

 .btn: hover{
φόντο: #fff;
χρώμα: μπλε;
περίγραμμα: μπλε στερεό ;
περίγραμμα-ακτίνα: 5px;
}

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

Ένα άλλο ωραίο χαρακτηριστικό για την αρχική σελίδα είναι ένα κινούμενο σχέδιο πληκτρολόγησης, το οποίο χρησιμοποιεί δακτυλογραφημένο.js (ένα σενάριο κινούμενης εικόνας πληκτρολόγησης jQuery).

Χρησιμοποιώντας το typed.js

// σενάριο κινούμενης εικόνας πληκτρολόγησης jquery
var typed = new Typed(".typing", {
συμβολοσειρές: ["Προγραμματιστής λογισμικού"],
τύπος Ταχύτητα: 100,
Ταχύτητα επιστροφής: 60,
βρόχος: αληθής
});

Αφού προσθέσετε τον παραπάνω κώδικα στο αρχείο JavaScript, θα χρειαστεί να κάνετε την ακόλουθη αλλαγή στο HTML:

Και είμαι α 

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

Κάνοντας διαδραστικά άλλα τμήματα του ιστότοπού σας

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

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

.img-container img{
μέγιστο πλάτος: 450 px;
μετάβαση: όλα τα 0,3s ease-out.
δρομέας: δείκτης;
}
.img-container img: hover{
μετασχηματισμός: κλίμακα (1.2);
}

Κάντε τον ιστότοπό σας να ανταποκρίνεται

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

Σχετίζεται με: Πώς να χρησιμοποιήσετε τα ερωτήματα πολυμέσων σε HTML και CSS για να δημιουργήσετε ανταποκρινόμενους ιστότοπους

Στην τρέχουσα κατάστασή του, ο ιστότοπος του χαρτοφυλακίου εμφανίζεται καλά σε επιτραπέζιους και φορητούς υπολογιστές. Έτσι, η απόκρισή του θα σημαίνει τη δημιουργία μιας προσαρμοσμένης διάταξης για tablet και smartphone.

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

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

Εισαγωγή της γραμμής του κώδικα παραπάνω μέσα στο κεφάλι η ετικέτα του αρχείου HTML σας (ή σε αυτήν την περίπτωση του αρχείου ιστότοπου χαρτοφυλακίου) θα διασφαλίσει ότι κάθε συσκευή με πλάτος οθόνης 1100 εικονοστοιχεία και κάτω θα χρησιμοποιήσει το στυλ στο ευρεία οθόνη.css αρχείο.

Το αρχείο widescreen.css

/* Σπίτι */
#navbar .container h1 a span{
οθόνη: καμία;
}
#home .home-content .text-3 span{
χρώμα: #000000;
}
/* Χαρτοφυλάκιο */
.έργα{
justify-content: κέντρο;
}
.έργο{
flex: 0;
}
/* Σχετικά με */
.about-content{
flex-direction: στήλη;
}
/* Επικοινωνία */
.contact-content{
flex-direction: στήλη;
}

Ο παραπάνω κώδικας θα δημιουργήσει μια διάταξη που αποκρίνεται σε συσκευές με μεγέθη οθόνης 1100 px και κάτω, όπως μπορείτε να δείτε στην παρακάτω έξοδο:

Το δεύτερο αρχείο CSS θα δημιουργήσει τη δομή διάταξης για smartphone και tablet σε κατακόρυφη λειτουργία. Θα έχει μέγιστο πλάτος 760 px, όπως μπορείτε να δείτε στην παρακάτω ετικέτα συνδέσμου:

Το αρχείο mobile.css

/* Γραμμή πλοήγησης */
#navbar .container h1 a span{
οθόνη: καμία;
}
#navbar .container .menu{
περιθώριο-αριστερά: 0rem;
}
#ζαμπόν-μενού{
πλάτος: 35 px;
ύψος: 30 px;
περιθώριο: 30px 0 20px 20px;
δρομέας: δείκτης;
}
#navbar .container .menu-wrap .menu{
οθόνη: καμία;
}
.μπαρ{
ύψος: 5 px;
πλάτος: 100%;
φόντο-χρώμα: #ffffff;
οθόνη: μπλοκ;
περίγραμμα-ακτίνα: 5px;
μετάβαση: ευκολία 0,3 δευτ.
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Σπίτι */
#Σπίτι{
οθόνη: flex;
φόντο: url("/images/home.jpg") κέντρο χωρίς επανάληψη.
Ύψος: 100vh;
}
#home .container{
περιθώριο: 6 εκ. 1 εκ. 2 εκ. 1 εκ.;
padding: 2rem;
}
#home .home-content .text-1{
μέγεθος γραμματοσειράς: 20 px;
περιθώριο: 1,2 rem;
}
#home .home-content .text-2{
μέγεθος γραμματοσειράς: 45 px;
βάρος γραμματοσειράς: 500;
περιθώριο: 1rem;
}
#home .home-content .text-3{
μέγεθος γραμματοσειράς: 22 px;
περιθώριο: 1,2 rem;
}
#home .home-content .text-3 span{
χρώμα: #0000ff;
βάρος γραμματοσειράς: 600;
}
#home .container{
περιθώριο-αριστερά: 4,5 εκ.
}
/* Σχετικά με */
#about .container{
γέμιση: 0;
}
/* Επικοινωνία */
#contact .container{
γέμιση: 0;
}

Το παραπάνω αρχείο θα δημιουργήσει την ακόλουθη αποκριτική διάταξη smartphone:

Άλλοι τρόποι για τη δημιουργία ανταποκρινόμενων διαδραστικών ιστοσελίδων

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

Πολλά πλαίσια frontend και ακόμη και πρότυπα σε υπηρεσίες όπως το Joomla διευκολύνουν τα διαδραστικά σχέδια που ανταποκρίνονται.

15 κομψά πρότυπα Joomla για ανταποκρινόμενους ιστότοπους

Θέλετε να δημιουργήσετε έναν ιστότοπο για την επιχείρηση ή το blog σας; Δοκιμάστε αυτά τα πρότυπα Joomla.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα