Forum d'entraide


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum d'entraide

Aides, Conseils, Forum, Sites web, blogs, tout supports, Graphismes, Tutoriels, Publicités.


AccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

Diaporama en css 3d

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 6871
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10497
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Diaporama en css 3d Ven 8 Déc 2017 - 20:19

Coucou

Voici comment réaliser un diapo en css 3d

[Vous devez être inscrit et connecté pour voir ce lien]

Code:
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>diap css 3D</title>

<style type="text/css">

body{
 background-color:#b2bdc6;
}

.container {
 width: 750px;
 height: 430px;
 position: relative;
 margin:0 auto 10px;
 margin-top:25px;
 -webkit-perspective: 1200px;
 -moz-perspective: 1200px;
}
.sous_container{
 width:100%;
 height:100%;
 position:absolute;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
}

.faceA, .faceB{
 display:block;
 width:100%;
 height:100%;
 position:absolute;
 border:1px solid #CCC;
 border-radius :20px;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -moz-border-radius :20px;
 -moz-box-shadow: 10px 10px 10px #232711;
 -webkit-box-shadow: 10px 10px 10px #232711;
 box-shadow: 10px 10px 10px #232711;
}

.faceB{

 -webkit-transform:rotateX(180deg);
 -moz-transform:rotateX(180deg);
}

.bouton{
 margin-left:auto;
 margin-right:auto;
 width:100px;
 cursor:pointer;
}

.bouton img:hover{
 cursor:pointer;
 opacity:0.9;
}

.clic{
 margin:auto;
 margin-top:0px;
 width:40%;
 height:80px;
 overflow:hidden;
 border-top:solid 10px #9CAAB0;
 border-bottom:solid 10px #9CAAB0;
}

.cloc img{
 border:none;
 width:8em;
}

.cloc{
 cursor:pointer;
 border-spacing:0px;
}

.cloc td:hover{
 opacity:0.8;
}

</style>
<script type="text/javascript">

tbgema= new Array('5.jpg','32.jpg','33.jpg','34.jpg','71.jpg','78.jpg','83.jpg','89.jpg','92.jpg')

