Möglicherweise benötigen Sie einen digitalen Großbild-Scrolling-Effekt wie diesen

Der digitale Scrolleffekt auf großen Bildschirmen stammt aus einem UI-Diagramm auf großen Bildschirmen, das in jüngster Zeit erstellt wurde. Im UI-Diagramm gibt es ein Modul, das den Effekt haben muss, dass Zahlen nach oben klappen. Der endgültige Effekt ist wie folgt:

Ideen

Bevor wir diesen Effekt erzielen, sortieren wir unsere Ideen und entwerfen mithilfe einer Mindmap unsere Implementierungsschritte wie folgt:

Erstimplementierung

Sie können Elemente prüfen und digitale Hintergrundbilder herunterladen

Lassen Sie uns den obigen Entwurfsprozess zunächst einfach implementieren

html Struktur

<div Klasse="Box">
  <p Klasse="Box-Artikel">
    <span>1</span>
  </p>
</div>

Wichtige css

.box-Artikel {
  Position: relativ;
  Anzeige: Inline-Block;
  Breite: 54px;
  Höhe: 82px;
  /* Hintergrundbild */
  Hintergrund: URL (./number-bg.png) keine Wiederholung Mitte Mitte;
  Hintergrundgröße: 100 % 100 %;
  Schriftgröße: 62px;
  Zeilenhöhe: 82px;
  Textausrichtung: zentriert;
}

Nach der Implementierung des obigen Codes wird sein Effekt wie folgt sein:

Überlegung: Nachdem sich im Hintergrundfeld Zahlen befinden, denken wir jetzt darüber nach. Der Text im Hintergrundfeld muss aus Zahlen zwischen 0-9 bestehen. Wie kann man die Zahlen scrollen lassen, ohne die obige html Struktur zu stören? Zu diesem Zeitpunkt greifen unsere Klauen nach einer CSS Eigenschaft: writing-mode . Hier ist eine Einführung in ihre Eigenschaften:

• horizontal-tb: Der Standardwert, der ein horizontales Layout von oben nach unten anzeigt.
• vertical-lr: zeigt das vertikale Layout von links nach rechts an.
• vertical-rl: zeigt das vertikale Layout von rechts nach links an.

Die Echtzeitwirkung ist wie folgt:

Basierend auf der obigen Inspiration können wir den folgenden Effekt erzielen:

html -Änderungen:

<p Klasse="Box-Artikel">
  <span>0123456789</span>
</p>

css -Änderungen:

.box-Artikel {
  Anzeige: Inline-Block;
  Breite: 54px;
  Höhe: 82px;
  Hintergrund: URL (./number-bg.png) keine Wiederholung Mitte Mitte;
  Hintergrundgröße: 100 % 100 %;
  Schriftgröße: 62px;
  Zeilenhöhe: 82px;
  Textausrichtung: zentriert;

  /* Neu hinzugefügter Code*/
  Position: relativ;
  Schreibmodus: vertikal-lr;
  Textausrichtung: aufrecht;
  /* Überlauf: versteckt; */
}
/* Neu hinzugefügter Code*/
.box-item span {
  Position: absolut;
  oben: 10px;
  links: 50%;
  transformieren: übersetzenX(-50%);
  Buchstabenabstand: 10px;
}

Scrollen berechnen

Wenn die Zahl bis 5 gerollt werden soll, bis zu welcher Zahl soll sie gerollt werden?

Die Antwort lautet: nach unten scrollen -50%

Was ist mit den anderen Zahlen?

Dank unserer speziellen Implementierung gibt es eine allgemeine Formel für die Rolldistanz jeder Ziffer:

transformieren: `übersetzen(-50%,-${Zahl * 10}%)`

Mit der obigen Formel lassen wir die Zahl bis 5 rollen und die Wirkung ist wie folgt:

css -Änderungen:

.box-item span {
  Position: absolut;
  oben: 10px;
  links: 50%;
  transformieren: übersetzen(-50 %,-50 %);
  Buchstabenabstand: 10px;
}

Implementierung der Scroll-Animation

Nachdem wir nun die spezifische Wurfdistanz jeder Zahl kennen, gestalten wir es so, dass die Zahlen zufällig rollen können:

