3D Picture Carousel
Bilder Karussell mit Manuelen vor und zurück Buttons
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D Picture Carousel JavaScript CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin:0; padding: 0;}
section, footer, nav {
display: block;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
padding: 0px;
overflow: hidden;
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%);
background-attachment: fixed;
}
/*Ändere hier die Höhe und Breite des Bildes das muss auch in Javascript angepasst werden panelSize*/
.container {
position: relative;
margin: 0 auto;
width: 13vw;
height: 13vw;
perspective: 1000px;
perspective-origin: 100px -100px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateY(0deg);
}
#carousel figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
outline: 1px solid black;
color: white;
text-align: center;
}
.center{text-align: center;
margin: 20px auto 50px;
}
figure img{cursor: pointer;}
iframe{ width: 700px; height: 8em; margin: auto; text-align: center; display: block; border:none;}
</style>
</head>
<body>
<form>
<p class="center">
<input type=button onClick="history.go(-1)" value="vorige Seite"> <input type="button" value=" prev" onClick="zurueck()">
<input type="button" value="next" onClick="weiter()" >
</p>
</form>
<div class="container">
<div id="carousel">
<!--nicht vergessen TweenMax von greensock wird benutzt-->
<script type="text/javascript" src="https://www.on-design.de/Scripts/TweenMax.min.js"></script>
<script language="javascript">
var tz;
//der folgende Wert ist die viewportBreite wenn er geändert wird, muss er auch im CSS bei .container geändert werden. 13vw ist Prozent entspricht der Muliplikation mit 0.13
var panelSize = document.documentElement.clientWidth*0.13;
var numberOfPanels = 12; //gebe hier die Anzahl der Bilder ein.
var degree = 360/numberOfPanels;
var count=0;
tz = Math.round( ( panelSize / 2 ) /
Math.tan( Math.PI / numberOfPanels ) );
for(i=0; i<numberOfPanels;i++){
/*
das folgende Script erzeugt folgendes HTML mit Durchnummerierung hier die url zu den Bildern ändern
<figure class="bild"><img src="img/paint/1.jpg" width="200" alt="Painting by Michael Albers" onClick="goBild(0)"/> </figure> */
document.write("<figure class='bild'><img src='https://basti1012.bplaced.net/image/"+(i+1)+".png' width='"+panelSize+"' alt='Painting by Michael Albers' onClick='goBild("+(i)+")'/></figure>");
/* document.getElementsByClassName("bild")[i].style.background = "hsla("+ (i*degree)+", 100%, 50%, 0.8 )"; */
document.getElementsByClassName("bild")[i].style.transform = "rotateY("+(i*degree)+"deg) translateZ("+tz+"px)";
document.getElementsByClassName("bild")[i].firstChild.nodeValue = (i+1);
}
function weiter(){
count++;
var counter = Math.round(-count*degree);
TweenMax.to("#carousel", 1, {rotationY:counter});
}
function zurueck(){
count--;
var counter = Math.round(-count*degree);
TweenMax.to("#carousel", 1, {rotationY:counter});
}
function drehen(){
TweenMax.to("figure", 1,{rotationY:180});
TweenMax.to("#carousel", 1,{rotationX:90});
}
function goBild(seite){
count = seite;
var counter = Math.round(-count*degree)
TweenMax.to("#carousel", 1, {rotationY:counter});
}
</script>
</div>
</div>
</body>
</html>