Jump to content

Falling snowflakes on webpage

Go to solution Solved by derricksrandomviews,

Recommended Posts

3 hours ago, IsabelBarrigaBrown said:

I used it last year through Custom CSS but it doesn't appear to be working this time? 

It isn't CSS. You need to add it using Code Injection.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 month later...
32 minutes ago, Emmalou025 said:

Hi, I'm looking to add falling hearts in the same way as the snowflakes if possible? I tried the CSS Code on this thread but it didn't work for me unfortunately.

Many thanks 🙂

Hi @emmalou425

 

As @paul2009 said above, you need to add it using ‘Code Injection’. It is not CSS so will not work in the ‘Custom CSS’ section.

L

Edited by LouLouHarvey
Link to comment
12 minutes ago, LouLouHarvey said:

Hi @emmalou425

 

As @paul2009 said above, you need to add it using ‘Code Injection’. It is not CSS so will not work in the ‘Custom CSS’ section.

L

Tried that too & didn't work for me. The snowflakes worked for Christmas perfectly just not the hearts

Link to comment
1 hour ago, Emmalou025 said:

would anyone have a code i could use to add falling hearts or something like that to my home page for Valentines?

image.gif.803598e4ed3b1b15563ee948c5eed8c1.gif
Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
1 minute ago, paul2009 said:
 
 
 
 
 
 

If you have drawn or purchased some hearts and saved them as image files, you should be able to animate them in exactly the same way as the snowflakes.

When you've uploaded your image files to Squarespace, add the image URLs to the code and give it a try. That said, for a Valentine's effect, I'd be more inclined to float them upwards instead of falling like snow.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks a mill Paul, yes floating upwards would make more sense! I will try the image files now & edit & see how i go - thank you!

Link to comment
  • 4 months later...
On 2/7/2022 at 10:38 AM, derricksrandomviews said:

From the last code snippet I posted. To make hearts or eggs fall you would need three new image files, lines in the code to replace these three lines. if you copy and paste the url starting at https and ending at png, in your browser address bar, you will see one of them. I think you could get by with one, these three were images of different sized "flakes".

 url('https://s3-eu-west-1.amazonaws.com/static-ressources/s1.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s2.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s3.png');

or you can use this code for hearts. The behavoir is a bit different for 7.1 and 7.0 sites.  Place in custom css for the whole site.

body:before {
content: '';
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url(https://divi.space/wp-content/uploads/2019/02/hearts.png);
animation: falling-hearts 18s linear infinite;
}
@keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

@-moz-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

@-webkit-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}

Can you tell me if it's possible to change the URL of the falling hearts for something different any kind of .png images? I tried to put my own images but it didn't work right like with the hearts that are already there. Please can you tell me what can I do to change those hearts and put my own URL without affecting the way they should fall?

Link to comment
Posted (edited)

The hearts png is still good but the snowflake URLs are old and gone. Can you post the URL of the png file you were trying to use? Changing the png file is not all, you have to edit all lines of code that have "hearts" to the name of your png file. For example, if your file is leaves.png change falling-hearts to falling-leaves 
 

https://divi.space/wp-content/uploads/2019/02/hearts.png

 

Edited by derricksrandomviews
Link to comment
10 hours ago, derricksrandomviews said:

The hearts png is still good but the snowflake URLs are old and gone. Can you post the URL of the png file you were trying to use? Changing the png file is not all, you have to edit all lines of code that have "hearts" to the name of your png file. For example, if your file is leaves.png change falling-hearts to falling-leaves 
 

https://divi.space/wp-content/uploads/2019/02/hearts.png

 

https://ahp.li/3500666224e5770a3762.png 

That's the URL I was trying to use. They are still hearts but different one.

Link to comment
2 hours ago, derricksrandomviews said:

I don't think one-heart png is going to work well. If you want to try it you need to change all the text in the code that says falling-heart to falling-3500666224e5770a3762 if you use that URL.  You may have better results with a png similar to this one:

https://clipart-library.com/images/kTKAaojTj.png

kTKAaojTj.png

Yes I understand what you are saying but let me know if this one will be fine. and this is the URL https://ahp.li/2ebe9df1b1a1a14db211.pngUntitled-1.png.e3470a55f1d67b0d1bd03f9bb964b50e.png

Link to comment
2 hours ago, derricksrandomviews said:

I don't know but I might be able to figure it out. 

OK I would like if you can figure that out because that's the only code of falling objects that works in my page. But I would like to be able to use any URL images different than the hearts the original one have. I will be very thankful if you can help me.

