Discussion :

[Kagami]

bonjour,
saint-valentin arrive comme vous savez, je cherche comment créer des coeurs sur une page qui tombent d'en haut, j'ai utilisé le canvas mais le problème c'est qu'il couvre toute ma page et je ne peux pas cliquer sur les boutons par exemple pour selectionner du text de la page, il y a bien les coeurs qui tombent d'en haut mais je n'arrive pas à accèder aux inputss de la page ni rien, c'est normal vu que j'ai mis le z-index mais sans ça on ne voit pas les coeurs :
J'espère que c'est clair

Code JavaScript :

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
var HeartsBackground = {
  heartHeight: 60,
  heartWidth: 64,
  hearts: [],
  heartImage: 'http://i67.tinypic.com/6zaohg.png',
  maxHearts: 30,
  minScale: 0.4,
  draw: function() {
    this.setCanvasSize();
    this.ctx.clearRect(0, 0, this.w, this.h);
    for (var i = 0; i < this.hearts.length; i++) {
      var heart = this.hearts[i];
      heart.image = new Image();
      heart.image.style.height = heart.height;
      heart.image.src = this.heartImage;
      this.ctx.globalAlpha = heart.opacity;
      this.ctx.drawImage (heart.image, heart.x, heart.y, heart.width, heart.height);
    }
    this.move();
  },
  move: function() {
    for(var b = 0; b < this.hearts.length; b++) {
      var heart = this.hearts[b];
      heart.y += heart.ys;
      if(heart.y > this.h) {
        heart.x = Math.random() * this.w;
        heart.y = -1 * this.heartHeight;
      }
    }
  },
  setCanvasSize: function() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.height();
    this.w = this.canvas.width;
    this.h = this.canvas.height;
  },
  initialize: function() {
    this.canvas = $('#canvas')[0];
 
    if(!this.canvas.getContext)
      return;
 
    this.setCanvasSize();
    this.ctx = this.canvas.getContext('2d');
 
    for(var a = 0; a < this.maxHearts; a++) {
      var scale = (Math.random() * (1 - this.minScale)) + this.minScale;
      this.hearts.push({
        x: Math.random() * this.w,
        y: Math.random() * this.h,
        ys: Math.random() + 1,
        height: scale * this.heartHeight,
        width: scale * this.heartWidth,
        opacity: scale
      });
    }
 
    setInterval($.proxy(this.draw, this), 30);
  }
};
 
$(document).ready(function(){
  HeartsBackground.initialize();
});

Code HTML :

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

1
2
3
4
5
6
7
8
<canvas id="canvas"></canvas>
 
<style>
    canvas{
      position : absolute;
      z-index : 9999999;
    }
</style>

merci d'avance

[JefReb]

Toutes mes excuses à l'auteur du code qui suit, car j'ai oublié de noter la source.
Voici un code pour la neige qui marche superbement.
cela devrait le faire avec des coeurs ...
Peut être pourras-tu t'en inspirer:

Code css :

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
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	height: 100%;
	font-size: 100%;
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
	width: 100%;
}
#page {
	position: relative;
	width: 100%;
	height: 900px;
	overflow:hidden;
	background-color: #33F;
	border: 1px solid black;
}
/*============    Pour la neige                 ===============*/
.i-large, .i-medium, .i-small {
	position : absolute;
	top : 0;
	left : 0;
	bottom: 0;
	right: 0;
}
.i-large {
	background: url(/img/gags/particules_large.png) repeat 0px 0px;
	-moz-animation : dropFlowParticles 2s linear infinite;
	-webkit-animation : dropFlowParticles 2s linear infinite;
	-o-animation : dropFlowParticles 2s linear infinite;
	animation : dropFlowParticles 2s linear infinite;
}
.i-medium {
	background: url(/img/gags/particules_medium.png) repeat 0px 0px;
	-moz-animation : dropFlowParticles 12s linear infinite;
	-webkit-animation : dropFlowParticles 12s linear infinite;
	-o-animation : dropFlowParticles 12s linear infinite;
	animation : dropFlowParticles 12s linear infinite;
}
.i-small {
	background: url(/img/gags/particules_small.png) repeat 0px 0px;
	-moz-animation : dropFlowParticles 27s linear infinite;
	-webkit-animation : dropFlowParticles 27s linear infinite;
	-o-animation : dropFlowParticles 27s linear infinite;
	animation : dropFlowParticles 27s linear infinite;
}
@-moz-keyframes dropFlowParticles {
 from {
background-position: 0 0;
}
to {
	background-position: 0 413px;
}
}
 @-webkit-keyframes dropFlowParticles {
 from {
background-position: 0 0;
}
to {
	background-position: 0 413px;
}
}
@-o-keyframes dropFlowParticles {
 from {
background-position: 0 0;
}
to {
	background-position: 0 413px;
}
}
 @keyframes dropFlowParticles {
 from {
background-position: 0 0;
}
to {
	background-position: 0 413px;
}
}

Code html :

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

1
2
3
4
5
6
7
<div id="page">
<!-- Essai d animation de neige -->
  <div class="i-large"></div>
  <div class="i-medium"></div>
  <div class="i-small"></div>
<!-- Fin d animation de neige -->
</div>

Encore mes excuses pour l'auteur. Peut être pourra-t-il se faire connaître.

[Invité]

Bonjour,

voici un script (jQuery) que j'utilise pour "faire tomber la neige" : https://codepen.io/jreaux62/pen/aEJewe

Il suffit de changer les dates, et remplacer l'image de flocon par un coeur...




@JefReb
Il faudrait donner l'URL complète de tes images (on ne peut pas tester)

[Kagami]

merci les gars, ça marche nickel

par contre j'ai du mal à gérer les dates, si possible de me donner quelques petites indications

merci

[NoSmoking]

Bonjour,

Toutes mes excuses à l'auteur du code qui suit, car j'ai oublié de noter la source.
...
Encore mes excuses pour l'auteur. Peut être pourra-t-il se faire connaître.

il s'agit de Michaël Crofte et la page de test : Snow animation with CSS3

[Kagami]

hey,

quelqu'un a une idée comment je pourrais ralentir le FALL des snow ?

[Invité]

Hey hey,

Code :

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

 incposy=parseInt(SnowFlakes[i][3]/3)/5;

[Kagami]

merci ,
Est-ce qu'il y a moyen de les faire déclencher à une minute précise lorsque l'utilisateur est sur la page sans qu'il l'actualise ?