This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862 Add falling snow to any modern list layout! I'm using a plain list and black background here in the example to best show off the effect and for high GIF quality.  The code goes on the bottom of your list CSS. /* FALLING SNOW */
.list-container:after {
position: fixed;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/uVN2Nk8.png),
url(https://i.imgur.com/3d7VHiA.png),
url(https://i.imgur.com/s0pY1pb.png);
animation: SNOW 20s linear infinite;
z-index: 10000;
pointer-events: none !important;
}
@keyframes SNOW {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}Note: If you find you can't add any more extensions on the Takana Grid-style layouts: You ran out of room, which happens when you add many extensions, but to fix this you can delete everything between /*Original Layout*/ and {ADD NEW CODES UNDER HERE} and you'll have lots more room after that. Your layout should still work normally as long as your browser doesn't block imports and/or Onedrive (storage.live.com). Make sure you're using the latest version of the layout for this feature. Move snow behind the list Change the z index to something less than zero, like -5. [/quote] Speed or slow down the animation This is done with the 20s after animation. More than 20s will slow it down, and less than 15s will speed it up. Change snow direction This can be done with the background position codes, but is complicated and when not done right the animation will stutter. I'd suggest to experiment with the settings on your list in Inspect Element in Firefox: https://myanimelist.net/forum/?topicid=1780591 Change the snow particles You can change the particle images with the background image codes. 3-D Snow In this version, the fainter snow is farther back in the background, behind lists and renders. The brighter snow should be in front of everything. /* LAYERED FALLING SNOW */
.list-unit:before {
position: fixed;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/uVN2Nk8.png);
animation: SNOW 20s linear infinite;
z-index: 10000;
pointer-events: none !important;
}
.list-unit:after {
position: fixed;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/3d7VHiA.png), url(https://i.imgur.com/s0pY1pb.png);
animation: SNOW 20s linear infinite;
z-index: -10;
pointer-events: none !important;
}
@keyframes SNOW {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
If the animation isn't working right Your layout may already be using .list-container:after (the first part of the code under /* PARTICLES ANIMATION */) in your CSS which is conflicting with the animation you'd add from this page. You could try changing that .list-container:after selector to these selectors instead, and see if they don't conflict with the list. .list-container:before .list-unit:before .list-unit:after .header-title:before .header-title:after .status-menu-container:before .status-menu-container:after #copyright:before #copyright:after Hopefully one of those selectors won't be used and can be used for the animation. Other Animations Also check out the red particle and blossom animations! https://myanimelist.net/forum/?topicid=1911907  https://myanimelist.net/forum/?topicid=1911984  |
Shishio-kunFeb 21, 2023 10:07 AM
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2023 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
359 |
by CLModerno
»»
May 5, 7:50 PM |
|
» [CSS - MODERN] Add side renders to list layouts (including for each category!)Shishio-kun - May 15, 2021 |
3 |
by gwynsyl
»»
May 5, 1:41 PM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7819 |
by Nunphell
»»
May 5, 12:35 PM |
|
» [HALL OF LEGENDS] Hacker09, MyAnimeList's #1 coder!Shishio-kun - Dec 10, 2023 |
9 |
by hacker09
»»
May 2, 9:29 PM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
1 |
by Zelathis
»»
Apr 29, 7:49 AM |