Agrandir photo puis la déplacer en la reduisant

**maxtrident** · 28/09/2023, 18h15

Bonjour
je cherche un tuto ou me dire comment faire pour quand je clic sur ajout panier, agrandi une photo puis le déplace tous en la réduisant dans icône panier.
comme sur le site ici quand tu ajoute au panier sans la pop-up.
https://www.topbiz.fr/70-pc-de-bureau
j'ai fait le début mais après je ne vois pas comment faire

la fonction quand je clic sur le panier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
if (document.getElementById('ajopanier')){
      document.getElementById('ajopanier').addEventListener('click', function(){
   imgpanier();	  
   lookpanier('panier');
});
}
 
function imgpanier() {
var photo_princ = document.getElementById('big_pict') ;
photo_princ.removeAttribute("class");	 
photo_princ.classList.add('zomphoto');
}

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.zomphoto{
	transform:scale(1.5);	 
	transition:all .25s;
	}

une aide, merci

**mathieu** · 28/09/2023, 22h30

une 1re remarque si vous voulez vous baser sur le site que vous citez : l'image en question n'est pas directement déplacée mais c'est une copie de l'image qui se dirige vers le panier.
pour faire cela vous aurez besoin de la méthode suivante qui va créer une nouvelle balise img :
https://developer.mozilla.org/fr/doc.../createElement

ensuite je ne connais pas assez les transitions en css pour savoir si ça pourrait vous être utile. donc la 2e méthode serait de faire des animations pas à pas en javascript qui déplaceraient l'image tout en la réduisant.
vous pouvez utiliser la méthode suivante pour déclencher chaque étape :
https://developer.mozilla.org/fr/doc...API/setTimeout

**sylvain257** · 29/09/2023, 10h50

Bonjour,

Je te propose de regarder les fonctionnalités de jQueryUI qui possède le genre d’événement que tu demandes (en particulier le "effect" > "transfer").

Après si c'est pour une boutique en ligne, tu utilises un CMS genre Wordpress ou Joomla ? Il y a peut être un effet à activer dans l'un deux pour avoir ce que tu recherches.

Bonne journée

Sylvain

**maxtrident** · 29/09/2023, 12h46

merci je vais regarder tous ça.
je code à l'ancienne avec noteopat++
si je n'arrive pas avec js, je ferais avec ça
https://api.jqueryui.com/transfer-effect/
mais je cherche quelque chose de léger

**melka one** · 29/09/2023, 16h40

jour

si tu aime le pur js essai ça

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
 
body{
 
   background-color:#91A8D2;
   height:1200px;
}
 
.rectangle1{
 
    height:50px;
        width :100px;
        margin-left:1000px;
        margin-top:80px;
        background:red;
        
}
 
.rectangle2{
 
    height:40px;
        width :60px;
        margin-left:1000px;
        margin-top:60px;
        background:blue;
        
}
 
#cible{
 
    height:60px;
        width :60px;
        left:30px;
        top:400px;
        background:white;
        position:fixed;
        
}
 
</style>
 
 
<script>
 
function preparation(elem,cible){
 
var bd=document.getElementById(elem).getBoundingClientRect();
 
var element=document.getElementById(elem).cloneNode(true);
 
element.style.id="";
element.style.position="absolute";
element.style.marginLeft="0px";
element.style.marginTop="0px";
element.style.left=bd.left+"px";
element.style.top=bd.top+"px";
 
document.body.appendChild(element);
 
var element_cible=document.getElementById(cible);
 
var duree_animation = 500;
 
var nombre_de_cycle = Math.floor(duree_animation/(1000/25));
 
var taille_h_finale=5;
 
var taille_w_finale=5;
 
 
var place=element_cible.getBoundingClientRect()
 
 
 
var distance_l=( element_cible.offsetWidth/2)+place.left-element.offsetLeft-(taille_w_finale/2);
 
var distance_t=( element_cible.offsetHeight/2)+place.top-element.offsetTop-(taille_h_finale/2);
 
var donne={
 
                nombre_de_cycle:Math.floor(duree_animation/(1000/25)),
 
                taille_ho:element.offsetHeight,
 
                distance_lo:element.offsetLeft,
 
                distance_to:element.offsetTop,
 
                compteur:0,
 
                taille_h_par_cycle:(element.offsetHeight-taille_h_finale) / nombre_de_cycle,
 
                taille_w_ratio:element.offsetWidth/element.offsetHeight,
 
                distance_l_par_cycle:distance_l / nombre_de_cycle,
 
                distance_t_par_cycle:distance_t / nombre_de_cycle,
 
                angle:360/nombre_de_cycle,
 
                element:element
 
        }
 
        deplacer(donne)
 
}
 
 
function deplacer(donne){
 
        donne.element.style.left=donne.distance_lo+donne.distance_l_par_cycle*donne.compteur+"px";
 
        donne.element.style.top=donne.distance_to+donne.distance_t_par_cycle*donne.compteur+document.documentElement.scrollTop+"px";
 
        donne.element.style.height=donne.taille_ho-donne.taille_h_par_cycle*donne.compteur+"px";
 
        donne.element.style.width=donne.taille_w_ratio*donne.element.offsetHeight+"px";
 
        donne.element.style.transform='rotate('+donne.angle*donne.compteur+'deg)';
 
        donne.compteur++
        
        if(donne.compteur<=donne.nombre_de_cycle){
 
                setTimeout(deplacer,(1000/25),donne)
        }
        
        else{
        donne.element.remove()
        
        }
}
 
