Jump to content

johnk10

Member
 View Profile  See their activity

  • Posts

    17

  • Joined

  • Last visited

 Content Type 

Posts posted by johnk10

    How to add this custom background to the first section of a home page?

    in Customize with code

    Posted

    13 minutes ago, bangank36 said:

    Copy this into Page header injection 

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script><script src="https://threejs.org/examples/js/libs/stats.min.js"></script>      
<style>
  #particles-js{ --particle-background: #ccc;position:absolute; width: 100%; height: 100%; background-color: var(--particle-background); background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } 
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var firstSection =  document.querySelector(".homepage #page section:first-child .section-background");
    if (firstSection) { firstSection.id = "particles-js" };
    /* Generated code from particle website */
    particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
  });
</script>

    Find and change the value of css variable particle background as you wish

    --particle-background: #ccc;

    Hi bangank36, when I copy and paste this into the page header injection, nothing shows up still. Do I add a code block or do anything else? Thanks for your help.

    Cannot get Codepen code to work. Please help.

    in Customize with code

    Posted · Edited by johnk10

    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!

    JS code works on 7.0 but not for 7.1 - how can I make it work on 7.1?

    in Customize with code

    Posted

    51 minutes ago, bangank36 said:

    On this line you are targeting the #home section id, on 7.1 there is no such id name, kindly use this tool to identify your section id 

    particlesJS("home"

    Chrome Web Store - Extensions (google.com)

    Also what is the reference 7.0 and 7.1 page you are working on?

    I tried it with the section id but it still did not work. The reference 7.0 was from a comment someone made on https://www.minimist.ca/articles/particlesjs-on-squarespace saying that it does not work on 7.1.

    Is it possible? I tried with the change you suggested but it still didn't work.

    JS code works on 7.0 but not for 7.1 - how can I make it work on 7.1?

    in Customize with code

    Posted

    Site URL: https://vincentgarreau.com/particles.js/#snow

    Hello, the following code works for a cool snow effect in 7.0 but not 7.1. Does anyone know how to make it work for 7.1? I'm trying to have this on the first section of my home page. For reference, the code can be found here (click on "download current config (json)" to access the code file): https://vincentgarreau.com/particles.js/#snow 

    And the walkthrough instructions can be found here: https://www.minimist.ca/articles/particlesjs-on-squarespace

    It works on 7.0 but not on 7.1. What is needed to make it work on 7.1? 

    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    particlesJS("home", particlesJSConfig);
    setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 100);
  });
</script>

<style>
  .particles-js-canvas-el {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
</style>
<script>
  var particlesJSConfig =
      
{
  "particles": {
    "number": {
      "value": 400,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#fff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 500,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "bottom",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.5
        }
      },
      "bubble": {
        "distance": 400,
        "size": 4,
        "duration": 0.3,
        "opacity": 1,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

</script>

    Kind regards,
    John

    How to add Codepen background custom css to Squarespace home page?

    in Customize with code

    Posted

    20 hours ago, Wolfsilon said:

    Hello,

    This pen uses two different "preprocessors" that probably prevent you from getting a working version of it on your website. The two being used here are Haml and CSS Sass. Codepen is great for building pens that work within the online environment but requires a high learning curve for transitioning them to other websites, especially to Squarespace. You can try converting these two formats to standard HTML and CSS using online tools but you may find that the animations no longer work.  Also, embedded within this Pen is a plugin script called "modernizr", be sure to include plugin that after you've converted the pen.

    In the Custom CSS menu for Squarespace, you cannot use "<style>" tags in the manner that you mentioned. You don't need style tags when writing CSS in the Custom CSS tab. Instead, use the Block Identifier extension for Mozilla or Chrome to target the elements you want to apply custom CSS to.

    So is it possible? How would I get started? Sorry, just not sure what to do here.

    How to add custom animated background with css?

    in Customize with code

    Posted

    Site URL: https://codepen.io/Suburbanno/pen/OXZrvw

    Hello, I'm having trouble customizing the background of a section on my website. I am trying to use the css code from here: https://codepen.io/Suburbanno/pen/OXZrvw and here: https://codepen.io/arickle/pen/XKjMZY but whenever I add it to a code block, it just displays the actual code. I don't understand why it's not working when it's all css code.

    Also, if I could reverse the direction of the particles to fall down instead of up (like it's raining stars), that would be great too.

    Please help.

    Thanks.

    Cannot get Codepen code to work. Please help.

    in Customize with code

    Posted

    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>

     

    How to add Codepen background custom css to Squarespace home page?

    in Customize with code

    Posted · Edited by johnk10

    Site URL: https://codepen.io/saransh/pen/BKJun

    Hello, I want to add this background to the first section of any page: https://codepen.io/saransh/pen/BKJun 

    I also would like to reverse the particle direction to go down instead of up. Is there a way to do this?

    I've tried to create a code block on the home page with the HTML code and then in the Custom CSS part, I would wrap the CSS code in <style> </style> but I get nothing. 

    I'm very new to web development. I thought I could just build a custom website with a few point and clicks 😔

    Any help is much appreciated.

    Thanks!

    How to add custom animated background to specific section in Squarespace?

    in Customize with code

    Posted

    9 minutes ago, ClaraB said:

    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.

    Thanks, but when input your code into a code block, it just shows a thick black line in the code block. I tried making 3 code blocks - 1 for HTML, 1 for CSS, and 1 for JS but it still didn't work. Am I missing something?  

    How to add custom animated background to specific section in Squarespace?

    in Customize with code

    Posted · Edited by johnk10

    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. Is it possible? If so, how do I do it? I've tried copy and pasting the code inside <style> </style> in the custom css but nothing happens. I've also tried inserting it into a code block on the specific section but again nothing.

    Any help is much appreciated. Thanks in advance!

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources