Posted by Animated CSS Rain for Your Den!

=πŸŽ— Austin πŸŽ—= (#43750)

Deathlord of the Jungle
View Forum Posts


Posted on
2020-07-30 17:28:31

====================
MY MASTER LIST OF ALL MY PUBLIC CODES FOR LIODEN
====================

As always, wishin' you broskis the best and hope you're doing well. This time I have some animated falling rain for your den!

In order to understand how to use the code, you'll need to follow the instructions in my Animated CSS & HTML Fireflies chatter post! The instructions on how to use the CSS & HTML code will be focused on the fireflies, but is also applicable to get an understanding on how to use the rain code.

For the rain specifically, simply follow the copy-paste instructions provided in the code itself, once you've read over the fireflies post.

If there's too much lag, removing some of the " <*div class="rain"><*/div> " sections in the HTML portion of the code will help remove some of the lag! If you don't have lag, feel free to add more of those rain divs to add more raindrops for better visuals!

The original source code, made by Jerry Low, can be found on CodePen BY CLICKING HERE!

RETAINING THE CREDIT ACKNOWLEDGING JERRY LOW IN THE CSS PORTION OF THE CODE IS MANDATORY! GIVE EM THE CREDIT GUYS!

The source code was discovered, and requested to be edited for lioden by Namira (#211580)!

CLICK HERE TO VIEW THE CSS & HTML CODE ON PASTEBIN

Post in this thread if you have any questions specifically geared towards the Rain animations.

Until next time!
~Austin



Hrt Icon 0 players like this post! Like?

Edited on 30/07/20 @ 17:38:11 by = Austin = [Clean 3-Ros Ferus] (#43750)

PinkishPeach (#142590)

Holy
View Forum Posts


Posted on
2020-07-30 22:26:57
So this is amazing but I'm still a bit confused about where I copy and paste the code!



Hrt Icon 0 players like this post! Like?

=πŸŽ— Austin πŸŽ—= (#43750)

Deathlord of the Jungle
View Forum Posts


Posted on
2020-07-31 15:02:54
I've kind of sprinkled some of this information in my post on how to add Animated CSS Fireflies for your den, but to keep things simple, I don't mind summarizing here as well.

In order to get the code to work, you need to "create" the raindrops, by coding into a document called a CSS document (short for Cascading Style Sheet). A CSS document is basically a file you create (or someone you commission creates) which gives instructions to a website. You write commands using code, in order to make a website page look a certain way or do something you want it to.

However CSS simply "creates" the raindrops. You use the HTML portion of your territory description to say "hey raindrops, show up on my screen!"

Therefore, it is simply not enough to post JUST the HTML code into your territory description, or JUST the CSS portions of the code into a CSS document. Doing just one and not both will confuse the Lioden website on what you're trying to do, and nothing will appear.

==========

The document uploaded to PasteBin has BOTH the CSS and HTML components. There will be instructions there on where to paste each portion of the code.

The HTML only portion will go into your territory description box, and an example of what that looks like is below. This section can be found near the bottom of your den page, and the code should go exactly where you link your CSS document.

The example shows my den with my fireflies code. The link to my CSS document, the <*link rel="stylesheet" > line of code, comes first (the exact link to my CSS has been deleted from this image). The code for my fireflies comes afterwards.

Kihgalv.png

The raindrops will have a similar component. The code will look different but ultimately the concepts and execution on how to use the code are similar.

==========

Dakota I looked at your den page, and it seems like you're using a pre-made CSS design made by Katie. If you're just copying the design link for her CSS document (the <*link rel="stylesheet" >), and you do not have access to the CSS document itself to paste the code inside, you will not be able to use the raindrops, unfortunately.

If you would like the raindrops, I suggest making your own CSS document using Katie's CSS Tutorial and Template, or commissioning someone to design a custom CSS design for your den, and telling them to add the raindrops.



Hrt Icon 0 players like this post! Like?


Edited on 31/07/20 @ 15:08:59 by = Austin = [Clean 3-Ros Ferus] (#43750)

PinkishPeach (#142590)

Holy
View Forum Posts


Posted on
2020-07-31 15:42:16
Awesome thanks!



Hrt Icon 0 players like this post! Like?







Memory Used: 626.23 KB - Queries: 2 - Query Time: 0.00081 - Total Time: 0.00414s