Ich habe kürzlich bei Woorkup ein ordentliches Tutorial gefunden, das auf eine MooTools-Funktion verweist, mit der Sie jedes Element auf einer Webseite in ein positionierbares Element umwandeln können.
Heute verwenden wir diese Technik, um eine einfache und unterhaltsame Notiz zu erstellen, mit der ein Benutzer überall auf der Seite spielen und sich bewegen kann. Auf dem Weg werden Sie viel CSS3 verwenden, stellen Sie also sicher, dass Sie einen anständigen Browser haben!
Vorgeschmack
Um zu sehen, was wir bauen, klicken Sie auf das Bild und sehen Sie sich die Live-Demo an.
Schritt 1: Das HTML
Wir fangen mit dem Erstellen unserer Haftnotiz an, so wie wir es auf jeder Website tun würden, und enden damit, sie beweglich zu machen. Der HTML-Code für dieses Tutorial ist sehr einfach und enthält nur ein paar divs und Elemente.
Ich habe den Platzhaltertext hier einfach gehalten, damit Sie leicht sehen können, wie einfach der Code ist. Sie können jedoch alles eingeben, was Sie möchten!
Schritt 2: Erstellen Sie den Hintergrund
Um den Hintergrund zu erstellen, benötigen Sie eine schöne Textur aus Kork-Anschlagbrett. Ich habe eine schnelle Google-Suche durchgeführt und diese gefunden.
Sie müssen einen kleinen Abschnitt ausschneiden und ihn in einen nahtlosen Hintergrund umwandeln. Dies kann leicht in weniger als zwei Minuten durchgeführt werden, indem Sie meinem Tutorial zum Erstellen nahtloser Hintergründe folgen.
Schritt 3: Hintergrund-CSS
Sobald Sie Ihr nahtloses Kork-Hintergrundbild erstellt haben, starten Sie Ihr CSS mit einem grundlegenden Reset und legen Sie es in der JPG-Datei ab.
Ich habe den Container hier auch nur ein wenig gestaltet, indem ich eine Breite von 960 Pixeln und einen oberen Rand von 100 Pixeln einstellt. Das Auto-Snippet zentriert das Div automatisch.
Schritt 4: Grundlegende Sticky Styles
Als Nächstes geben wir unserem Sticky etwas wirklich grundlegendes Styling.
Hier haben wir im Wesentlichen nur einen gelben Hintergrund und eine Breite festgelegt. Dieser Hintergrund wird als Standard für Browser verwendet, die das als nächstes hinzuzufügende CSS3 nicht interpretieren.
An diesem Punkt sollte Ihr Sticky gerade erst Gestalt annehmen und so aussehen wie das Bild unten.
Schritt 5: Erweiterte Sticky Styles
Damit unsere Haftnotiz viel besser aussieht, fügen wir einen Verlauf, einen Box-Schatten und etwas Polsterung hinzu.
Beachten Sie, dass wir die Farbverläufe und Schatten mit der Webkit- und Mozilla-Syntax angewendet haben, damit sie mit so vielen Browsern wie möglich funktioniert. Für die Farbverläufe haben wir zwei Farben festgelegt und den Farbverlauf im Wesentlichen so angegeben, dass er sich vertikal über das gesamte Element ausbreitet. Beachten Sie, dass die Reihenfolge der Farbwerte in der Mozilla-Version umgekehrt werden muss, um denselben Verlauf zu erzeugen.
Für den Schatten haben wir ihn nach dem Auffüllen mit den folgenden Werten angewendet: 0px horizontaler Versatz, 10px vertikaler Versatz, 30px Unschärfe und Schwarz für die Farbe.
Sie sollten jetzt eine anständig aussehende Haftnotiz mit Schatten und Farbverlauf haben!
Schritt 6: Verwenden von @ Font-Face für eine handschriftliche Schrift
Ich will das? H1? Text sieht etwas mehr handgeschrieben aus, aber ich möchte kein Bild verwenden, also gehe ich zu FontSquirrel und lade eines der hervorragenden @ font-face-Kits herunter. Mit diesen Kits wird die gesamte Arbeit für Sie erledigt. Sie müssen nur die Schriftarten herunterladen, in Ihr Stammverzeichnis kopieren und das bereitgestellte CSS-Snippet verwenden.
Ich habe das GoodDog-Kit gewählt. GoodDog ist eine schöne, dicke handschriftliche Schrift.
Wie bereits erwähnt, kopieren Sie die Fontdateien zusammen mit dem folgenden von FontSquirrel bereitgestellten CSS mit Ihrem Download:
Um mehr über die Syntax zu erfahren, lesen Sie die bulletproof @ font-face-Syntax von Paul Irish. Alles, was wir jetzt wissen müssen, ist, dass die erste Zeile an anderer Stelle in unserem CSS auf die Schriftart verweist. Überall dort, wo wir diese Schriftart verwenden möchten, geben wir 'GoodDogRegular' ein.
Schritt 7: Kopf- und Absatzstile
Zum Abschluss unserer Haftnotiz fügen Sie das folgende CSS hinzu:
Wie Sie sehen, haben wir die GoodDog-Schriftart auf die Tags h1 und p angewendet und einige grundlegende Positionierungsstile abgeschlossen. Nach dem Aktualisieren der Platzhalterkopie auf etwas Nützlicheres ist hier der fertige Haftnotiz:
Schritt 8: Machen Sie es? Moove?
Jetzt ist der einzige Schritt das Hinzufügen von JavaScript, das den Artikel beweglich macht. Importieren Sie zunächst eine Kopie von MooTools 1.11 in den Header-Bereich Ihres HTML-Codes. Der Grund, warum wir 1.11 verwenden, ist, dass der Abschnitt, den wir verwenden, es nicht in MooTools 2 geschafft hat.
Nachdem Sie das importiert haben, fügen Sie Ihrem HTML-Code das folgende JavaScript hinzu, um die Notiz zu verschieben:
Die zweite Zeile hier ist die wichtige.Es weist MooTools an, alle Div innerhalb des Containers beweglich zu machen. Sie können diesen Abschnitt an Ihre Wünsche anpassen. Zum Beispiel, wenn Sie einen? P? Tag innerhalb eines Div mit einer ID von? greatBigBox? Um beweglich zu sein, ändern Sie einfach den Code in:
Hier hast du es! Das ist buchstäblich alles, was Sie wissen müssen, um Elemente auf Ihrer Website in Bewegung zu setzen.
Fazit
Wie Sie sehen können, war das Erstellen der Haftnotiz wirklich der schwierigste Teil des Prozesses. MooTools kümmerte sich um das schwere Heben, um das Element beweglich zu machen, und reduzierte unsere JavaScript-Arbeit auf wenige Zeilen!