var kdi3={
controle:0,
face:0,
vaval:0,
suite:0,
elem:'null',
elem2:'null',
oxo:0,
setY:0,
vitesse:1, //vitesse de rotation du diapo en seconde
reperto:'images/', //repertoire pour les images

azerty:function(sens){ //gestion du mouvement de rotation du diapo

 if(this.controle==0){

 this.face==0 ? this.face=1 : this.face=0;

 if(sens=='plus'){
 this.suite+=1;
 if(this.suite==tbgema.length){
 this.suite=0;
 }
 this.vaval-=180;
 }
 else{
 this.suite-=1;
 if(this.suite==-1){
 this.suite=tbgema.length-1;
 }
 this.vaval+=180;
 }
 
 this.elem.getElementsByTagName('div')[this.face].style.cssText='background-image:url('+kdi3.reperto+tbgema[this.suite]+')';
 this.elem.style.WebkitTransform='rotateX('+this.vaval+'deg)';
 this.elem.style.MozTransform='rotateX('+this.vaval+'deg)';

 this.controle=1;
 setTimeout(function(){kdi3.controle=0},kdi3.vitesse*1000);

 }
 },

fonfon:function(ch){ //gestion du sens de rotation du diapo

 if(this.controle==0){
 if(ch > this.suite){
 this.suite=ch-1;
 var sens='plus';
 }
 else{
 this.suite=ch+1;
 var sens='moins';
 }
 this.azerty(sens);
 }
 },

sensa:function(e){ //le defilement des miniatures

 var ixe=kdi3.setX;
 var clic=kdi3.elem2;

 if(arguments[0]=='depart'){
 document.addEventListener("mousemove", kdi3.posi, false);
 clic.setAttribute('onmouseover','');
 kdi3.oxo=setInterval(kdi3.sensa,50);
 return false;
 }

 if((ixe > clic.offsetLeft && ixe < (clic.offsetLeft+clic.offsetWidth)) && (kdi3.setY > clic.offsetTop && kdi3.setY
< (clic.offsetTop+clic.offsetHeight))){

 var oml=(clic.offsetLeft+(clic.offsetWidth/2))-ixe;
 if(oml>50 || oml<-50){
 clic.scrollLeft=clic.scrollLeft-(oml/14);
 }
 }
 else{
 kdi3.anul();
 }
 },

anul:function(){ //gestion des evenements pour le defilement des miniatures

 clearInterval(kdi3.oxo);
 document.removeEventListener("mousemove", kdi3.posi, false);
 kdi3.elem2.setAttribute('onmouseover','kdi3.sensa("depart",event)');
 },

posi:function(s){ //position de la souris pour le defilement des miniatures et les limites de defilement

 var dde=(navigator.vendor) ? document.body : document.documentElement;
 s =(!s) ? window.event : s;
 kdi3.setX =s.clientX + dde.scrollLeft;
 kdi3.setY =s.clientY + dde.scrollTop;
 },

init:function(s){ // creation dynamique des elements composant l'ensemble du diapo
 
 var contenant=document.createElement('div');
 contenant.setAttribute('class','container');
 var elem=document.createElement('div');
 var elem2=document.createElement('div');
 var elem3=document.createElement('div');
 elem.setAttribute('class','sous_container');
 elem.style.cssText= navigator.vendor ? '-webkit-transition: -webkit-transform '+kdi3.vitesse+'s' : '-moz-transition: -moz-transform '
+kdi3.vitesse+'s';
 elem2.setAttribute('class','faceA');
 elem3.setAttribute('class','faceB');
 elem2.style.cssText='background:url('+kdi3.reperto+'5.jpg)';
 elem3.style.cssText='background:url('+kdi3.reperto+'32.jpg)';
 elem.appendChild(elem2);
 elem.appendChild(elem3);
 kdi3.elem=contenant.appendChild(elem);
 document.body.appendChild(contenant);
 
 var contenant=document.createElement('div');
 contenant.setAttribute('class','bouton');
 var elem=document.createElement('img');
 var elem2=document.createElement('img');
 elem.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAwCAYAAABuZUjcAAAABGdBTUEAALGPC/x
hBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuN6eEncwAAA
LvSURBVGhD7VmxrcIwEGUDRvgjMAAFJSUFA2QBJFo6GvrPAEjUVFTUiAEQPQ0d7ZdYIN8vnK3LxcF2cCIsYclCIon97u7d89nu9b
7t64HuPDAcDgeqz1Vfqr5X/cj6lv7P1O9Pd6hqZlIgJqoD1J/qeUC/0XeDzoxQE/bJe5g8BGzduxc1TtaqAeRhK+DxeJzPZrN8s9nku90
uP5/PpuO/9XpdPH9hLKgVNwLkZfC2NDHArlarAmBIO51O+WKxqDNiGcX7lHQIp5kIgOHFx+MRgrfy7v1+Lwy3RAFO6jc2gECXEg/hxo
QxGyI2nU6lAXBWOHgbaHi5rYboWbwfBp44XaLH4XBoC3NpXAv4vTdlaAExoesKtLbAAt6dsCR5BjSkLXbDmNfr9eWwFtWpl0qii
ElGfByzAazWcpeEgvMiYY+1lKEVsfA2JO9dudNGYxwsQFz2XMDxLd4RUjmqgJfejqUgyA84QWq1D3CAF5Speh31gh48hrc5LWzLvC9
wjCO+L1eXXEkQ1qYNtEC0XAWYL3DgEDXOr6EL0cRM5sr4OqNQg1hWQKsRIcBBN+aICwc+0g8wcWhDCeCo/BpzHFgQRRHBZynA
1QTi79t8afEOxzWWLMs4+Ke6cH77Ljg1hZGT29qIEKpY1GWugaOILyZ1DQhavKilWwMuEv5ZAijAXsDxsU2TXQoSgyqNgYcmn8s
YV2RlnjUGjoGS9Lj2wKdxHHu8IrFSU5WlBp6ajie7cva5CiRTq8jVM5nqkIAnW4+DLma/mcwOSFaJMXZBnew5CXjJ68ns8iXXQxYk3
xoe70U/V9FbIl6fA3wSJ1mMMumdHRL4AVcZeD6W0thoFeW0llGmAv7jz8cF+BJtPv5GgoGHTJ
rSl594oZoMrW06uQPih4wK8ET1m21b9urWDfKH/Oj81k2Ah/dRv1sNcO01Lc9Bw3bvOeURL0VgK9XHAzyMxndx7zW971zYiwCh
+pyigXzAkYfuAIkooQKNdpf/D0vkjvdKpHqTAAAAAElFTkSuQmCC';
 elem2.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAw
CAYAAABuZUjcAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29
mdHdhcmUAUGFpbnQuTkVUIHYzLjUuN6eEncwAAALoSURBVGhD7Vk7jsIwEOUGewSOwAEoKCm34
AC5ABItHQ39cgAkaioqasQB0PY0dLRIXCDrF8bRZHBiO3GysYQlK1I+9ps3P89kMPiMDwPdMjAej4dqJmqu1Nype
WLzQPcX6jrqFplhN4AgkDd1TT3mg
7777lQIYvbXA2iVUBAaWvpqTQhiGCZgBDKfz9PNZpNut9v0crnkc7/fZ/fwfDqdlgkBAcJrgFh523S5XKbn8zn1GRBqvV
6XCQF/aM4+FlETixVAY+P7/e6D9+3d5/OZacKgBZhhfScm0AVbns1mmQmEHCAAZiTIgQP7
gzeBBstgqa0B9huDl+YB0F2M4/EowUPjbjYvHbEr0JoYA/iDNVRSyMulRtSoGtfrNUW4Cz2wpjCb6lBJaTr7CI5os2k4
Kt6Fc0GIkAOkMfBwVrPJqAcTLqVL9NDA9XdIQDZhXYXDOiJUrowmw9m2mYjeXAKHANgMdhpiiEjzzrracMjZdlW7Cbhe
J4T5GFhPCqyrzX74hq5sVQHX64G1JuYD82O
kFiOMepBnSB81uwDXju57ptHkQfsiwryclLJk/tCHHVfgXJt1zjiIcAz8RAPPo0mSJK5Wkr3nC7yu+
SAJMuCv6KJuLPRN12hSFVWEWsvO31mecAm52EskpJed8xQPR/IZdRnnwoEsm/mIfU69AK5jfxVpvQVuC8W9BY5sGx
3jTWw82qgSbRxHJR9f5qRYHt9ZhYBHezqM8zxOrJ98zyz/
XgER8DhrTsl6NFU+AR/Jk1tP+irFWtNU7vNjLoSIopOlBVGAD5z5rsA36h2yOjRPSpp5n3rUpyDBu0G6tWXgfcotV+
BB++PMZHCOKZiNZt9WbtmAt/ZHgjuudFieqHz7JeiTtP4PSIBHqMyzq6zm0XKDnaIi781fNyFAwjtfru2IkvdupE23vw
7WDr/DC2pDaGCnJjYv7Z8Ynj3ou/D/NR1wy6YpTpfQxIpAwaT0hHPjPkpE/z9pBjB/TpGO94cdJVMAAAAASUVORK5CYII=';
 elem.setAttribute('onclick','kdi3.azerty("moins")');
 elem2.setAttribute('onclick','kdi3.azerty("plus")');
 contenant.appendChild(elem);
 contenant.appendChild(elem2);
 document.body.appendChild(contenant);
 
 var contenant=document.createElement('div');
 contenant.setAttribute('class','clic');
 var tatable= document.createElement('table');
 tatable.setAttribute('class','cloc');
 var tbrow=tatable.insertRow(-1);

 for(var j=0;j<tbgema.length;j++){
 tbrow.insertCell(j);
 var gema=document.createElement('img');
 gema.src=kdi3.reperto+tbgema[j];
 tbrow.cells[j].setAttribute('onclick','kdi3.fonfon('+j+')');
 tbrow.cells[j].appendChild(gema);
 }
 contenant.appendChild(tatable);
 contenant.setAttribute('onmouseover','kdi3.sensa("depart",event)');
 kdi3.elem2=document.body.appendChild(contenant);
 }

}
onload=kdi3.init //initialisation du diapo

</script>
</head>
<body>

</body>
</html>
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Diaporama en css 3d

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Comboost : un diaporama hébergé en ligne
» [Résolu] Stopper puis rejouer un diaporama
» ZOOMORAMA : un diaporama zoomable plein écran etc ...
» diaporama nouvelle version
» 40 Conseils (Diaporama magnifique)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum d'entraide :: Caverne d'Alibaba du forum :: Créer-