Mur d'image en arc de cercle 3d
Description
C'est un mur d'image en 3d avec une forme circulaire pour ce faire j'utilise le css 3d couplé au javascript afin d'automatiser la creation du mur
J'ai essayé d'automatiser au maximum la création du mur. il suffit juste de declarer un array contenant le nom des images, l'angle maximum de rotations, le nombre d'images en largeur et en hauteur,l'espacement entre chaque image,la taille des bords...etc pour la suite le javascript s'en occupe en se chargeant de positionner et dimensioner le tout en fonction de la taille de la fenetre du navigateur.
testé avec ff ie chrome et chrome pour android
page teste
utilisation
inserer le fichier js dans la page puis inserer la fonction d'initialisation
le html
la largeur du conteneur est definis dans une feuille de style css
exemple avec une largeur de 80%:
J'ai essayé d'automatiser au maximum la création du mur. il suffit juste de declarer un array contenant le nom des images, l'angle maximum de rotations, le nombre d'images en largeur et en hauteur,l'espacement entre chaque image,la taille des bords...etc pour la suite le javascript s'en occupe en se chargeant de positionner et dimensioner le tout en fonction de la taille de la fenetre du navigateur.
testé avec ff ie chrome et chrome pour android
page teste
utilisation
inserer le fichier js dans la page puis inserer la fonction d'initialisation
function mur_instance(){
var ob=Object.create(k_mur);
ob.nombre=10; //nombre d'images en largeur
ob.nb_hauteur=7; // nombre d'images en hauteur
ob.angle_max=Math.PI/4; // angle du mur
ob.marge=5; // espace entre chaques images
ob.bord=10; // bord gauche droit haut bas
ob.affichage_image=false, // true ou false au clic sur l'image elle est affiché en grand au centre de l'écran
ob.ctn=document.getElementById("ctn"); // id du conteneur du mur
ob.chemin="images/"; // repertoire contenant les images
ob.diaporama=true; // true ou false mise en marche du diaporama pour chaques images
// tableau contenant le nom des images
ob.tbmage=['aerien.jpg','wall.jpg','karen.jpg','halo.jpg','tortue.jpg','optimus.jpg','star.jpg','chloe.jpg','war.jpg','cap.jpg','cow.jpg','cow2.jpg','main.jpg','croods.jpg','justicier.jpg','planete.jpg','pont.jpg','rob.jpg','hobbit.jpg','america.jpg','elsa.jpg','toy.jpg','ping.jpg','plane.jpg','spider.jpg','sucker.jpg','king_kong.jpg','ville.jpg','harry.jpg','coraline.jpg','qui.jpg','singe.jpg','lost.jpg','cap.jpg','fille.jpg','avion.jpg','chopra.jpg','emma.jpg','russell.jpg','avatar.jpg','moche.jpg','ours.jpg','iron.jpg','hulk.jpg','pirates.jpg','ice.jpg','miserables.jpg','inception.jpg','batman.jpg','gwen.jpg','kate.jpg','madagascar.jpg','scream.jpg','cat.jpg','sucker.jpg','cars.jpg','requin.jpg','iron2.jpg','boulettes.jpg','pig.jpg','melon.jpg','samu.jpg','punch.jpg','anony.jpg','arnold.jpg','perse.jpg','clint.jpg','thor.jpg','oz.jpg','tron.jpg','fast.jpg','trek.jpg','cat2.jpg','totoro.jpg','ralph.jpg','matrix.jpg','evil.jpg']
ob.init_image();
}
//sert a lancer la creation du diaporama au chargement de la page (imperatif)
window.addEventListener('load',mur_instance, false);
le html
<div class="container" id='ctn'></div>
la largeur du conteneur est definis dans une feuille de style css
exemple avec une largeur de 80%:
body{
background-color:#333;
}
.container{
width: 80%;
margin:auto;
margin-top:20px;
background-color:black;
box-shadow: 0px 0px 15px #888888;
/* perspective : 1000px;*/
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.