Ihr Titel ist einer der wichtigsten Teile Ihrer Homepage. Dies ist normalerweise das, was Sie zuerst sehen und daher den ersten Eindruck bestimmen. Wie bei jedem anderen ersten Eindruck möchten Sie, dass es gut ist. Wenn Sie nun nach einer kreativen Möglichkeit suchen, Ihren Titel zu präsentieren, wird Ihnen dieses Tutorial gefallen. Wir zeigen Ihnen, wie Sie Ihrem Titel CSS-Textblockanimationen hinzufügen können, und Sie können die Layout-JSON-Datei auch kostenlos herunterladen!
Übersicht
Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.
Beginnen wir mit dem Design
Fügen Sie Abschnitt 1 hinzu
Hintergrund mit Farbverlauf
Beginnen Sie, indem Sie einer neuen Seite oder der Seite, an der Sie arbeiten, einen regulären Abschnitt hinzufügen. Öffnen Sie die Abschnittseinstellungen und wenden Sie den folgenden Verlaufshintergrund an:
- Farbe 1: # f0f2b
- Farbe 2: # c10b1a
- Verlaufstyp: linear
- Steigungsrichtung: 63deg
Abstand
Wechseln Sie zur Registerkarte "Abschnittsdesign" und wenden Sie die folgenden benutzerdefinierten Werte für die obere und untere Füllung auf verschiedene Bildschirmgrößen an:
- Obere Polsterung: 7vw (Desktop), 20vw (Tablet), 25vw (Telefon)
- Bodenpolsterung: 7 VW (Schreibtisch), 20 VW (Tablet), 25 VW (Telefon)
Grenze
Fügen Sie dem Abschnitt auch einen Rahmen hinzu.
- Randbreite: 2vw (oben, links, rechts)
- Breite des unteren Randes: 0vw
- Randfarbe: #ffffff
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:
Sizing
Öffnen Sie die Linienparameter und ändern Sie die Bemaßungsparameter entsprechend:
- Breite: 100%
- Maximale Breite: 100%
Fügen Sie der Spalte einen Textbaustein hinzu
Fügen Sie H1-Inhalte hinzu
Fügen Sie dann ein Textmodul mit einem H1-Titel Ihrer Wahl hinzu.
Fügen Sie jedem Wort im H1-Titel Div-Tags hinzu
Wechseln Sie zur Textregisterkarte Ihrer Titelkopie und fügen Sie jedem Wort in Ihrem Titel ein anderes div hinzu. Die CSS-ID muss für jedes Wort unterschiedlich sein.
Bereit
beim
Bauen
Wunderschönen
Websites?
H1-Texteinstellungen
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H1-Texteinstellungen entsprechend:
- Titelschrift: Work Sans
- Schriftgröße des Titels: mittel
- Kopfzeilentextfarbe: #ffffff
- Kopfzeilentextgröße: 4vw (Desktop), 5vw (Tablet), 6vw (Telefon)
- Kopfzeilenhöhe: 1,4 em
Abstand
Ändern Sie dann die Randwerte auf verschiedenen Bildschirmgrößen.
- Linker Rand: 20 VW (Schreibtisch und Tablet), 15 VW (Telefon)
- Rechter Rand: 35vw (Desktop), 20vw (Tablet), 15vw (Telefon)
Fügen Sie der Spalte ein Codemodul hinzu
Fügen Sie den CSS-Code ein
Damit die Textblockanimation auf unseren Titel angewendet werden kann, benötigen wir CSS-Code. Wir werden diesen CSS-Code einem neuen Codemodul hinzufügen.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
Abstand
Wechseln Sie zur Registerkarte Moduldesign und entfernen Sie alle Standard-Bodenpolster.
- Unterer Rand: 0px
Fügen Sie der Spalte ein Schaltflächenmodul hinzu
Kopie hinzufügen
Das nächste Modul, das wir brauchen, ist ein Tastenmodul. Geben Sie eine Kopie Ihrer Wahl ein.
Tasteneinstellungen
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Tasteneinstellungen entsprechend:
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
- Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Knopftextfarbe: #ffffff
- Hintergrundfarbe der Schaltfläche: # 000000
- Schaltflächenrandbreite: 0px
- Tastenschrift: Work Sans
Abstand
Gehen Sie dann zu den Abstandseinstellungen und wenden Sie benutzerdefinierte Rand- und Füllwerte auf verschiedene Bildschirmgrößen an.
- Oberer Rand: 3vw (Büro),
- Linker Rand: 20 VW (Schreibtisch und Tablet), 15 VW (Telefon)
- Obere Polsterung: 1.2vw (Desktop), 2vw (Tablet), 4vw (Telefon)
- Bodenpolsterung: 1.2 VW (Schreibtisch), 2 VW (Tablet), 4 VW (Telefon)
- Linke Polsterung: 1.8vw (Desktop), 3vw (Tablet), 6vw (Telefon)
- Rechte Polsterung: 1.8vw (Schreibtisch), 3vw (Tablet), 6vw (Telefon)
Animation
Passen Sie auch die Animationseinstellungen an.
- Animationsstil: Flip
- Animationsrichtung: nach unten
- Animationsverzögerung: 2000 ms
- Animationsintensität: 100%
- Deckkraft des Animationsstarts: 100%
- Animationsgeschwindigkeitskurve: Easy-In-Out
- Animation wiederholen: einmal
Fügen Sie Abschnitt 2 hinzu
Fahren Sie fort, indem Sie einen neuen regulären Abschnitt direkt unter dem vorherigen hinzufügen.
Abstand
Öffnen Sie die Abschnittseinstellungen und entfernen Sie die standardmäßige obere Polsterung.
- Obere Polsterung: 0px
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:
Sizing
Öffnen Sie die Zeilenparameter, ohne weitere Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.
- Breite: 100%
- Maximale Breite: 100%
Fügen Sie der Spalte einen Textbaustein hinzu
Inhalt hinzufügen
Als nächstes fügen Sie einen Textbaustein mit a hinzu Inhalt Beschreibung Ihrer Wahl.
Hintergrundfarbe
Fügen Sie eine weiße Hintergrundfarbe hinzu.
- Hintergrundfarbe: #ffffff
Texteinstellungen
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Texteinstellungen entsprechend:
- Textschrift: Work Sans
- Textfarbe: # 9b9b9b
- Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Höhe der Textzeile: 2.6em
Abstand
Fügen Sie außerdem benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzu.
- Oberer Rand: -5vw (Desktop), -20vw (Tablet), -27vw (Telefon)
- Linker Rand: 20 VW (Schreibtisch), 13 VW (Tablet), 8 VW (Telefon)
- Rechter Rand: 20vw (Desktop), 13vw (Tablet), 8vw (Telefon)
- Obere Polsterung: 5vw (Desktop), 7vw (Tablet und Telefon)
- Bodenpolsterung: 5vw (Schreibtisch), 7vw (Tablet und Telefon)
- Linke Polsterung: 3vw (Desktop), 5vw (Tablet), 6vw (Telefon)
- Rechte Polsterung: 3vw (Schreibtisch), 5vw (Tablet), 6vw (Telefon)
Schattenkiste
Vervollständigen Sie die Moduleinstellungen, indem Sie einen subtilen Kastenschatten anwenden. Das ist es!
- Stärke der Schattenunschärfe: 50px
- Schattenfarbe: rgba (0,0,0,0,1)
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Abschließende Gedanken
In diesem Artikel haben wir Ihnen gezeigt, wie Sie Ihrem Titel CSS-Textblockanimationen hinzufügen. Es ist wichtig sicherzustellen, dass Ihr Titel von Anfang an sichtbar und lesbar ist. Das Hinzufügen von Animationen zu Ihrem Titel kann definitiv helfen! Sie konnten die Layout-JSON-Datei auch kostenlos herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.
Übersetzt von: ElegantThemes
