Hier ist die Seite, an der ich gerade arbeite: Ссылка
Wenn Sie auf die Pfeile auf jeder Seite des Sechsecks in der Mitte klicken, können Sie sehen, dass es mit jQuery + jQuery Cycle + jQuery Easing nach links und rechts übergeht. Sie können aber auch sehen, dass es ziemlich hässlich ist - weil ich Sechsecke und keine Quadrate verwende und divs quadratisch sind, überlappt sich das Inhaltshexagon auf unangenehme Weise mit dem Hintergrund.
Also, meine Frage ist: Wie würde ich im Wesentlichen ein div in ein Sechseck hacken? Dieses Sechseck sollte die gleiche Größe / Form des Inhalts div haben, und wenn Inhalt außerhalb des Bereichs des Sechsecks ist, sollte es unsichtbar sein.
Bearbeiten:
HTML
%Vor%CSS
%Vor%UPDATE: Wenn Sie die Site jetzt überprüfen, sehen Sie meinen fehlgeschlagenen Versuch, die "window" -Methode zu verwenden, und Sie können sehen, warum der z-Index nicht funktioniert hat.
Sie können ein div nicht zu einem Sechseck machen, aber Sie könnten PNG-Dateien mit Alpha-Folien verwenden, um den gewünschten Bereich zu maskieren. Sie müssten also vier Divs erstellen, die jeweils einen Hintergrund mit einer PNG-Datei mit der Transparenz haben, die als Maske fungiert. Diese divs würden mit dem Schieberegler absolut über deinem div positioniert werden.
EDIT: Wie unten erwähnt, könnte dies auch mit einer einzigen großen PNG-Datei geschehen, die als Maske fungiert.
BEARBEITEN SIE # 2: Betrachten Sie den Code, den Sie gepostet haben, würde ich es so überarbeiten:
%Vor% Beachten Sie, dass ich das Element <div id="content"> geschlossen habe. Dieses Element sollte ein Nebenprodukt Ihrer Folien sein, aber über den Folien mit einem höheren Z-Index positioniert sein. Oder Sie müssen möglicherweise ein neues Element für die Anzeige der Maske erstellen, wenn Ihr div "Inhalt" nicht nur für die Anzeige der Maske verwendet wird.
Wenn ich mich entwickeln würde, würde ich diesen zweischichtigen Link von dir in eine Baumschicht machen ...
ex:
1. Ebene mit dem vorhandenen Hintergrund
2. Ebene mit dem grauen Sechseck
3. Ebene mit den umgebenden Wörtern und dem umgebenden Hintergrund
Wenn Sie also auf den linken und rechten Pfeil klicken, gleitet das graue Sechseck in der Mitte der 1. und 3. Ebene und verhindert so die Hässlichkeit, die Sie erwähnt haben:)
Ich hoffe, es hilft!
Eric Meyers curvelicious Konzept und Demo könnte Sie in die richtige Richtung weisen. Es ist ein komplizierter Hack aus den "frühen Tagen von CSS", aber es ist eine mächtige Technik.