johnk10 Posted July 30, 2021 Share Posted July 30, 2021 Site URL: https://codepen.io/arickle/pen/XKjMZY Hello, so I thought I would be able to build a custom website with a few point and clicks but it turns out what I'm trying to do requires a bit more custom css which I'm very new to. I'm trying to add something like this custom background found here https://codepen.io/arickle/pen/XKjMZY to the first section of my home/landing page of my website. I've tried adding the following code into a code block on the section I want it on but nothing happens. What am I missing? Or is it not possible? Any help is much appreciated. Thanks in advance! <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> Link to comment
tuanphan Posted August 1, 2021 Share Posted August 1, 2021 Try this <!-- check the Comments for more info --> <div class="back-row-toggle splat-toggle"> <div class="rain front-row"></div> <div class="rain back-row"></div> <div class="toggles"> <div class="splat-toggle toggle active">SPLAT</div> <div class="back-row-toggle toggle active">BACK<br>ROW</div> <div class="single-toggle toggle">SINGLE</div> </div> </div> <style> .splat-toggle { 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; } .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; } .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; } .single-toggle .drop { display: none; } .single-toggle .drop:nth-child(10) { display: block; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <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); } $('.splat-toggle.toggle').on('click', function() { $('.splat-toggle').toggleClass('splat-toggle'); $('.splat-toggle.toggle').toggleClass('active'); makeItRain(); }); $('.back-row-toggle.toggle').on('click', function() { $('.splat-toggle').toggleClass('back-row-toggle'); $('.back-row-toggle.toggle').toggleClass('active'); makeItRain(); }); $('.single-toggle.toggle').on('click', function() { $('.splat-toggle').toggleClass('single-toggle'); $('.single-toggle.toggle').toggleClass('active'); makeItRain(); }); makeItRain(); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
johnk10 Posted August 1, 2021 Author Share Posted August 1, 2021 10 hours ago, tuanphan said: Try this <!-- check the Comments for more info --> <div class="back-row-toggle splat-toggle"> <div class="rain front-row"></div> <div class="rain back-row"></div> <div class="toggles"> <div class="splat-toggle toggle active">SPLAT</div> <div class="back-row-toggle toggle active">BACK<br>ROW</div> <div class="single-toggle toggle">SINGLE</div> </div> </div> <style> .splat-toggle { 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; } .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; } .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; } .single-toggle .drop { display: none; } .single-toggle .drop:nth-child(10) { display: block; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <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); } $('.splat-toggle.toggle').on('click', function() { $('.splat-toggle').toggleClass('splat-toggle'); $('.splat-toggle.toggle').toggleClass('active'); makeItRain(); }); $('.back-row-toggle.toggle').on('click', function() { $('.splat-toggle').toggleClass('back-row-toggle'); $('.back-row-toggle.toggle').toggleClass('active'); makeItRain(); }); $('.single-toggle.toggle').on('click', function() { $('.splat-toggle').toggleClass('single-toggle'); $('.single-toggle.toggle').toggleClass('active'); makeItRain(); }); makeItRain(); </script> Hi tuanphan, you are a genius - this works! Link to comment
johnk10 Posted August 1, 2021 Author Share Posted August 1, 2021 Hi tuanphan, can you do this one too? https://vincentgarreau.com/particles.js/#default Link to comment
tuanphan Posted August 3, 2021 Share Posted August 3, 2021 On 8/2/2021 at 12:52 AM, johnk10 said: Hi tuanphan, can you do this one too? https://vincentgarreau.com/particles.js/#default on Squarespace Customization Resource Group, There used to be a member sharing how to install this code. You try posting there. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.