Link to comment

It's a bit more complicated code, but will fit in a code block set for HTML. I tried it on a 7.1 page and it works. past it between the <p> <p>

 

marquee behavior=scroll direction=down scrollamount=1 scrolldelay=21 height=502 style='position:absolute; left:25%; top:98px; width:23; height:502px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=29 height=594 style='position:absolute; left:63%; top:166px; width:23; height:594px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=23 height=691 style='position:absolute; left:49%; top:152px; width:23; height:691px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=17 height=579 style='position:absolute; left:54%; top:153px; width:23; height:579px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=38 height=569 style='position:absolute; left:19%; top:107px; width:23; height:569px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=19 height=525 style='position:absolute; left:19%; top:89px; width:23; height:525px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=21 height=564 style='position:absolute; left:35%; top:158px; width:23; height:564px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=38 height=509 style='position:absolute; left:60%; top:5px; width:23; height:509px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=19 height=613 style='position:absolute; left:88%; top:36px; width:23; height:613px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=50 height=599 style='position:absolute; left:31%; top:48px; width:23; height:599px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=47 height=580 style='position:absolute; left:57%; top:186px; width:23; height:580px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=8 height=547 style='position:absolute; left:26%; top:2px; width:23; height:547px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=41 height=565 style='position:absolute; left:10%; top:186px; width:23; height:565px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=1 scrolldelay=10 height=670 style='position:absolute; left:56%; top:64px; width:23; height:670px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=1 scrolldelay=11 height=540 style='position:absolute; left:75%; top:46px; width:23; height:540px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=47 height=600 style='position:absolute; left:85%; top:2px; width:23; height:600px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=41 height=648 style='position:absolute; left:11%; top:78px; width:23; height:648px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=1 scrolldelay=14 height=566 style='position:absolute; left:51%; top:38px; width:23; height:566px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=7 height=543 style='position:absolute; left:88%; top:48px; width:23; height:543px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=31 height=518 style='position:absolute; left:93%; top:43px; width:23; height:518px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>

Link to comment
32 minutes ago, derricksrandomviews said:

It's a bit more complicated code, but will fit in a code block set for HTML. I tried it on a 7.1 page and it works. past it between the <p> <p>

 

marquee behavior=scroll direction=down scrollamount=1 scrolldelay=21 height=502 style='position:absolute; left:25%; top:98px; width:23; height:502px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=29 height=594 style='position:absolute; left:63%; top:166px; width:23; height:594px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=23 height=691 style='position:absolute; left:49%; top:152px; width:23; height:691px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=17 height=579 style='position:absolute; left:54%; top:153px; width:23; height:579px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=38 height=569 style='position:absolute; left:19%; top:107px; width:23; height:569px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=19 height=525 style='position:absolute; left:19%; top:89px; width:23; height:525px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=21 height=564 style='position:absolute; left:35%; top:158px; width:23; height:564px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=38 height=509 style='position:absolute; left:60%; top:5px; width:23; height:509px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=19 height=613 style='position:absolute; left:88%; top:36px; width:23; height:613px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=50 height=599 style='position:absolute; left:31%; top:48px; width:23; height:599px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=47 height=580 style='position:absolute; left:57%; top:186px; width:23; height:580px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=8 height=547 style='position:absolute; left:26%; top:2px; width:23; height:547px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=41 height=565 style='position:absolute; left:10%; top:186px; width:23; height:565px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=1 scrolldelay=10 height=670 style='position:absolute; left:56%; top:64px; width:23; height:670px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=1 scrolldelay=11 height=540 style='position:absolute; left:75%; top:46px; width:23; height:540px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=47 height=600 style='position:absolute; left:85%; top:2px; width:23; height:600px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=41 height=648 style='position:absolute; left:11%; top:78px; width:23; height:648px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=1 scrolldelay=14 height=566 style='position:absolute; left:51%; top:38px; width:23; height:566px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=7 height=543 style='position:absolute; left:88%; top:48px; width:23; height:543px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=31 height=518 style='position:absolute; left:93%; top:43px; width:23; height:518px;'><img src=http://dl9.glitter-graphics.net/pub/40/40019esh82nekfd.gif border=0></marquee>

Sorry, It didn't work for me.

Link to comment
2 hours ago, Jacobo2024 said:

Sorry, It didn't work for me.

I found the solution. Where it has the 30% I had to put a negative symbol before it like this -30% and to make it fall faster I increased it to 120% with the negative too like this -120%. Thank you for your time and for your awesome code.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.