Effet d'apparition en diagonale

**Spartacusply** · 20/05/2014, 10h55

Hello !

Je recherche le moyen de faire apparaître un élément en diagonale via jquery/jquery UI ou autre plugin. Comme un effet "blind" en fait, mais en direction diagonale (du haut à droite, vers en bas à gauche).

Après quelques recherches, il apparaît que ce n'est pas si évident que ça...

Merci d'avance pour vos réponses.

**ascito** · 21/05/2014, 00h15

je me suis imaginé avec un masque qui serait par dessus la div que l'on veux masquer à l'affichage de l'anime.

sachant que pour toute forme, la zone masquante est défini par le rayon d'un cercle de la zone inscrit des ecarts ( xmax - xmin ) et ( ymax-ymin)

j'utilise un fonction bien pratique que j'ai codé pour mes besoins "coordinates"

l'arc choisi pour l'angle d'attaque est en théorie juste un vecteur de vélocité, puisque tous angles est valable...

voilà mon idée :

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
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
 
<html lang="en">
<head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
    .bloc{width: 50px;height: 150px;background:red;position: absolute;left:200px;top:200px;}    
    .mask{background:#000;position: absolute; }    
    </style>
    <title><!-- Insert your title here --></title>
</head>
<body>
    <script> 
    $(document).ready(function(){
 
    var coordinates = function (node) {
 
            var computedStyle = function (prop, style) {
                var property;
 
                if (style[prop]) {
                    return style[prop];
                }
                if (style.getPropertyValue) {
                    return (style.getPropertyValue(prop) === '' ? 0 : style.getPropertyValue(prop));
                }
                if (style.getAttribute) {
                    return (style.getAttribute(prop) === '' ? 0 : style.getAttribute(prop));
                }
                for (property in style) {
                    if (style.hasOwnProperty(property) && prop === property) {
                        return style[property];
                    }
                }
                return 0;
            },
                body = document.body,
                docElem = document.documentElement,
                b = node[0].getBoundingClientRect(),
                style = window.getComputedStyle(node[0], null),
                st = window.pageYOffset ? window.pageYOffset :  docElem.scrollTop  ? docElem.scrollTop :  body.scrollTop,
                sl = window.pageXOffset ? window.pageXOffset : docElem.scrollLeft ?  docElem.scrollLeft :  body.scrollLeft,
                ct = docElem.clientTop || body.clientTop || 0,
                cl = docElem.clientLeft || body.clientLeft || 0,
                h = parseInt(Math.round(b.bottom - b.top), 10),
                w = parseInt(Math.round(b.right - b.left), 10),
                bt = parseInt(computedStyle('borderTopWidth', style), 10),
                bb = parseInt(computedStyle('borderBottomWidth', style), 10),
                bl = parseInt(computedStyle('borderLeftWidth', style), 10),
                br = parseInt(computedStyle('borderRightWidth', style), 10),
                mt = parseInt(computedStyle('marginTop', style), 10),
                mb = parseInt(computedStyle('marginBottom', style), 10),
                ml = parseInt(computedStyle('marginLeft', style), 10),
                mr = parseInt(computedStyle('marginRight', style), 10),
                pt = parseInt(computedStyle('paddingTop', style), 10),
                pb = parseInt(computedStyle('paddingBottom', style), 10),
                pl = parseInt(computedStyle('paddingLeft', style), 10),
                pr = parseInt(computedStyle('paddingRight', style), 10),
                top =  b.top,
 
                nox = b.left + sl - cl,
                noy = b.top + st - ct,
                sox = nox,
                soy = noy + h,
                sex = nox + w,
                sey = soy,
                nex = sex,
                ney = noy,
 
                onox = b.left + sl - cl - ml, 
                onoy = b.top + st - ct - mt,
                osox = onox,
                osoy = onoy + h + mt + mb,
                osex = onox + w + ml + mr,
                osey = osoy,
                onex = osex,
                oney = onoy,
 
                inox = b.left + sl - cl + bl ,
                inoy = b.top + st - ct + bt , 
                inex = b.left +sl-cl+w-br ,
                iney = b.top +st-ct+bt ,
                isex = b.left + sl - cl + w -br , 
                isey = b.top + st - ct + h - bb,        
                isoy = b.top + st - ct + h - bb,
                isox = inox,
 
 
                ow = onex-onox,
                oh = osey-onoy,                
                iw = inex - inox,
                ih = isey - iney;
 
            return {
                top: top,
                st: st,
                sl: sl,
                ct: ct,
                cl: ct,
                h: h,
                w: w,
                bt: bt,
                bb: bb,
                bl: bl,
                br: br,
                mt: mt,
                mb: mb,
                ml: ml,
                mr: mr,
                pt: pt,
                pb: pb,
                pl: pl,
                pr: pr,
                nox: nox,
                noy: noy,
                sox: sox,
                soy: soy,
                sex: sex,
                sey: sey,
                nex: nex,
                ney: ney,
                onox: onox,
                onoy: onoy,
                osox: osox,
                osoy: osoy,
                osex: osex,
                osey: osey,
                onex: onex,
                oney: oney,
                ow: ow,
                oh: oh,
                inox: inox,
                inoy: inoy,
                isox: isox,
                isoy: isoy,
                isex: isex,
                isey: isey,
                inex: inex,
                iney: iney,
                iw: iw,
                ih: ih
            };
        };
    var blocCoordinate, absCircle, ordCircle, rayonCircle, arc, x, y;
 
    blocCoordinate = coordinates($('.bloc'));
 
    absCircle  = ( blocCoordinate.onex - blocCoordinate.onox ) / 2;
    ordCircle  = ( blocCoordinate.osey - blocCoordinate.oney ) / 2;
    rayonCircle = Math.sqrt((absCircle*absCircle)+(ordCircle*ordCircle));
 
    arc =-(90-rayonCircle);
 
    x  =( absCircle+blocCoordinate.onox) - rayonCircle;
    y  =( ordCircle+blocCoordinate.onoy)  - rayonCircle;
 
        $('body')
        .append('<div class="mask"></div>');
 
        $(".mask")
        .fadeTo(0,0.3)
        .css({
            width:2*rayonCircle,
            height:2*rayonCircle,
            left: x,
            top: y
        });
         $(".mask").css({
            transform: 'rotate(' + arc + 'deg)'
        });    
    });
    </script>
    <div class='bloc'></div>
</body>
</html>

c'est un bon sujet

**NoSmoking** · 21/05/2014, 07h34

Bonjour,
à la lecture de la demande je verrais un truc plus trivial basé sur la modification de la largeur, hauteur et margin-left en utilisant la méthode animate.

Comme un effet "blind" en fait, mais en direction diagonale (du haut à droite, vers en bas à gauche).

exemple complet

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
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>toggle diagonale</title>
<style>
#la_div {
  border: 1px solid #ABC;
  background-color: #DEF;
  width: 300px;
  height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Cliquez sur la page...
<div id="la_div">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
</div>
<script>
// Init de l'élément
var $obj = $( '#la_div');
$obj.data( 'larg', $obj.css('width'));
$obj.data( 'haut', $obj.css('height'));
$obj.css({
  'width': 0,
  'height': 0,
  'marginLeft': $obj.data( 'larg'),
  'opacity': 0
});
// événement sur click
$( document ).on('click' , function(){
  var opa = parseInt( $obj.css('opacity'));
  if( opa === 1){
      $obj.animate({
        'width': 0,
        'height': 0,
        'marginLeft': $obj.data( 'larg'),
        'opacity': 0
      }, 'slow' );
 
  }
  else{
      $obj.animate({
        'width': $obj.data( 'larg'),
        'height': $obj.data( 'haut'),
        'marginLeft': 0,
        'opacity': 1
      }, 'slow' );
  }
});
</script>
</body>
</html>

le javascript seul

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
// Init de l'élément
var $obj = $( '#la_div');
$obj.data( 'larg', $obj.css('width'));
$obj.data( 'haut', $obj.css('height'));
$obj.css({
  'width': 0,
  'height': 0,
  'marginLeft': $obj.data( 'larg'),
  'opacity': 0
});
// événement sur click
$( document ).on('click' , function(){
  var opa = parseInt( $obj.css('opacity'));
  if( opa === 1){
      $obj.animate({
        'width': 0,
        'height': 0,
        'marginLeft': $obj.data( 'larg'),
        'opacity': 0
      }, 'slow' );
 
  }
  else{
      $obj.animate({
        'width': $obj.data( 'larg'),
        'height': $obj.data( 'haut'),
        'marginLeft': 0,
        'opacity': 1
      }, 'slow' );
  }
});

**danielhagnoul** · 22/05/2014, 00h37

Bonsoir

Exemple avec UI Position

Code HTML :

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

1
2
3
<div id="divParent">
	<div id="divMove"></div>
</div>

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
#divMove {
	position: relative;
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	background-color: grey;
	border: 1px solid red;
}
 
