Add a snowfall animation to your campaign

 It’s almost the end of the year and you would like to add some magic to your Christmas campaigns in only a few clicks 🎄 ? Why not try adding a snowfall effect with our ready-to use CSS below?

IFRAME CAMPAIGNS

If you are working with an Iframe campaign, copy this whole code:

#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;} 
}

And then directly paste it into the the Iframe Look and Feel editor's "Custom code and tags" tab, in the CSS section:

MINISITE CAMPAIGNS

If you are working with a minisite campaign, copy this whole code:

.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;} 
}

And then directly paste it into the minisite Look and Feel editor's "Custom code and tags" tab, in the CSS section:

Done? You can now simply hit the save button and admire your lovely wintery campaign ❄️ .