Kundenberichte sind eine beliebte Website-Funktion. Sie verleihen einem Unternehmen Glaubwürdigkeit und vermitteln Vertrauen. Wenn Ihre anderen Kunden Sie so sehr lieben, könnte ich auch!
Als unterhaltsames Experiment wollen wir heute einen coolen kleinen Zitatabschnitt erstellen, der nur mit CSS zwischen verschiedenen Zitaten wechselt. Auf dem Weg erfahren Sie alles über das Planen und Erstellen von Keyframe-Sequenzen mit mehreren Schritten. Lass uns anfangen.
Das HTML
Um dieses Projekt zu starten, müssen wir über die Struktur unseres Angebots entscheiden. In der Regel enthält ein Zitat eines Kunden drei Textteile: den Namen des Kunden, woher er stammt und was er gesagt hat.
Zu diesem Zweck können wir einen Angebotscontainer erstellen, der aus drei verschiedenen Teilen besteht. Der Header enthält den Namen des Kunden, das kleine Element vermutlich den Namen der Firma, von der der Kunde stammt, oder eine andere verwandte Information, und der Absatz mit dem Anführungszeichen.
Da wir drei verschiedene Elemente verwendet haben, benötigen wir keine zusätzlichen Haken und sollten in der Lage sein, jedes Zitatstück in unserem CSS einfach anzuvisieren. Als Randbemerkung wählte ich hier willkürlich ein h3, einfach weil h1 und h2 normalerweise für andere Zwecke aufgebraucht sind. Fühlen Sie sich frei, dies zu ändern, was Sie möchten.
Nachdem wir unsere Struktur herausgefunden haben, ist es Zeit, sie in drei verschiedene Anführungszeichen zu erweitern. Um die Vielseitigkeit dieses Projekts zu demonstrieren, entschied ich mich, meinen Text mit den letzten Worten einiger berühmter Personen zu füllen. Ein bisschen morbide, aber als Platzhalter reicht es!
Starter-CSS
Wenn Sie Ihren HTML-Code ausgearbeitet haben, wechseln Sie zu Ihrem CSS und geben Sie etwas ein, das dem folgenden Code ähnelt. Grundsätzlich habe ich ein interessantes Hintergrundmuster gesetzt und den Container definiert, der die Anführungszeichen enthalten soll.
Zitatstile
Als nächstes ist es Zeit, die Zitatdivs zu gestalten. Ich habe hier die absolute Positionierung verwendet, damit alle drei Anführungszeichen den gleichen Platz einnehmen. Standardmäßig erstellen sie einen vertikalen Stapel, aber wir wollen das überhaupt nicht. In unserem fertigen Produkt wird ein Zitat ausgeblendet, dann wird ein anderes eingeblendet. Daher möchten wir, dass sie sich an derselben Stelle befinden.
Ich habe auch die Deckkraft auf Null gesetzt, damit alle Zitate standardmäßig ausgeblendet werden. Opazität ist eine eigenartige Eigenschaft, mit der man wirklich arbeiten muss. Wir werden später noch etwas darüber reden. Zu beachten ist, dass Sie bei der Deckkraft bei null nichts sehen. Daher möchten Sie diesen Teil vorübergehend auskommentieren, während Sie den Zitatabschnitt gestalten.
Textstile zitieren
Nachdem wir nun den allgemeinen Zitatcontainer gestaltet haben, ist es an der Zeit, jedes Textstück zu packen und es individuell zu gestalten. Für diese Demo machen wir den Text schön und groß. Setzen Sie also h3 auf 55px und klein auf 18px und verwenden Sie dann Helvetica für die Schriftfamilie.
Unsere Aufgabe mit dem Absatz ist viel komplexer. Wir müssen es nicht nur in eine Box einordnen, sondern auch aus dem Stapel entfernen und rechts neben den anderen Inhalt kleben.
Damit dies geschehen kann, müssen wir einige Dinge tun, daher habe ich meine Stile in drei verschiedene Schritte unterteilt (siehe unten).
Für den ersten Schritt habe ich das "Iicing" erledigt. oder standardmäßige visuelle Sachen. Ich habe den Hintergrund weiß gemacht, die Schriftart eingestellt und den Text auf die Mitte ausgerichtet. Als Nächstes habe ich die Positionierung und Größe der tatsächlichen Box durch die Verwendung von Polsterung und absoluter Positionierung bestimmt. Ich habe das Ganze mit einem optionalen Randradius beendet, der unsere Ecken schön abrundet.
Fortschrittskontrolle
Wenn wir unseren Fortschritt überprüfen, indem wir sicherstellen, dass ein Zitat sichtbar ist, sehen wir ziemlich gut aus! Unser Zitat sitzt jedoch in einer einfachen alten Box. Wir vermissen das kleine Dreieck, das es wie eine Sprechblase aussehen lässt.
Dreieck hinzufügen
Um dieses kleine Dreieck hinzuzufügen, müssen wir uns auf das: after Pseudo-Element konzentrieren. Grundsätzlich erstellen wir ein leeres Element, positionieren es auf der linken Seite und verwenden ein kompliziertes Randvoodoo.
Wie Sie sehen, gibt uns das die Wirkung, die wir anstreben, ziemlich ordentlich, oder?
Animiere diese Sucka
Nachdem wir unser visuelles Styling und unsere Positionierung herausgefunden haben, ist es an der Zeit, eine Möglichkeit zu finden, ein Zitat auszublenden und in einem anderen zu platzieren und diesen Vorgang in einer Endlosschleife zu wiederholen. Wir könnten und sollten jQuery verwenden, aber heute versuchen wir es mit reinem CSS herauszufinden, also wenden wir uns den Keyframe-Animationen zu.
Ich werde hier brutal ehrlich sein, ich mache diese Sachen fast jeden Tag und es dauerte immer noch ewig, bis ich die richtige Reihenfolge gefunden habe, um die Keyframes zum richtigen Zeitpunkt ein- und auszublenden. Ich fummelte und fummelte und hatte immer wieder unangenehme Überschneidungen und Ergebnisse, die gar nicht das waren, was ich wollte.
Ich sage dir das, damit du weißt, dass du nicht alleine bist, wenn du immer noch Wände findest, die schwer zu überwinden sind. Schließlich bekam ich mein langsames Gehirn, um das Konzept einzuwickeln.
Ich bin ein visueller Denker, also habe ich eine grobe Grafik erstellt, um zu sehen, wie alles funktioniert. Grundsätzlich möchten wir diese Animationen so stapeln, dass immer nur ein Zitat sichtbar ist. Um dies zu erreichen, erstellen wir eine dreißig Sekunden lange Animation und teilen sie in drei Teile auf. Der erste und der letzte Teil haben eine Deckkraft von Null und der zweite Teil hat eine Deckkraft von Eins.
Wie Sie sehen können, müssen wir die Startzeit der zweiten Animation um zehn Sekunden und die Startzeit der dritten Animation um 20 Sekunden verzögern. Wenn Sie also an einer beliebigen Stelle des Diagramms eine vertikale Linie zeichnen, wird zur gleichen Zeit nur ein Zitat angezeigt.
Als ich das implementiert habe, hat mir nicht gefallen, wie lange es dauerte, bis die Zitate ein- und ausgeblendet waren. Ich möchte ein schnelles Einblenden, eine lange Sichtbarkeit und ein schnelles Ausblenden. Dazu müssen wir lediglich ein paar weitere Keyframes hinzufügen. Hier ist die Reihenfolge, die ich mir ausgedacht habe:
Wir müssen nur die eine Sequenz einrichten, aber wir wenden sie auf drei verschiedene Anführungszeichen an. Der einzige Unterschied ist im Wesentlichen der Verzögerungswert, der die Animation einige Sekunden vor dem Beginn warten lässt.
Das ist alles dazu! Wenn die Seite geladen wird, wird das erste Zitat eingeblendet und dann ausgeblendet, wenn das zweite Zitat eingeht (und so weiter).
Browser-Kompatibilität
An diesem Punkt schreien Sie wahrscheinlich am Computerbildschirm, dass ich ein Idiot bin und nur Webkit-Präfixe verwendet. In Wahrheit tat ich das nur, um die Dinge verständlich zu halten. Nun, da wir alles herausgefunden haben, können wir unseren guten alten Freund Prefixr verwenden, um es auszuweiten. Wenn wir dies tun, ist hier der riesige Code, der herausgespuckt wird:
Wie bereits erwähnt, ist unsere Verwendung der Opazitätseigenschaft ein wenig suspekt, da die Unterstützung der Opazität ein Durcheinander ist. Glücklicherweise übernimmt Prefixr die Führung und versucht sicherzustellen, dass unser Code für die Verwendung mit so vielen Browsern wie möglich ausgelegt ist. Leider ist es ein wenig übertrieben, wenn all diese Filtereigenschaften eingefügt werden, bei denen sie nicht unbedingt erforderlich sind. Daher ist eine Aufräumaktion möglicherweise eine gute Idee.
Selectivizr
Wir haben im Tutorial einige erweiterte Selektoren verwendet. Wenn wir uns mit dem Thema Browserunterstützung beschäftigen, muss ich jedoch darauf hinweisen, dass Sie Selectivizr und jQuery zu Ihrem Projekt hinzufügen müssen, um sicherzustellen, dass ältere Browser diese verstehen.
Keyframe-Unterstützung
Hier ist der Kicker. Wir haben das alles durchgearbeitet, um sicherzustellen, dass wir die Browserunterstützung für Selektoren und Deckkraft maximal ausschöpfen, aber am Ende wird IE immer noch das Mitspielen ablehnen, da es bis IE 10 keine Unterstützung für Keyframes gibt .
Offensichtlich wird JavaScript hier die Antwort sein, wenn Sie dies in der realen Welt verwenden möchten. Sie können das Ganze entweder in JS ausführen oder es einfach als Backup für Browser verwenden, die keine Keyframes unterstützen.
Demo
Hier ist die Live-Demo. Warten Sie beim Starten des Programms eine Weile. Denken Sie daran, dass die gesamte Animation dreißig Sekunden dauert!
Demo: Klicken Sie hier, um zu starten
Fazit
Keyframes sind seit den Tagen, als sie nur von Webkit-Browsern unterstützt wurden, sehr weit gekommen. Bedenken Sie jedoch, dass sie aufgrund unseres alten Freundes IE noch mehr im Bereich "Spaß beim Spielen" sind. als etwas, auf das Sie sich bei wichtigen Projekten verlassen sollten.
Hinterlasse einen Kommentar und lass uns wissen, ob dir dieses Tutorial gefallen hat und wie du es verbessern könntest!