#divParent { width: 500px; height: 500px; }

Code JS :

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

1
2
3
4
5
6
7
8
9
var jObj = $( "#divMove" );
 
jObj.position({
    "at" : "left+50% top+50%",
    "of" : jObj.parent(),
    "using" : function( css, calc ){
        jObj.animate( css, 3000, "linear" );
    }
});

**Spartacusply** · 22/05/2014, 00h57

Bonsoir,

d'abord merci pour vos réponses.

L'idée de ascito est intéressante, elle permet au moins de trouver la diagonal qui m'intéresse, après il reste à l'animer et faire en fonction que le cache ne soit visible que sur la partie qu'il cache (faut pas qu'il "déborde").

Celle de NoSmoking est à quelque chose près la solution à laquelle je suis actuellement arrivée. Ca fonctionne très bien en fait, mais si je voudrais perfectionner au maximum le résultat que je cherche à obtenir, il faudrait que l'opacité ne se réduise pas de manière uniforme sur l'élément : qu'elle soit de 1 en bas de la diagonale, et de 0 au dessus.

@danielhagnoul : Là pour le coup ce n'est pas un effet de déplacement que je recherche

**ascito** · 23/05/2014, 01h45

bon l'idée de dépars du masque est plutôt pratique, on peu imaginer utiliser la solution pour du canvas ou du html, aussi avoir énormément de variantes facilement paramétrables, je vous montre un "pseudo résultat" qui finalement n’obtient pas encore pour moi un effet sympa :

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
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!doctype html>
 
<html lang="en">
<head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
    .bloc{width: 150px;height:  150px;background:red;position: absolute;left:200px;top:200px;}    
    .mask{background:#fff;position: absolute; }    
    </style>
    <title><!-- Insert your title here --></title>
</head>
<body>
    <script> 
    $(document).ready(function(){
 
    var coordinates = function (node) {
 
            var computedStyle = function (prop, style) {
                var property;
 
                if (style[prop]) {
                    return style[prop];
                }
                if (style.getPropertyValue) {
                    return (style.getPropertyValue(prop) === '' ? 0 : style.getPropertyValue(prop));
                }
                if (style.getAttribute) {
                    return (style.getAttribute(prop) === '' ? 0 : style.getAttribute(prop));
                }
                for (property in style) {
                    if (style.hasOwnProperty(property) && prop === property) {
                        return style[property];
                    }
                }
                return 0;
            },
                body = document.body,
                docElem = document.documentElement,
                b = node[0].getBoundingClientRect(),
                style = window.getComputedStyle(node[0], null),
                st = window.pageYOffset ? window.pageYOffset :  docElem.scrollTop  ? docElem.scrollTop :  body.scrollTop,
                sl = window.pageXOffset ? window.pageXOffset : docElem.scrollLeft ?  docElem.scrollLeft :  body.scrollLeft,
                ct = docElem.clientTop || body.clientTop || 0,
                cl = docElem.clientLeft || body.clientLeft || 0,
                h = parseInt(Math.round(b.bottom - b.top), 10),
                w = parseInt(Math.round(b.right - b.left), 10),
                bt = parseInt(computedStyle('borderTopWidth', style), 10),
                bb = parseInt(computedStyle('borderBottomWidth', style), 10),
                bl = parseInt(computedStyle('borderLeftWidth', style), 10),
                br = parseInt(computedStyle('borderRightWidth', style), 10),
                mt = parseInt(computedStyle('marginTop', style), 10),
                mb = parseInt(computedStyle('marginBottom', style), 10),
                ml = parseInt(computedStyle('marginLeft', style), 10),
                mr = parseInt(computedStyle('marginRight', style), 10),
                pt = parseInt(computedStyle('paddingTop', style), 10),
                pb = parseInt(computedStyle('paddingBottom', style), 10),
                pl = parseInt(computedStyle('paddingLeft', style), 10),
                pr = parseInt(computedStyle('paddingRight', style), 10),
                top =  b.top,
 
                nox = b.left + sl - cl,
                noy = b.top + st - ct,
                sox = nox,
                soy = noy + h,
                sex = nox + w,
                sey = soy,
                nex = sex,
                ney = noy,
 
                onox = b.left + sl - cl - ml, 
                onoy = b.top + st - ct - mt,
                osox = onox,
                osoy = onoy + h + mt + mb,
                osex = onox + w + ml + mr,
                osey = osoy,
                onex = osex,
                oney = onoy,
 
                inox = b.left + sl - cl + bl ,
                inoy = b.top + st - ct + bt , 
                inex = b.left +sl-cl+w-br ,
                iney = b.top +st-ct+bt ,
                isex = b.left + sl - cl + w -br , 
                isey = b.top + st - ct + h - bb,        
                isoy = b.top + st - ct + h - bb,
                isox = inox,
 
 
                ow = onex-onox,
                oh = osey-onoy,                
                iw = inex - inox,
                ih = isey - iney;
 
            return {
                top: top,
                st: st,
                sl: sl,
                ct: ct,
                cl: ct,
                h: h,
                w: w,
                bt: bt,
                bb: bb,
                bl: bl,
                br: br,
                mt: mt,
                mb: mb,
                ml: ml,
                mr: mr,
                pt: pt,
                pb: pb,
                pl: pl,
                pr: pr,
                nox: nox,
                noy: noy,
                sox: sox,
                soy: soy,
                sex: sex,
                sey: sey,
                nex: nex,
                ney: ney,
                onox: onox,
                onoy: onoy,
                osox: osox,
                osoy: osoy,
                osex: osex,
                osey: osey,
                onex: onex,
                oney: oney,
                ow: ow,
                oh: oh,
                inox: inox,
                inoy: inoy,
                isox: isox,
                isoy: isoy,
                isex: isex,
                isey: isey,
                inex: inex,
                iney: iney,
                iw: iw,
                ih: ih
            };
        };
 
 
    var blocCoordinate, absCircle, ordCircle, rayonCircle, arc, x, y;
 
    blocCoordinate = coordinates($('.bloc'));
 
    absCircle  = ( blocCoordinate.onex - blocCoordinate.onox ) / 2;
    ordCircle  = ( blocCoordinate.osey - blocCoordinate.oney ) / 2;
    rayonCircle = Math.sqrt((absCircle*absCircle)+(ordCircle*ordCircle));
 
    arc =-(90-rayonCircle);
    arc =-(45);
 
    x  =( absCircle ) - rayonCircle;
    y  =( ordCircle )  - rayonCircle;
 
   // x  =( absCircle+blocCoordinate.onox) - rayonCircle;
   // y  =( ordCircle+blocCoordinate.onoy)  - rayonCircle;
 
         var clone = $(".bloc").clone().css('zIndex',1000).attr('id','m2').css('background',"transparent").css('overflow',"hidden").appendTo("body");
        $("#m2").removeClass('masked')
        .append('<div class="mask"></div>');
 
         ;
        $(".masked").fadeTo(0,0);
        $(".mask")
       // .fadeTo(0,0.3)
        .css({
            width:2*rayonCircle,
            height:2*rayonCircle,
            left: x,
            top: y
        });
         $(".mask").css({
            transform: 'rotate(' + arc + 'deg)'
        });
 
    $(".masked").fadeTo(4000,1) ;
    $(".mask").animate({
        'left': x - 2 * rayonCircle,
         'top': y + 2 * rayonCircle
 
      }, 4000);        
 
    });
 
    </script>
    <div class='bloc masked'></div>
</body>
</html>

Effet d'apparition en diagonale

jQuery

Vue hybride

Discussions similaires

Partager

Partager