{"id":4226,"date":"2014-12-13T17:13:06","date_gmt":"2014-12-13T16:13:06","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=4226"},"modified":"2015-02-26T20:24:10","modified_gmt":"2015-02-26T19:24:10","slug":"creer-une-animation-de-neige-ou-de-particules-en-css3","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/creer-une-animation-de-neige-ou-de-particules-en-css3","title":{"rendered":"Cr\u00e9er une animation de neige ou de particules en CSS3"},"content":{"rendered":"

Je vous propose aujourd’hui une animation de particules<\/strong> dans un tuto qui affichera une chute de neige en boucle. Il existe souvent une foule de solutions pour ce genre d’animation. Je vous pr\u00e9sente une solution en CSS3<\/strong> en utilisant la propri\u00e9t\u00e9 animation<\/code><\/strong> et les s\u00e9quences de keyframes<\/code><\/strong>.<\/p>\n

Logique de l’animation<\/h2>\n

Avant de toucher au code, analysons comment rendre r\u00e9aliste l’animation et sch\u00e9matiser les plans dont nous aurons besoin.
\nRegardons le sch\u00e9ma ci-dessous :<\/p>\n

\"Sch\u00e9ma<\/p>\n

Nous remarquons une silhouette humaine, un c\u00f4ne repr\u00e9sentant son champs de vision ainsi que trois sph\u00e8res de m\u00eame dimension \u00e0 trois distances diff\u00e9rentes.
\nDans le principe, le sch\u00e9ma devrait suffire \u00e0 illustrer l’ensemble de la logique de l’animation que nous allons mettre en place. Les trois sph\u00e8res repr\u00e9sentent les trois niveaux de calques<\/strong> que nous allons animer. Remarquez ces d\u00e9tails :<\/p>\n

    \n
  1. Une sph\u00e8re occupe une portion plus importante du champs visuel quand elle est proche et nettement moindre lorsqu’elle est distante. On peut donc conclure facilement que nos particules devront \u00eatre repr\u00e9sent\u00e9es plus grosses pour le calque proche de nos yeux et plus fines au fur et \u00e0 mesure qu’elles s’\u00e9loignent.<\/li>\n
  2. Si toutes les sph\u00e8res tombent \u00e0 une m\u00eame vitesse, la sph\u00e8re proche de la silhouette restera moins longtemps dans le champs que la sph\u00e8re \u00e9loign\u00e9e. Pour une animation \u00e0 l’\u00e9cran cela voudra dire que le calque \u00ab\u00a0proche\u00a0\u00bb devra passer plus rapidement \u00e0 l’\u00e9cran et nous ralentirons les calques qui sont cens\u00e9s \u00eatre plus distants.<\/li>\n<\/ol>\n

    Conclusion<\/u> : les particules proches seront plus grosses et plus rapides, alors qu’en s\u2019\u00e9loignant, les autres calques de particules seront fins et lents.<\/p>\n

    Listons nos besoins<\/h2>\n

    Le principe de l’animation acquis, vous devriez vous rendre compte que vous allez donc avoir besoin de quatre surfaces de calque (du plus profond au plus proche) :<\/p>\n