Nachfolgend finden Sie die spezifischen zufälligen Scroll- js

Code:

setzeIntervall(() => {
  let Nummer = document.getElementById('Nummer')
  let random = getRandomNumber(0,10)
  Nummer.Stil.Transform = `übersetzen(-50%, -${random * 10}%)`
}, 2000)
Funktion Zufallszahl abrufen (min, max) {
  gibt Math.floor(Math.random() * (max - min + 1) + min) zurück
}

Bisher wurde unser digitaler Scroll-Effekt zunächst realisiert. Im nächsten Abschnitt werden wir diesen Effekt schrittweise verbessern, um den Geschäftsanforderungen gerecht zu werden.

Vollständig

Im vorherigen Abschnitt haben wir zunächst den Scroll-Effekt fertiggestellt. In diesem Abschnitt entwerfen wir eine allgemeine Vue Geschäftskomponente basierend auf der anfänglichen Mindmap.

Akzeptieren von Parametern

Diese Komponente akzeptiert nur einen Zahlenparameter, den wir in props der Vue Komponente einfügen:

Requisiten: {
  Nummer: {
    Typ: Nummer,
    Standard: 0
  }
}

Füllung

Aus geschäftlichen Gründen beträgt die maximale Ziffernanzahl 8 Definieren Sie daher eine Konstante:

const MAX_LEN = 8

Wenn die Anzahl der übergebenen Ziffern kleiner als 8 ist, müssen wir mit 0 auffüllen. Nachdem wir es mit 0 aufgefüllt haben, müssen wir es auch in das Betragsformat konvertieren.

Da dieser Teil des Codes häufiger vorkommt, wird der Code aus Platzgründen nicht angezeigt. Sie können den entsprechenden JS-Code selbst schreiben.

Rendern

Wir trennen den obigen Füllstring in Zeichen-Arrays und rendern sie auf der Seite:

computeNumber: ist ein Zeichenarray, zum Beispiel: ['0','0',',','0','0','0',','9','1','7']

html Teil des Codes:

<ul>
  <li
    :Klasse="{'Anzahl-Element': !isNaN(Element) }"
    v-for="(Element, Index) in Rechenzahl"
    :Schlüssel="Index"
  >
    <span v-if="!isNaN(item)">
      <i ref="numberItem">0123456789</i>
    </span>
    <span v-else>{{item}}</span>
  </li>
</ul>

css -Teilcode:

.Anzahl-Element {
  Breite: 50px;
  Hintergrund: URL (./number-bg.png) keine Wiederholung Mitte Mitte;
  Hintergrundgröße: 100 % 100 %;
  & > Spanne {
    Position: relativ;
    Anzeige: Inline-Block;
    Rand rechts: 10px;
    Breite: 100 %;
    Höhe: 100%;
    Schreibmodus: vertikal-rl;
    Textausrichtung: aufrecht;
    Überlauf: versteckt;
    & > ich {
      Position: absolut;
      oben: 0;
      links: 50%;
      transformieren: übersetzen(-50%,0);
      Übergang: Transformation 0,5 s, leichtes Ein- und Aussteigen;
      Buchstabenabstand: 10px;
    }
  }
}

Seiten-Rendering-Effekt:

Zufälliges Wachstum der Zahlen, Simulation des Polling-Effekts

Nachdem die Seite gerendert wurde, lassen wir die Zahlen scrollen. Wir entwerfen die folgenden zwei Methoden, wobei increaseNumber in der mounted Funktion Vue Lebenszyklus aufgerufen werden muss.

//Zeitgesteuerte Erhöhung der Zahl increaseNumber () {
  lass selbst = dies
  dieser.timer = setzeInterval(() => {
    self.neueZahl = self.neueZahl + getRandomNumber(1, 100)
    self.setNumberTransform()
  }, 3000)
},
// Den Offset jeder Ziffer festlegen setNumberTransform () {
  Lassen Sie numberItems = this.$refs.numberItem
  let numberArr = this.computeNumber.filter(item => !isNaN(item))
  für (let index = 0; index < AnzahlElemente.Länge; index++) {
    let elem = AnzahlElemente[index]
    elem.style.transform = `übersetzen(-50%, -${numberArr[index] * 10}%)`
  }
}

Der endgültige Effekt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.