Jump to content

ClaraB

Circle Member
  • Posts

    12
  • Joined

  • Last visited

Everything posted by ClaraB

  1. Just came back to this and it looks like you've got an animation working! an interactive one, no less! Very cool
  2. Ah, the absolute positioning probably isn't getting applied in the right place. If you post a link to your site I may be able to help more
  3. Hi! I'd recommend using a video background (which is natively supported in squarespace) rather than a CSS-and-Javascript solution. You should be able to find a stock video of raindrops similar to this one. However! If you're certain this is what you want to embed, read on --- 1. Create a code block and put it in your desired section. The code needs to contain the html markup, the custom CSS, and the custom javascript. Something like this should do it, I think -- <div class="rain-section-background"> <div class="back-row-toggle"> <div class="rain front-row"></div> <div class="rain back-row"></div> </div> </div> <style> [data-section-id="the-squarespace-section-id"] { position: relative; } .rain-section-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 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 { z-index: 1; bottom: 60px; opacity: 0.5; } .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; } .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); } } </style> <script> 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); } makeItRain(); </script> (This is the same code from the codepen, but I removed the parts about the toggle buttons because I assume you don't want your end users deciding if they want to see splashes or not) Then, you'll need to find the section ID. Right click your section, go to Inspect, and scroll around until you see something called a <section>. There's going to be a lot of stuff in there. Basically you're looking for something that says <section class="..." ... data-section-id="609579ac16e9-for-example-0858af6cd450" ... > The number in those quotes is the one you're looking for. Go back to your code block and find the part where I entered "the-squarespace-section-id" and replace that with the number (with quotes). Don't change the brackets or anything else! This will probably work but without seeing your site I can't be certain. Good luck! And again: a video background will be much easier.
  4. In that case, you can adjust the code in the other direction! /* Lightbox opacity */ .gallery-lightbox-background { opacity: 1.0; } Hope that helps!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.