2 files changed, 199 insertions, 0 deletions
diff --git a/views/rain/rainscript.js b/views/rain/rainscript.js
new file mode 100644
index 0000000..1dabb23
--- /dev/null
+++ b/views/rain/rainscript.js
@@ -0,0 +1,44 @@
+var makeItRain = function() {
+    //clear out everything
+    $('.rain').empty();
+
+    var increment = 0;
+    var drops = "";
+    var backDrops = "";
+
+    while (increment < 100) {
+        //couple random numbers to use for various randomizations
+        //random number between 98 and 1
+        var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
+        //random number between 5 and 2
+        var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
+        //increment
+        increment += randoFiver;
+        //add in a new raindrop with various randomizations to certain CSS properties
+        drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
+        backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
+    }
+
+    $('.rain.front-row').append(drops);
+    $('.rain.back-row').append(backDrops);
+}
+
+$('.splat-toggle.toggle').on('click', function() {
+    $('body').toggleClass('splat-toggle');
+    $('.splat-toggle.toggle').toggleClass('active');
+    makeItRain();
+});
+
+$('.back-row-toggle.toggle').on('click', function() {
+    $('body').toggleClass('back-row-toggle');
+    $('.back-row-toggle.toggle').toggleClass('active');
+    makeItRain();
+});
+
+$('.single-toggle.toggle').on('click', function() {
+    $('body').toggleClass('single-toggle');
+    $('.single-toggle.toggle').toggleClass('active');
+    makeItRain();
+});
+
+makeItRain();
+\ No newline at end of file
diff --git a/views/rain/rainstyle.css b/views/rain/rainstyle.css
new file mode 100644
index 0000000..fef63cf
--- /dev/null
+++ b/views/rain/rainstyle.css
@@ -0,0 +1,155 @@
+.rain {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+
+.rain.back-row {
+    display: none;
+    z-index: 1;
+    bottom: 60px;
+    opacity: 0.5;
+}
+
+body.back-row-toggle .rain.back-row {
+    display: block;
+}
+
+.drop {
+    position: absolute;
+    bottom: 100%;
+    width: 15px;
+    height: 120px;
+    pointer-events: none;
+    animation: drop 0.5s linear infinite;
+}
+
+@keyframes drop {
+    0% {
+        transform: translateY(0vh);
+    }
+    75% {
+        transform: translateY(90vh);
+    }
+    100% {
+        transform: translateY(90vh);
+    }
+}
+
+.stem {
+    width: 1px;
+    height: 60%;
+    margin-left: 7px;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
+    animation: stem 0.5s linear infinite;
+}
+
+@keyframes stem {
+    0% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 1;
+    }
+    75% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+.splat {
+    width: 15px;
+    height: 10px;
+    border-top: 2px dotted rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    opacity: 1;
+    transform: scale(0);
+    animation: splat 0.5s linear infinite;
+    display: none;
+}
+
+body.splat-toggle .splat {
+    display: block;
+}
+
+@keyframes splat {
+    0% {
+        opacity: 1;
+        transform: scale(0);
+    }
+    80% {
+        opacity: 1;
+        transform: scale(0);
+    }
+    90% {
+        opacity: 0.5;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(1.5);
+    }
+}
+
+.toggles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+}
+
+.toggle {
+    position: absolute;
+    left: 20px;
+    width: 50px;
+    height: 50px;
+    line-height: 51px;
+    box-sizing: border-box;
+    text-align: center;
+    font-family: sans-serif;
+    font-size: 10px;
+    font-weight: bold;
+    background-color: rgba(255, 255, 255, 0.2);
+    color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.toggle:hover {
+    background-color: rgba(255, 255, 255, 0.25);
+}
+
+.toggle:active {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+.toggle.active {
+    background-color: rgba(255, 255, 255, 0.4);
+}
+
+.splat-toggle {
+    top: 20px;
+}
+
+.back-row-toggle {
+    top: 90px;
+    line-height: 12px;
+    padding-top: 14px;
+}
+
+.single-toggle {
+    top: 160px;
+}
+
+body.single-toggle .drop {
+    display: none;
+}
+
+body.single-toggle .drop:nth-child(10) {
+    display: block;
+}
+\ No newline at end of file