</script>
</head>
<body>
 
<br>
<button onclick='preparation("rectangle1","cible")'>rectangle rouge</button>
<button onclick='preparation("rectangle2","cible")'>rectangle bleu</button>
 
<div id='rectangle1' class='rectangle1'>
</div>
 
<div id='rectangle2' class='rectangle2'>
</div>
 
 
<div id='cible'>
</div>
</body></html>

**NoSmoking** · 29/09/2023, 17h35

Bonjour,
ne pas hésiter à regarder également du côté de l'API Animate alliant JavaScript et CSS.

**maxtrident** · 29/09/2023, 17h59

merci encore pleins de possibilité.
une question la je fait la copie de l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function imgpanier() {
var photo_princ = document.getElementById('big_pict') ;
 
 
let div = document.createElement("div");
div.classList.add("card");
 
 
let img = document.createElement("img");
img.classList.add("zomphoto");
img.alt = "Photo de l'article";
img.src = photo_princ.src;
div.appendChild(img);
div.style.zIndex = 2;
 
document.querySelector("body").appendChild(div);
 
}

mais elle est positionné en bas de page.
Est ce que je dois la bouger avec du css: position absolute mais qui risque de foiré en responsive ou il y a un moyen de la placer sur l'image actuelle
avec du js ?

**NoSmoking** · 29/09/2023, 18h26

une question la je fait la copie de l'image

regarde ce qu'a fait melka one, il a cloné l'image/conteneur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var element=document.getElementById(elem).cloneNode(true);

**maxtrident** · 01/10/2023, 10h26

merci a tous

**maxtrident** · 13/10/2023, 18h23

bonjour
je ne vois pas comment faire une condition avec le script de melka one
je voudrais afficher une rotation en fonction de l'emplacement cliqué.
je devrais ajouter dans var donne if (rota == 1) { rota:1, }EDIT: c'est bon j'ai trouvé...je ne sais pas si c'est la meilleur methode avec Object.assign

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var donne={
 
                nombre_de_cycle:Math.floor(duree_animation/(1000/25)),
 
                taille_ho:element.offsetHeight,
 
                distance_lo:element.offsetLeft,
 
                distance_to:element.offsetTop,
 
                compteur:0,
 
                taille_h_par_cycle:(element.offsetHeight-taille_h_finale) / nombre_de_cycle,
 
                taille_w_ratio:element.offsetWidth/element.offsetHeight,
 
                distance_l_par_cycle:distance_l / nombre_de_cycle,
 
                distance_t_par_cycle:distance_t / nombre_de_cycle,
 
                angle:360/nombre_de_cycle,
 
                element:element
 
        }
 if(rota == 1){
	var donne2={ rota:1 }
 } else { var donne2={ rota:0 }}
const returnedTarget = Object.assign(donne, donne2);
        deplacer(donne)
 
 
}
 
 
function deplacer(donne){
 
        donne.element.style.left=donne.distance_lo+donne.distance_l_par_cycle*donne.compteur+"px";
 
        donne.element.style.top=donne.distance_to+donne.distance_t_par_cycle*donne.compteur+document.documentElement.scrollTop+"px";
 
        donne.element.style.height=donne.taille_ho-donne.taille_h_par_cycle*donne.compteur+"px";
 
        donne.element.style.width=donne.taille_w_ratio*donne.element.offsetHeight+"px";
 if(donne.rota == 1){
        donne.element.style.transform='rotate('+donne.angle*donne.compteur+'deg)';
 }
        donne.compteur++
 
        if(donne.compteur<=donne.nombre_de_cycle){
 
                setTimeout(deplacer,(1000/25),donne)
        }
 
        else{
        donne.element.remove()
 
        }
}

