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