1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Mur d'image en arc de cercle 3d

Mur d'image en arc de cercle 3d

Soyez le premier à donner votre avis sur cette source.

Vue 7 662 fois - Téléchargée 2 571 fois

Télécharger le projet
Commenter

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 

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;*/
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler

Bonne source c'est classe
Signaler
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
19 février 2021
 119
merci
Signaler

dans le fond c'est une bonne source je le reconnais , et sur ce cas la il y a pas de sources similaires qui soient performant.Donc oui c'est pas mal .Bravo !
Signaler
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
19 février 2021
 119
si tu pouvait développer tes propos se serait bien parce qu' a chaque fois mettre trois quatre mots une mauvaise note et basta c'est pas très constructif
Signaler

pas d'algorithmes en soit...
Afficher les 16 commentaires
S'inscrire maintenant

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.

Du même auteur (@karamel)