So erstellen Sie einen supereinfachen animierten Hintergrund
Also das Hintergrundkachel mit 404 Seiten ist nur ein animiertes GIF. Sehr alte Skool-Technologie, aber Sie können immer noch viel Spaß mit ihnen haben.
1. Erstellen Sie eine Hintergrundkachel
Mit meinem Hintergrundbild habe ich versucht, ein völlig zufälliges / verrücktes Schachbrett mit wechselnden Bildern zu erstellen. Um zu versuchen, dass es nicht wie ein Bild aussieht, das über den Bildschirm wiederholt wird, musste ich zuerst meine Hintergrundkachel zu einem Quadrat aus neun Bildern in einem machen.
2. Erstellen Sie verschiedene Versionen
Ich habe dann fünf verschiedene Versionen meiner Hintergrundkachel erstellt. jedes mit einer anderen Abbildung in jedem Quadrat. In diesem Fall habe ich fünf Versionen der Hintergrundkachel erstellt, da ich dachte, dass dies ausreichen würde, um den gewünschten Effekt zu erzielen. Sie könnten so viele oder so wenige haben, wie Sie wollten.
3. Animieren Sie in Photoshop
Nachdem ich meine fünf verschiedenen Hintergrundkacheln erstellt hatte, animierte ich sie in Photoshop. Das ist wirklich einfach. Gehen Sie in Photoshop zu: Fenster / Animation, um die Animationspalette zu öffnen.
Für diese Animation verwenden wir Frames. Die Animationspalette sollte also folgendermaßen aussehen:
Wenn beim Öffnen die Timeline-Ansicht angezeigt wird, klicken Sie einfach auf das Symbol 'Frames' in der unteren rechten Ecke der Palette. In diesem Bild sehen Sie, dass ein Zeitliniensymbol angezeigt wird, da wir bereits 'Frames' verwenden:
4. Legen Sie die Anzahl der Frames fest
Jetzt wählen wir nur noch aus, wie viele Frames wir möchten. Ich habe fünf hinzugefügt. Klicken Sie dazu auf das kleine Symbol 'Seitenblatt' unten in der Palette der Animationsrahmen. Anschließend verknüpfen Sie einen Frame mit einer Ebene. Wenn Frame 3 Layer 3 anzeigen soll, klicken Sie auf Frame 3 und stellen Sie sicher, dass Layer 3 in der Ebenenpalette angezeigt wird.
5. Stellen Sie die Bildgeschwindigkeit ein
Jetzt müssen Sie nur noch die Bildgeschwindigkeit und die Animation so einstellen, dass sie für immer wiederholt wird. In diesem Fall habe ich jeden Frame so eingestellt, dass er 0,13 Sekunden lang angezeigt wird. Klicken Sie dazu auf die unter jedem Bild angezeigte Zeit.
Um die Schleife für immer einzustellen, klicken Sie einfach auf das Wort 'Einmal' unten links in der Animationspalette und wählen Sie dann entweder 'Einmal' oder 'Für immer'.
Mit animierten GIFs können Sie viel Spaß haben und sie so einfach oder komplex gestalten, wie Sie möchten. Du machst im Grunde einen kleinen Film - was ziemlich cool ist!
6. Das CSS
Ein kurzer abschließender Hinweis zum CSS. Hier gibt es nur wenig zu tun, außer das Hintergrundbild anzuwenden:
body {color: #fff; margin: 0;background: url(img/multi3.gif) repeat;}Außerdem habe ich die Ecken des Containers mit der 404-Nachricht abgerundet und RGBA verwendet, um die Deckkraft des Containers zu verringern, sodass Sie den Hintergrund durch den Container sehen können. Sie können das relevante CSS unten sehen:
.container { background:rgba(255, 255, 255, .9); border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; o-border-radius:5px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 4px 4px #rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); }Jetzt, da das CSS vollständig ist, können Sie Ihre lustige neue 404-Seite genießen.
