CSS Transform und Keyframes mit PHP-Skript als Galerie
Gehe mit der Maus über die rotierende Galerie um diese zu stoppen
Tippe am Smartphone (außer z.Zt. am iPhone) auf die Galerie zum Stoppen und auf den Hintergrund zum Starten
Funktioniert nicht im IE11 oder älteren IE-Versionen
Gefunden bei: the-art-of-web.com - hier als polygone Galerie
NOF-Seite auf die Dateierweiterung .php stellen. Diese Style-Anweisung habe ich hier “Zwischen Head Tags” des Layouts. Die Geschwindigkeit (Dauer der Animation) könnt Ihr einstellen (hier 20 Sekunden für eine 360° Drehung).
<style>
@-webkit-keyframes spinner {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
}
}
#stage {
margin: 1em auto;
-webkit-perspective: 1200px;
cursor: wait;
}
#spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-webkit-transform-style: preserve-3d;
}
#spinner:hover {
-webkit-animation-play-state: paused;
}
#spinner img {
position: absolute;
border: 1px solid #ccc;
background: rgba(255,255,255,0.8);
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
</style>
Diese DIVs mit den Fotos, die alle den gleichen Namen haben müssen (hier “segel*.jpg”), und das PHP-Skript in den HTML-Code Editor eines Textfeldes.
Da im PHP-Skript eine Schleife alle Fotos, die hier "segel" heißen und eine Nummer tragen abgefragt werden, können also weitere Fotos in der Animation dargestellt werden (hier sind es 5). Natürlich müsstet Ihr dann die Grad-Zahl neu errechnen, hier sind es 72° je Foto (5 x 72 = 360°).
<div id="stage" style="padding-left: 180px; height: 160px;">
<div id="spinner" style="-webkit-transform-origin: 180px 0 0;">
<img style="-webkit-transform: rotateY(0deg) translateX(180px); padding: 0 0 0 120px;" src="images/segel1.jpg" width="240" height="160" alt="">
<img style="-webkit-transform: rotateY(-72deg) translateX(180px); padding: 0 0 0 120px;" src="images/segel2.jpg" width="240" height="160" alt="">
<img style="-webkit-transform: rotateY(-144deg) translateX(180px); padding: 0 0 0 120px;" src="images/segel3.jpg" width="240" height="160" alt="">
<img style="-webkit-transform: rotateY(-216deg) translateX(180px); padding: 0 0 0 120px;" src="images/segel4.jpg" width="240" height="160" alt="">
<img style="-webkit-transform: rotateY(-288deg) translateX(180px); padding: 0 0 0 120px;" src="images/segel5.jpg" width="240" height="160" alt="">
</div>
</div>
<?PHP
// Original PHP code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
$size = array();
$rotation = $maxw = $maxh = 0;
// identify images to display
$dirlist = glob("segel*.jpg");
$num = count($dirlist);
// calculate the largest image dimensions
for($i=0; $i < $num; $i++) {
$img = $dirlist[$i];
$size[$i] = getimagesize($img);
if($size[$i][0] > $maxw) $maxw = $size[$i][0];
if($size[$i][1] > $maxh) $maxh = $size[$i][1];
}
// display the carousel html
echo "<div id=\"stage\" style=\"padding-left: ",($maxw*3/4),"px; height: {$maxh}px;\">\n";
echo "<div id=\"spinner\" style=\"-webkit-transform-origin: ",($maxw*3/4),"px 0 0;\">\n";
for($i=0; $i < $num; $i++) {
$img = $dirlist[$i];
$padleft = ($maxw - $size[$i][0]);
$padh = ($maxh - $size[$i][1]) / 2;
echo "<img style=\"-webkit-transform: rotateY(-",round($rotation,1),"deg) translateX(",($maxw*3/4),"px); padding: {$padh}px 0 {$padh}px ",($padleft + $maxw/2),"px;\" src=\"$img\" {$size[$i][3]} alt=\"\">\n";
$rotation += 360 / $num;
}
echo "</div>\n";
echo "</div>\n\n";
?>
