Let it Rain

Developer
Matt Edwards
Size
2,746 Kb
Views
28,336
  1. Let it Rain Previews
  2. Let it Rain HTML Codes
  3. Let it Rain CSS Codes
  4. Let it Rain JS Codes

How do I make an let it rain?

An interactive rain effect using CSS animation to make it rain and jQuery to have the mouse alter the angle of rain. What is a let it rain? How do you make a let it rain? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.

Let it Rain Previews
IQ Test

Let it Rain - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Let it Rain</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="raining"> <div class="logo"></div> <div class="rain"></div> <div class="mask"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Let it Rain - Script Codes CSS Codes

body { background: #f1a213; padding-bottom: 900px;
}
@-webkit-keyframes makeItRain { from { background-position: 0px 0px; } to { background-position: 0px 1027px; }
}
.raining { position: relative; height: 365px; width: 960px; display: block; margin: 0 auto; overflow: hidden;
}
.logo { background: url(https://dl.dropboxusercontent.com/u/1488103/itsraining/header-bottom.png) no-repeat; position: absolute; bottom: 0px; top: 1px; right: 82px; left: 82px;
}
.rain { background: url(https://dl.dropboxusercontent.com/u/1488103/itsraining/rain.png); position: absolute; top: -100%; bottom: -100%; right: -40%; left: -40%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 3s; transition: all 3s; -webkit-animation: makeItRain 3s linear infinite;
}
.mask { background: url(https://dl.dropboxusercontent.com/u/1488103/itsraining/header-top.png) no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; right: 0; left: 0;
}

Let it Rain - Script Codes JS Codes

$(document).ready(function(){ $('body').mousemove(function(e){	var width = $(document).width(); var relativeXPosition = (e.pageX);	var position = ( ( ( ( ( relativeXPosition / width ) * 100 ) / 3 ) + 30 ) * -1 );	position = Math.round(position);	position = position+'deg';	$('.rain').css('transform', 'rotate(' + position + ')'); });
});
Let it Rain - Script Codes
Let it Rain - Script Codes
Home Page Home
Developer Matt Edwards
Username mtedwards
Uploaded August 12, 2022
Rating 4
Size 2,746 Kb
Views 28,336
Do you need developer help for Let it Rain?

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!

Matt Edwards (mtedwards) Script Codes
Name
JQuery .show .hide menu
JQuery featured gallery
Basic jQuery Filter list
Basic jQuery Tabs
Responsive layout with Fixed width Sidebar
AussieTheatre Logo
Angular Instagram test
JQuery YouTube Playlist
Quiz
Css Skew background for triangular overlay
Create amazing web content 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!