logo

SYTEME DE DESIGN

Animations 3d :
mouvement au passage de la souris

fiche d'identité

Bouger la souris pour voir la photo en 3d

Plat Endives aux jambon 3d

Bouger la souris pour voir la photo en 3d

HTML

copy
<figure><img id="fiche_3d" onMouseMove="fiche3d('open');" onMouseOut="fiche3d('close');" src="html/img/animation/photo_barbe6.jpg" alt="fiche d'identité"></figure>
			<div class="mouse mouse1"><i class="fas fa-mouse fa-2x"></i><p>Bouger la souris pour voir la photo en 3d</p></div>
			<figure><img id="plat_3d" onMouseMove="plat3d('open');" onMouseOut="plat3d('close');" src="html/img/animation/plat4.png" alt="Plat Endives aux jambon 3d">
			<div class="mouse mouse2"><i class="fas fa-mouse fa-2x"></i><p>Bouger la souris pour voir la photo en 3d</p></div>
			</figure>
		</div>

JAVASCRIPT

copy
function findPos(el) {
	var x = y = w = h = 0;
	if(el.offsetParent) {
		x = el.offsetLeft;
		y = el.offsetTop;
		w = el.offsetWidth;
		h = el.offsetHeight;
	}
	return {'x':x, 'y':y, 'w':w, 'h':h};
}


function fiche3d(act) {
	var fiche = document.getElementById("fiche_3d");
	var pos = findPos(fiche);	
	var x = pos.x; var y = pos.y; var w = pos.w; var h = pos.h; /*-- position et taille de lélément div --*/
	
	var e = event;
	var mx = e.clientX - (w / 100 * 20); var my = e.clientY; /*-- position de la sourie : attention elever la marge ici 20 % de figure --*/
	
	var g = w / 11; /*-- proportion de changement de la photo : Divition de la largeur par le nombre de photos --*/
	
	
	if (act == 'open') {
		
	if (mx > x && mx < x + (g * 1)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 11 + ".jpg");
	}
	if (mx > x + (g * 1) && mx < x + (g * 2)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 10 + ".jpg");
	}
	if (mx > x + (g * 2) && mx < x + (g * 3)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 9 + ".jpg");
	}
	if (mx > x + (g * 3) && mx < x + (g * 4)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 8 + ".jpg");
	}
	if (mx > x + (g * 4) && mx < x + (g * 5)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 7 + ".jpg");
	}
	if (mx > x + (g * 5) && mx < x + (g * 6)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 6 + ".jpg");
	}
	if (mx > x + (g * 6) && mx < x + (g * 7)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 5 + ".jpg");
	}
	if (mx > x + (g * 7) && mx < x + (g * 8)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 4 + ".jpg");
	}
	if (mx > x + (g * 8) && mx < x + (g * 9)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 3 + ".jpg");
	}
	if (mx > x + (g * 9) && mx < x + (g * 10)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 2 + ".jpg");
	}
	if (mx > x + (g * 10) && mx < x + (g * 11)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 1 + ".jpg");
	}
		
	}
	
	if (act == 'close') {
		
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 6 + ".jpg");
		
	}

}

function plat3d(act) {
	var fiche = document.getElementById("plat_3d");
	var pos = findPos(fiche);	
	var x = pos.x; var y = pos.y; var w = pos.w; var h = pos.h; /*-- position et taille de lélément div --*/
	
	var e = event;
	var mx = e.clientX - (w / 100 * 20); var my = e.clientY; /*-- position de la sourie : attention elever la marge ici 20 % de figure --*/
	
	var g = w / 7; /*-- proportion de changement de la photo : Divition de la largeur par le nombre de photos --*/
	
	
	if (act == 'open') {
		
	if (mx > x && mx < x + (g * 1)) {
	fiche.setAttribute("src", "html/img/animation/plat1.png");
	}
	if (mx > x + (g * 1) && mx < x + (g * 2)) {
	fiche.setAttribute("src", "html/img/animation/plat2.png");
	}
	if (mx > x + (g * 2) && mx < x + (g * 3)) {
	fiche.setAttribute("src", "html/img/animation/plat3.png");
	}
	if (mx > x + (g * 3) && mx < x + (g * 4)) {
	fiche.setAttribute("src", "html/img/animation/plat4.png");
	}
	if (mx > x + (g * 4) && mx < x + (g * 5)) {
	fiche.setAttribute("src", "html/img/animation/plat5.png");
	}
	if (mx > x + (g * 5) && mx < x + (g * 6)) {
	fiche.setAttribute("src", "html/img/animation/plat6.png");
	}
	if (mx > x + (g * 6) && mx < x + (g * 7)) {
	fiche.setAttribute("src", "html/img/animation/plat7.png");
	}
		
	}
	
	if (act == 'close') {
		
	fiche.setAttribute("src", "html/img/animation/plat4.png");
		
	}

}

pixabay.com

youtube.com

CSS :

codeur.com

graphiste.com

web-eau.net

JS :

codepen.io

 

Compréssion de video en ligne :

videosmaller.com

 

Conseille :

graphiste.com