Comment ajouter une animation "chute de neige"

C'est bientôt la fin de l'année et vous aimeriez apporter un peu de magie à vos campagnes de Noël en quelques clics 🎄 ? Et si vous essayiez d'utiliser notre CSS prêt à l'emploi pour un effet "chute de neige"? 

CAMPAGNES IFRAME

Si vous travaillez avec une campagne en Iframe, copiez entièrement ce code CSS:

#qualifio_wrapper:before {
background-image: url(https://files.qualifio.com/library/breaking_bad_qualifio/images/2017/9/snow/snow.png),url(https://files.qualifio.com/library/breaking_bad_qualifio/images/2017/9/snow/snow2.png),url(https://files.qualifio.com/library/breaking_bad_qualifio/images/2017/9/snow/snow3.png); 
-webkit-animation: snow 20s linear infinite; 
-moz-animation: snow 20s linear infinite; 
-ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; 
content: ""; 
display: block; 
position: absolute; 
z-index: 11111111; 
width: 100%; 
height: 100%; 
pointer-events: none; 
top: 0; 
left: 0; 
} 

@keyframes snow { 
0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} 
} 
@-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} 
} 
@-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} 
} 
@-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} 
}

Et ensuite collez-le directement dans l'onglet "CSS" de la section "Code personnalisé & tags" (dans l'éditeur d'apparence de l'Iframe, étape "apparence"):

CAMPAGNES EN MINISITE

Si vous travaillez sur une campagne en minisite et souhaitez avoir cet effet chute de neige sur l'intégralité de la campagne, alors copiez intégralement ce code CSS:

.bg-pattern:before { 
background-image: url(https://files.qualifio.com/library/breaking_bad_qualifio/images/2017/9/snow/snow.png),url(https://files.qualifio.com/library/breaking_bad_qualifio/images/2017/9/snow/snow2.png),url(https://files.qualifio.com/library/breaking_bad_qualifio/images/2017/9/snow/snow3.png); 
-webkit-animation: snow 20s linear infinite; 
-moz-animation: snow 20s linear infinite; 
-ms-animation: snow 20s linear infinite; 
animation: snow 20s linear infinite; 
content: ""; 
display: block; 
position: fixed; 
z-index: 11111111; 
width: 100%; 
height: 100%; 
pointer-events: none; 
top: 0; 
left: 0; 
} 
@keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} 
} 
@-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} 
} 
@-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} 
} 
@-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} 
}

Et ensuite copiez-le tel quel dans l'onglet CSS de la section "Code personnalisé & tags" se trouvant dans l'éditeur d'apparence du minisite (étape "apparence"). 

And then paste it into the Custom Codes and tags tab of the Look and Feel editor of the minisite template, CSS section: 

C'est fait? Il ne vous reste plus qu'à sauvegarder vos changements et admirez votre magnifique campagne hivernale ❄️ !