Snow for Christmas

Tutorials
1

Hello everybody,
For Christmas, I would like to create snow on our website. I just upgraded to Sparkle Pro 3, and I am not so familiar yet with this new version.

What would be a good way to include snow?
Who has a nice script?
How can I include this script in Sparkle? (I don’t have a developers license I believe)

This is the website that I want to transform in X-mas style:

Kind regards,
Dirk Niestadt

2 Likes
2

Hi Dirk,
We take this in English because not everybody is understanding the Dutch language.
Nice to see the Dutch on this forum.
This has a nice snowfall but you have to save it on your harddisk to be able to change the html coding on the website.
Hope someone has another solution for you. Here comes the link with the coding.
Good luck.

1 Like
3

I checked this one.
It is working!

body { position: relative; } body:before { content: ''; display: block; position: absolute; z-index: 99999 !important; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background-image: url('https://www.wpromotions.eu/wp-content/uploads/2018/12/ds-snowflakes-site-1.png'), url('https://www.wpromotions.eu/wp-content/uploads/2018/12/ds-snowflakes-site-2.png'), url('https://www.wpromotions.eu/wp-content/uploads/2018/12/ds-snowflakes-site-.png'); -webkit-animation: snow 18s linear infinite; -moz-animation: snow 18s linear infinite; -ms-animation: snow 18s linear infinite; animation: snow 18s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} }
2 Likes
4

Thank you for your quick response!
But maybe it is a stupid question, but how can I embed this code on the website?
I have never done this before. And when I choose “code snippet” then it is only in a small venster and it does not work on my side. I probably do something wrong…

5

@Dirk, Check this out - https://sparkleapp.com/docs/advanced.html

1 Like
6

Thank You for the TechSini Link. The snowfall-codes are working nice on my electrostatic website https://www.elektrostatikhilfe.de/home.html
Thanks to all the others for this great snowfall idea.

Best greetings
Horst

2 Likes
7

Here is som more ways: engage

1 Like
8

thanks!
Don’t you have a little tutorial about how to insert html/css/js? plisssss :smiley:
I already put it the first option from above on my web www.soygrafico.com and yes, it works! but not for mobile devices.

9

Sparkle help

10

The snow flakes look beautiful on the sites above. But somehow I can’t get it to work when I include an embedded code. The code looks like a rectangle on my screen without content.

Could this be because I have the Pro 3 license and not the “developers” license?

Sorry to bother you again with this question.

11

@Dirk

I embedded the three codes from TechSini in three boxes on one site. In the second code you can change the number of the snowflakes and the speed how fast they are falling. It is working in Sparkle 3 Pro very well.

1 Like
12

Hi, yes! That did it. Thank you ever so much for sharing.

1 Like
13

Hi there,

Yes it works great now, thank you!
If you create a layer of these 3 building blocks, you can then nest this layer in the top layer with the menu buttons which is displayed on all webpages. In that case the snow is everywhere on all pages.

Check it out:

However, it is only visible on a desktop computer and not on mobile.
Does anyone have a solution for that as well? @duncan perhaps?

Cheers,
Dirk

1 Like
14

You are welcome to integrate code, unfortunately every code problem is different and most of the time the path is really really narrow, all the details need to be exactly right. This complexity is precisely why we built Sparkle to be a visual website builder, we are unable to delve into coding issues even just from a simple amount of time point of view. I full acknowledge that Sparkle doesn’t do everything, and that a little code occasionally helps, but we can’t really go beyond that.

3 Likes
15

It works on all my devices!
Desktop, iPad, iPhone!

16

HI, I try to use it but for me works only on computer browser and iPad but on iPhone it doesn’t.
How it’s work for you?
You have changed something in the code?

Thank you in advance

17

Hi, it doesn’t work on my iPhone either
Haven’t bothered with it.
Something to check out next year