Mur d'image en arc de cercle 3d
Soyez le premier à donner votre avis sur cette source.
Vue 7 078 fois - Téléchargée 2 410 fois
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;*/
Codes Sources
A voir également
- Mur en 3d
- Cercle 3d - Meilleures réponses
- Mure 3d - Meilleures réponses
- Java script mur d'image en arc de cercle 3d ✓ - Forum - Javascript / DHTML
- Tracer un arc de cercle sans centre - Forum - Visual Basic 6
- Visual Basic / VB.NET : Arc de cercle & ellipse - CodeS SourceS - Guide
- Remplir un arc de cercle - Codes sources - Visual Basic / VB.NET (Graphique)
- C# / .NET : Geométrie - arc de cercle - gdi+ - CodeS SourceS - Guide
Commentaires
- Messages postés
- 1750
- Date d'inscription
- vendredi 9 mai 2008
- Statut
- Modérateur
- Dernière intervention
- 17 mars 2020
62- Messages postés
- 1750
- Date d'inscription
- vendredi 9 mai 2008
- Statut
- Modérateur
- Dernière intervention
- 17 mars 2020
62 > thomas_94Vous 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.