Eine „Geheime Nachricht“ mit CSS-Positionierung und Transparenz erstellen

Leser Brian hinterließ kürzlich einen Kommentar mit einer Idee, die ich wirklich cool fand.

Ich dachte, es wäre vielleicht nett, ein schwebendes Div mit den zufälligen Buchstaben einer halben geheimen Nachricht zu haben, wobei die andere Hälfte der Buchstaben in einem Hintergrundbild oder so etwas wäre, sodass man bis zum genau richtigen Punkt scrollen müsste, um die vollständige Nachricht freizulegen.

Hier ist, wie ich dabei vorgegangen bin. Diese Technik verwendet nur einfache transparente Bilder und CSS-Positionierung.

Fotoshoppen Sie Ihre endgültige Nachricht zusammen.
Ich habe eine kleine "Scroll Down"-Nachricht hinzugefügt, damit die Leute wissen, was sie in meinem Beispiel tun sollen.

Teilen Sie die Buchstaben auf, die auf dem Bildschirm "fest" sein werden.
Ich habe eine einfache Ebenenmaske verwendet, um die Hälfte der Buchstaben abzudecken. Denken Sie daran, die weiße Hintergrundebene auszuschalten und dann als GIF oder PNG zu exportieren, um die Transparenz zu erhalten.

So sah die Ebenenmaske für meine aus.

Exportieren Sie die anderen Buchstaben.
Nun sollten Sie einfach Ihre Ebenenmaske umkehren können (sie auswählen und in Photoshop Command-I drücken) und die gegenüberliegenden Buchstaben getrennt erhalten. Schalten Sie wieder die Hintergrundebene aus und exportieren Sie als GIF oder PNG.

Erstellen Sie die DIVs in Ihrem HTML.
Es gibt wahrscheinlich ein paar verschiedene Möglichkeiten, dies zu tun, dies ist nur, wie ich zuerst darauf gekommen bin. Sie könnten wahrscheinlich einzelnen img-Elementen eindeutige IDs geben und dasselbe erreichen.

<div id="fixed-letters">
</div>

<div id="scroll-letters">
</div>

Die festen Buchstaben erhalten eine feste Positionierung, und die Buchstaben, die scrollen, erhalten eine relative Positionierung.
Hier ist das CSS

#fixed-letters {
	position: fixed;
	top: 200px;
	left: 100px;
	background: url(images/fixed-letters.gif) white no-repeat;
	width: 500px;
	height: 125px;
}

#scroll-letters {
	position: relative;
	top: 1200px;
	left: 100px;
	background: url(images/scroll-letters.gif) top center no-repeat;
	width: 500px;
	height: 825px;
}

Das macht es.

[LIVE-BEISPIEL]

[BEISPIEL HERUNTERLADEN]
(Photoshop-Datei enthalten)