Διόρθωση κινούμενων εικόνων JavaScript που εξαρτώνται από τα μέσα για ανταποκρινόμενους ιστότοπους

Κατανόηση του ζητήματος των κινούμενων εικόνων JavaScript υπό όρους

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

Σε αυτό το σενάριο χρησιμοποιούνται δύο κινούμενα σχέδια JavaScript: ένα για "κύλιση πλοήγησης" (κατάλληλο για μεγαλύτερες οθόνες) και ένα άλλο για "κύλιση cta" (call-to-action) που προορίζεται για μικρότερες συσκευές. Η δυσκολία έγκειται στο να βεβαιωθείτε ότι κάθε κινούμενη εικόνα αναπαράγεται χωριστά ανάλογα με το πλάτος της οθόνης, ενώ αποτρέπονται οι συγκρούσεις.

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

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

Διαχείριση κινούμενων εικόνων JavaScript με βάση το μέγεθος οθόνης

Τα προηγούμενα παραδείγματα σεναρίων JavaScript έγιναν για να αντιμετωπίσουν το πρόβλημα της ύπαρξης δύο διαφορετικών κινούμενων εικόνων—ένα για επιτραπέζιους υπολογιστές και ένα για κινητές συσκευές. Η διασφάλιση ότι κάθε κινούμενη εικόνα ξεκινά μόνο όταν χρειάζεται, ανάλογα με το πλάτος της οθόνης της συσκευής, είναι η κύρια πρόκληση. Ο window.matchMedia() Η τεχνική χρησιμοποιείται για να επιτευχθεί αυτό, επιτρέποντας στον κώδικα να προσδιορίζει περιπτώσεις στις οποίες πληρούνται συγκεκριμένες συνθήκες ερωτήματος μέσων. Τα σενάρια διασφαλίζουν ότι κάθε κινούμενη εικόνα λειτουργεί ξεχωριστά με βάση το μέγεθος της οθόνης χρησιμοποιώντας διαφορετικές συνθήκες για επιτραπέζιους υπολογιστές (ελάχ. πλάτος: 450 εικονοστοιχεία) και κινητά (μέγιστο πλάτος: 450 εικονοστοιχεία).

Η συμπεριφορά κύλισης μεγαλύτερης οθόνης για τη γραμμή πλοήγησης αντιμετωπίζεται στο πρώτο σενάριο. Ανάλογα με την κατεύθυνση της κύλισης, το πλοήγηση Η γραμμή είτε παραμένει ορατή είτε εξαφανίζεται όταν ο χρήστης κάνει κύλιση προς τα πάνω ή προς τα κάτω. Χρησιμοποιώντας το prevScrollpos και currentScrollPos μεταβλητές, αυτό γίνεται με σύγκριση της προηγούμενης και της τρέχουσας θέσης κύλισης. Η κύλιση προς τα επάνω προκαλεί την επανεμφάνιση της γραμμής πλοήγησης θέτοντας την επάνω θέση της στο 0 και η κύλιση προς τα κάτω προκαλεί την εξαφάνισή της μετατοπίζοντάς την εκτός προβολής με αρνητική επάνω τιμή.

Το δεύτερο σενάριο ασχολείται με το κουμπί "παρότρυνση για δράση" (CTA) σε κινητές συσκευές. Όλα τα μεγέθη οθόνης εμφανίζουν το κουμπί CTA, αλλά ενεργοποιείται μόνο όταν το πλάτος της οθόνης είναι μικρότερο από 450 pixel. Όταν ο χρήστης κάνει κύλιση προς τα πάνω, το κουμπί ολισθαίνει από την αριστερή πλευρά της οθόνης. όταν κάνουν κύλιση προς τα κάτω, το κουμπί εξαφανίζεται από την προβολή. Με την ίδια λογική σύγκρισης θέσης κύλισης με τη γραμμή πλοήγησης, αυτή η συμπεριφορά είναι συγκρίσιμη. Ωστόσο, αντί να αλλάξει την επάνω τιμή, τροποποιεί την αριστερή θέση του κουμπιού, με αποτέλεσμα είτε να εμφανίζεται είτε να εξαφανίζεται με βάση την κατεύθυνση της κύλισης.

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

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollFunction(); };

function scrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQueryNav.matches) {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  if (mediaQueryCta.matches) {
    // CTA scroll for mobile screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  }
  prevScrollpos = currentScrollPos;
}

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

mediaQueryNav.addEventListener("change", handleNavScroll);
mediaQueryCta.addEventListener("change", handleCtaScroll);

function handleNavScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", navScrollFunction);
  } else {
    window.removeEventListener("scroll", navScrollFunction);
  }
}

function handleCtaScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", ctaScrollFunction);
  } else {
    window.removeEventListener("scroll", ctaScrollFunction);
  }
}

function navScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-90px";
  }
  prevScrollpos = currentScrollPos;
}

function ctaScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header-button").style.left = "0.25in";
  } else {
    document.getElementById("header-button").style.left = "-10in";
  }
  prevScrollpos = currentScrollPos;
}

// Initial call to apply the correct event listeners
handleNavScroll(mediaQueryNav);
handleCtaScroll(mediaQueryCta);

var prevScrollpos = window.pageYOffset;
var mediaQuery = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollHandler(); };

function scrollHandler() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQuery.matches) {
    // CTA scroll for mobile
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  } else {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  prevScrollpos = currentScrollPos;
}

Βελτιστοποίηση JavaScript για Responsive Animations

Ένα κρίσιμο συστατικό για την ανάπτυξη ιστοτόπων με απόκριση είναι η διασφάλιση ότι οι μεταβάσεις και τα κινούμενα σχέδια ανταποκρίνονται διαφορετικά σε συσκευές διαφορετικού μεγέθους. Η αποτελεσματική διαχείριση συνθηκών είναι ζωτικής σημασίας όταν εργάζεστε με ερωτήματα πολυμέσων και JavaScript, ιδιαίτερα όταν τα κινούμενα σχέδια προορίζονται να ξεκινήσουν μόνο σε συγκεκριμένα μεγέθη οθόνης. Αυτό είναι όπου οι δυναμικοί ακροατές εκδηλώσεων και window.matchMedia() μπαίνουν στο παιχνίδι. Με τη βοήθεια αυτών των εργαλείων, οι προγραμματιστές μπορούν να βεβαιωθούν ότι τα κινούμενα σχέδια ξεκινούν μόνο όταν πληρούνται ορισμένα κριτήρια, βελτιώνοντας την εμπειρία και την απόδοση του χρήστη τόσο σε επιτραπέζιους όσο και σε φορητές πλατφόρμες.

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

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