Grundprinzipien
Diese dynamischen Schiebeboxen basieren auf dem gleichen Grundprinzip. Das DIV-Tag mit „.boxgrid“ fungiert als Fenster, nachdem Sie die anderen beiden Elemente im Objekt übergeben haben, in das Sie „einen Blick“ werfen möchten. Nicht sicher? Lassen Sie sich von diesem Bild einen Hinweis geben:
Nachdem wir dieses Grundprinzip verstanden haben, können wir den Animationseffekt von Schiebeelementen nutzen, um den anzuzeigenden Bereich freizulegen oder abzudecken und so einen Schiebeeffekt zu erzeugen.
Klicken Sie, um eine Vorschau des Effekts anzuzeigen Laden Sie die Quelldateien für dieses Beispiel herunter
Schritt eins – CSS-Grundlagen
Im obigen Inspirationsdiagramm, das die Grundstruktur darstellt, müssen wir ein wenig CSS verwenden, damit es den gewünschten Effekt anzeigt. Das folgende CSS definiert das Anzeigefenster (.boxgrid) und legt die StandardPOSITION des Bildes in LINKS und OBEN fest, was für überlappende Erklärungen beim Schieben sehr wichtig ist. Und vergessen Sie nicht, dass overflow:hidden dies möglich macht.
.boxgrid{
Breite: 325px;
Höhe: 260px;
Rand: 10 Pixel;
float:left;
Hintergrund:#161613;
Rand: durchgehend 2 Pixel #8399AF;
Überlauf: versteckt;
Position: relativ;
}
.boxgrid img{
Position: absolut;
oben: 0;
links: 0;
Rand: 0;
}
Wenn Sie nicht bereit sind, CSS zu verwenden, um eine transparente Beschreibung zu erreichen, können Sie direkt mit dem zweiten Schritt fortfahren:
.boxcaption{
schweben: links;
Position: absolut;
Hintergrund: #000;
Höhe: 100px;
Breite: 100 %;
Deckkraft: .8;
/* Für IE 5-7 */
Filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* Für IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
Jetzt müssen wir den Standardstartpunkt für das Beschriftungsfeld festlegen (ich denke, Ebenen sind besser als Felder). Wenn Sie möchten, dass es bei der Initialisierung vollständig ausgeblendet wird, müssen Sie TOP und LEFT auf die Höhe und Breite Ihres Fensters (.boxgrid) einstellen, die (natürlich) durch die Richtung bestimmt wird, in die Sie gleiten möchten. Sie können auch festlegen, dass bei der Initialisierung nur ein Teil davon angezeigt wird, wie durch diese (CSS-definierte) .caption und .boxcaption angegeben:
.captionfull .boxcaption {
oben: 260;
links: 0;
}
.caption .boxcaption {
oben: 220;
links: 0;
}
Quelle: Happy Favorites