**NoSmoking** · 18/10/2023, 11h56

EDIT: c'est bon j'ai trouvé...je ne sais pas si c'est la meilleur methode avec Object.assign

Là ça sent l'« enlisement » dans le script, tu pourrais très bien le gérer en tant que paramètre, ou encore mettre la propriété angle à zéro, mais peut-être que melka one t'en dira plus.

**melka one** · 20/10/2023, 23h20

le plus simple serais de déclarer la rotation dans la fonction préparation et comme le suggère NoSmoking le gérer en tant que paramètre ce qui donne

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
 
body{
 
   background-color:#91A8D2;
   height:1200px;
}
 
.rectangle1{
 
    
        width :150px;
        margin-left:1000px;
        margin-top:80px;
        background:red;
        
}
 
.rectangle2{
 
    height:40px;
        width :60px;
        margin-left:1000px;
        margin-top:60px;
        background:blue;
        
}
 
#cible{
 
    height:60px;
        width :60px;
        left:30px;
        top:400px;
        background:white;
        position:fixed;
        
}
 
</style>
 
<script>
 
function preparation(elem,cible,nbtour){
 
        var bd=document.getElementById(elem).getBoundingClientRect();
 
        var element=document.getElementById(elem).cloneNode(true);
 
        element.style.id="";
        element.style.position="absolute";
        element.style.marginLeft="0px";
        element.style.marginTop="0px";
        element.style.left=bd.left+"px";
        element.style.top=bd.top+"px";
 
        document.body.appendChild(element);
 
        var element_cible=document.getElementById(cible);
 
        var duree_animation = 800;
        
        var image_par_seconde=30;
 
        var nombre_de_cycle = Math.floor(duree_animation/(1000/image_par_seconde));
 
        var taille_h_finale=20;
 
        var taille_w_finale=element.offsetWidth/element.offsetHeight*taille_h_finale;
 
        var place=element_cible.getBoundingClientRect()
 
        var distance_l=( element_cible.offsetWidth/2)+place.left-element.offsetLeft-(taille_w_finale/2);
 
        var distance_t=( element_cible.offsetHeight/2)+place.top-element.offsetTop-(taille_h_finale/2);
        
        var nb_tour=nbtour
 
        var donne={
        
                image_par_seconde:image_par_seconde,
 
                nombre_de_cycle:nombre_de_cycle,
 
                taille_ho:element.offsetHeight,
 
                distance_lo:element.offsetLeft,
 
                distance_to:element.offsetTop,
 
                compteur:0,
 
                taille_h_par_cycle:(element.offsetHeight-taille_h_finale) / nombre_de_cycle,
 
                taille_w_ratio:element.offsetWidth/element.offsetHeight,
 
                distance_l_par_cycle:distance_l / nombre_de_cycle,
 
                distance_t_par_cycle:distance_t / nombre_de_cycle,
 
                angle:(nb_tour*360)/nombre_de_cycle,
                
                opacite:0.9/nombre_de_cycle,
 
                element:element
        }
 
        deplacer(donne)
 
}
 
function deplacer(donne){
 
        donne.element.style.left=donne.distance_lo+donne.distance_l_par_cycle*donne.compteur+"px";
 
        donne.element.style.top=donne.distance_to+donne.distance_t_par_cycle*donne.compteur+document.documentElement.scrollTop+"px";
 
        donne.element.style.height=donne.taille_ho-donne.taille_h_par_cycle*donne.compteur+"px";
 
        donne.element.style.width=donne.taille_w_ratio*donne.element.offsetHeight+"px";
 
        donne.element.style.transform='rotate('+donne.angle*donne.compteur+'deg)';
        
        donne.element.style.opacity=1-(donne.opacite*donne.compteur);
 
        donne.compteur++
        
        if(donne.compteur<=donne.nombre_de_cycle){
 
                setTimeout(deplacer,(1000/donne.image_par_seconde),donne)
        }
        else{
                donne.element.remove()
        }
}
 
</script>
</head>
<body>
 
<br>
<button onclick='preparation("rectangle1","cible",2)'>rectangle rouge</button>
<button onclick='preparation("rectangle2","cible",0)'>rectangle bleu</button>
 
<img src="y.jpg" id='rectangle1' class='rectangle1'/>
 
 
<div id='rectangle2' class='rectangle2'>
</div>
 
 
<div id='cible'>
</div>
</body></html>

dans le code j'ai ai ajouter l’opacité

Agrandir photo puis la déplacer en la reduisant

JavaScript

Discussions similaires

Partager

Partager