Announcement

Collapse
No announcement yet.

Very cool pure css snow background

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Very cool pure css snow background

    This is a very cool pure CSS animated snow background:

    https://codepen.io/NickyCDK/pen/AIonk

    I was hoping I could get this working with a custom vb5 style, but not sure how. When I swapped the "snow" div with vb-page-body it didn't work (probably because vb-page-body is not a div), so then I swapped it with "outer-wrapper". That did display snow, but it wasn't moving and it didn't extend down the entire page.

    Regardless, I thought this was really neat and thought I would share.

    #2
    Try these:

    1. Copy the CSS code from codepen and paste into css_additional template. Do not include the first CSS rule (body { background color: #333; } ).
    2. Change #snow back to #vb-page-body.
    3. Add this code in css_additional. You're basically moving the body background from the codepen to the html tag using your body background image. So their <div> is your <body> and their <body> is your <html>.

    Code:
    You need to be logged in to view the code. Login or Register now!
    4. Save the 3 background images on your server and then update the urls to point to your server.

    Code:
    You need to be logged in to view the code. Login or Register now!

    Comment


      #3
      Wow, I didn't expect help on this!

      Works awesome on my test theme! Currently it utilizes 100% of the screen, but not 100% of the page, so when you scroll down there is no snow. Is that an easy tweak?

      Comment


        #4
        Oooh, actually I think I might swap it with #header instead!

        Edit: Yes, using "#header" instead of vb-page-body is really nice on my site.

        Thanks Glenn!

        Comment

        Working...
        X