Super simple snow

Developer
Daniel Murphy
Size
2,464 Kb
Views
22,264
  1. Super simple snow Previews
  2. Super simple snow HTML Codes
  3. Super simple snow CSS Codes
  4. Super simple snow JS Codes

How do I make an super simple snow?

Just a really simple script for generating snow! Runs smooth on desktop and mobile since it uses the CSS3 property "translate3D.". What is a super simple snow? How do you make a super simple snow? This script and codes were developed by Daniel Murphy on 16 September 2022, Friday.

Super simple snow Previews
IQ Test

Super simple snow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Super simple snow</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Super simple snow - Script Codes CSS Codes

html,body {margin:0;width:100%;height:100%;background:url(https://bit.ly/17FgLoO) bottom center;background-size:cover;}
@-webkit-keyframes snowLeft
{0% {opacity:0;}50% {opacity:1;}100% {opacity:0;-webkit-transform:translate3D(100px,1500px,0) rotate(250deg);}}
@-webkit-keyframes snowRight
{0% {opacity:0;}50% {opacity:1;}100% {opacity:0;-webkit-transform:translate3D(-100px,1500px,0) rotate(-500deg);}}
@-moz-keyframes snowLeft
{0% {opacity:0;}50% {opacity:1;}100% {opacity:0;-moz-transform:translate3D(100px,1500px,0) rotate(250deg);}}
@-moz-keyframes snowRight
{0% {opacity:0;}50% {opacity:1;}100% {opacity:0;-moz-transform:translate3D(-100px,1500px,0) rotate(-500deg);}}

Super simple snow - Script Codes JS Codes

/// FOR PLAYING WITH ///
var snowType = 'Skylar Snowflakes';
var snowParticles = 500;
var snowSize = 31;
////////////////////////
for (i=1;i<=snowParticles;i++) { $('body').append('<div class="snow">'+snowType+'</div>');
}
$('.snow').each(function() { var selectWind = Array('snowLeft','snowRight'); var wind = selectWind[Math.round(Math.random()*selectWind.length)]; var duration = (Math.random()*10)+20; var size = Math.round(Math.random()*snowSize)+8; var left = Math.round(Math.random()*100); var delay = Math.round(Math.random()*duration); var visibility = Math.round(Math.random()*10); $(this).css({ 'color':'rgba(255,255,255,.'+visibility+')', 'text-shadow':'0 0 10px rgba(255,255,255,.'+visibility+')', 'font-family':'"Times", serif', 'font-size':size, 'position':'fixed', 'z-index':'200', 'opacity':'0', '-webkit-animation':wind+' '+duration+'s infinite', '-webkit-animation-delay':delay+'s', '-moz-animation':wind+' '+duration+'s infinite', '-moz-animation-delay':delay+'s', 'left':left+'%', 'top':'0' });
});
Super simple snow - Script Codes
Super simple snow - Script Codes
Home Page Home
Developer Daniel Murphy
Username dsm
Uploaded September 16, 2022
Rating 3
Size 2,464 Kb
Views 22,264
Do you need developer help for Super simple snow?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Murphy (dsm) Script Codes
Name
A Pen by Daniel Murphy
Testing Buttons
Menu Item Limit
Adaptive Quiz
Flex Test
Video Hover CSS Only
College Counselor Finder with SVG Maps
For Freddy
US MAP SVG With Hover
Speed Reader
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!