Erstellen Sie perfekten Regenbogen-Text mit CSS und jQuery
Ein einfaches Tutorial zeigt, wie der Regenbogen-Text-Effekt mit einfachen CSS erstellen und es mit lettering.js weiter polieren.
Regenbogen-Text mit CSS ist ziemlich einfach, was Sie erstellen können, während sie mit dem Farbattribut zu spielen.
Die Idee ist einfach - trennt jedes Zeichen in Ihrem Text mit Elemente, und sie mit Hilfe von CSS-Stil. Eine weitere Sache, die Sie wissen müssen (oder Sie vielleicht schon wissen) ist die Farben im Regenbogen. Dies ist wichtig, Teil, wie es Ihnen perfekte Regenbogenfarben zu Ihrem Text hinzufügen helfen.
Im Fall, wenn Sie nicht wissen, hat die Rainbow 7 Farben in es Namensgebung Violett, Indigo, Blau, Grün, Gelb, Orange und Rot. Sie können alle diese Farben als VIBGYOR erinnern, in dem jedes Zeichen für einen Farbnamen steht.
Nun, ich werde mich nicht in die ganze Geschichte zu ziehen, was ein Regenbogen ist, aber wenn Sie mehr darüber wissen wollen, lesen Sie diese Wiki.
Kommen wir zurück zum Thema finden Sie in der Demo von dem, was wir schaffen wollen. Jetzt wissen wir, die Farben, die wir zu spielen haben, lässt Programmieren beginnen.
Sagen wir unseren Text in einem haben
Tag, genau wie unten:
Ermöglicht getrennte alle Zeichen in unserem Text mit s und geben unseren Tag eine Klasse:
Beachten Sie, dass ich auch eine eigene Klasse zu jeder Spanne gegeben haben, die alle Zeichen Styling individuell mit Regenbogenfarben helfen.
Nach dem VIBGYOR Konzept, läßt Farben, um es starten hinzufügen.
Das ist es! Unser Regenbogen Text ist fertig.
Machen Sie es effizienter mit lettering.js
In langen und kurzen, mit diesem Plugin, werden Sie den Text nicht mit Span Elementen trennen müssen. Bevor Sie fortfahren, stellen Sie sicher, dass Sie jQuery in Ihrem Projekt verwenden, wie lettering.js ein Plugin jQuery ist.
Nachdem das Skript herunterzuladen, rufen Sie es in Ihrem HTML und unsere rainbow Leitziel wie unten dargestellt:
Nach dieser Implementierung können Sie mit der Überprüfung des Codes feststellen, dass das Skript seiner Arbeit nahtlos getan getan hat.
In Aktion sehen sich in der Demo.