diff --git a/CSS Rain effect over the camera/index.html b/CSS Rain effect over the camera/index.html new file mode 100644 index 0000000..6c57b15 --- /dev/null +++ b/CSS Rain effect over the camera/index.html @@ -0,0 +1,9 @@ + +
+
+
+
SPLAT
+
BACK
ROW
+
SINGLE
+
+ diff --git a/CSS Rain effect over the camera/main.css b/CSS Rain effect over the camera/main.css new file mode 100644 index 0000000..84d5e80 --- /dev/null +++ b/CSS Rain effect over the camera/main.css @@ -0,0 +1,166 @@ +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; + overflow: hidden; + background: linear-gradient(to bottom, #202020, #111119); +} + +.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; +} diff --git a/CSS Rain effect over the camera/main.js b/CSS Rain effect over the camera/main.js new file mode 100644 index 0000000..f1cf73b --- /dev/null +++ b/CSS Rain effect over the camera/main.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 += '
'; + backDrops += '
'; + } + + $('.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(); diff --git a/CodePen Home CSS Raindrops (Animated)/index.html b/CodePen Home CSS Raindrops (Animated)/index.html new file mode 100644 index 0000000..9532718 --- /dev/null +++ b/CodePen Home CSS Raindrops (Animated)/index.html @@ -0,0 +1,16 @@ + + + Raindrops + + + + + +
+
+
+ +
+
+ + diff --git a/CodePen Home CSS Raindrops (Animated)/main.css b/CodePen Home CSS Raindrops (Animated)/main.css new file mode 100644 index 0000000..6ebbc99 --- /dev/null +++ b/CodePen Home CSS Raindrops (Animated)/main.css @@ -0,0 +1,166 @@ +@import 'lesshat'; + +@image: '//www.planwallpaper.com/static/images/Hawaii-Beach-Wallpaper-HD.jpg'; + +@width:100vw; +@height:100vh; + +@raindrops: 100; // How many drops +@brightness: 1.2; // Brightness of drop +@duration: 30; // Duration of raining loop + +@falling-animate: true; // Disable falling animation if you dont want +@falling-reflect: true; // More realistic, more laggy + + +.rd-container{ + width:@width; + height:@height; + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + margin:auto; + overflow:hidden; + transform:rotateY(0); +} +.rd-window{ + background:url(@image); + background-size:cover; + background-position:50%; + width:100%; + height:100%; + transform:rotateY(0); + transition:-webkit-filter 600ms; + .filter(blur(4px)); +} +.raindrops{ + width:@width; + height:@height; + position:absolute; + top:0; + left:0; + transform:rotateY(0); + transition:-webkit-filter 600ms; +} +.borders{ + position:absolute; + +} +@keyframes raindrop-fall{ + 0% { + opacity:0; + transform:rotate(180deg) scale(.2,.2) rotateY(0); + } + 100% { + opacity:1; + transform:rotate(180deg) scale(1,1) rotateY(0); + } +} +@keyframes raindrop-falling{ + 0%, 15% { + transform: translateY(0); + } + 30%, 45% { + transform: translate(20vh*0.3, -100vh*0.3); + & when (@falling-reflect = true){ + background-position-y: 30%; + } + } + + 60%, 70% { + transform: translate(20vh*0.6, -100vh*0.6); + & when (@falling-reflect = true){ + background-position-y: 60%; + } + } + 80%, 89% { + transform: translate(20vh*0.8, -100vh*0.8); + & when (@falling-reflect = true){ + background-position-y: 80%; + } + } + 100% { + transform: translate(20vh, -100vh); + & when (@falling-reflect = true){ + background-position-y: 100%; + } + } +} +@raindrop-fall-transition:.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); +.raindrop{ + position:absolute; + opacity:0; + animation:raindrop-fall @raindrop-fall-transition; + animation-fill-mode:forwards; + &:before, &:after{ + min-width: 5px; + min-height: 6px; + content: " "; + display: block; + position:absolute; + top: 0; left: 0; + border-radius: 100%; + } + &:before{ + box-shadow: 0.2px -1px 0px 1px rgba(50,50,50,0.6); + transform: scale(0.95, 1); + } + &:after{ + background:black; + background-image:url(@image); + background-size: @width*0.05 @height*0.05; + transition: background-size 1s; + opacity: .6; + .filter(brightness(@brightness)); + } +} + +.raindrop:hover:after{ + background-size:600%; +} + +.create-randoms(){ + @x:`Math.random()`; + @y:`Math.random()`; + @size:2+round(`Math.random()*11`); + @stretch:`0.2+Math.random()*20/100`; + @drop-height:@size*(1+@stretch); + @delay:round(`Math.random()*@{duration}`); + @transition:300ms; +} +.loop-raindrops(@counter) when (@counter > 0) { + .loop-raindrops((@counter - 1)); // next iteration + + body{ + .create-randoms(); + .raindrop:nth-child(@{counter}){ + left:@x*@width; + top:@y*@height; + animation-delay:@delay*1s; + &:before, + &:after{ + width:@size*0.2vw; + height:@size*(1+@stretch)*0.2vw; + max-width:@size*1px; + max-height:@size*(1+@stretch)*1px; + background-position: @x*100% @y*100%; + + & when (@falling-animate = true){ + animation: raindrop-falling 10s+(2/@size)*100s @delay+2s*(10/@size) infinite cubic-bezier(0.785, 0.135, 0.15, 0.86); + } + + } + } + } +} + +.loop-raindrops(@raindrops); + +.container .raindrops{ + .filter(blur(0px) brightness(1.3)); +} +.container .window{ + .filter(blur(4px)); +}