Jump to content

Adding JS for interactive background gradient

Recommended Posts

Site URL: https://dandelion-prism-pkyc.squarespace.com

Site password: 1234

Hi! I'm very new to Squarespace here and have an empty site at the moment. I wanted to add a gradient background to my site that moves with cursor position and I have a head start here. The JS I'm using is from this codepen: https://codepen.io/lsammarco/pen/waMpJw and please ignore the loud colors since this is just a test! 🙂 

This is the code that I injected into the header of my home page, and I can see the radial gradient is working, but not the JS functions. When I inspected the page, I'm getting an '$ is not defined' error even though I linked the JQuery library in my html head. I'm not sure if my syntax is correct here because I'm not used to writing JS and CSS within an html file.

<html>
  <head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  </head>

  <body>
    <style>
      .site-wrapper {
        background: radial-gradient(at center, #fffb32, #77ffcf)!important;
  	  }

      .page-section, .section-background {
        background: transparent!important;
      }
    </style>

    <script type="text/javascript">
      $(document).ready();

      $(document).mousemove(function(event) {
        windowWidth = $(window).width();
        windowHeight = $(window).height();

        mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
        mouseYpercentage = Math.round(event.pageY / windowHeight * 100);

        $('.site-wrapper').css('background', 'radial-gradient(at ' + mouseXpercentage + '% ' + mouseYpercentage + '%, #fffb32, #77ffcf)');
      });
      
    </script>

  </body>
</html>

Thank you and let me know if you have any suggestions!

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

The correct script should be

<script type="text/javascript">
      $(document).ready(function() {
      	$(document).mousemove(function(event) {
            windowWidth = $(window).width();
            windowHeight = $(window).height();

            mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
            mouseYpercentage = Math.round(event.pageY / windowHeight * 100);

            $('.site-wrapper').css('background', 'radial-gradient(at ' + mouseXpercentage + '% ' + mouseYpercentage + '%, #fffb32, #77ffcf)');
          });
      });
</script>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
21 hours ago, bangank36 said:

The correct script should be


<script type="text/javascript">
      $(document).ready(function() {
      	$(document).mousemove(function(event) {
            windowWidth = $(window).width();
            windowHeight = $(window).height();

            mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
            mouseYpercentage = Math.round(event.pageY / windowHeight * 100);

            $('.site-wrapper').css('background', 'radial-gradient(at ' + mouseXpercentage + '% ' + mouseYpercentage + '%, #fffb32, #77ffcf)');
          });
      });
</script>

 

Thank you for your help! This removed all my console errors, but my JS code is still not working at all? Wondering if you have any ideas for why that might be?

Link to comment

Remove !important in your css background

image.png.0b0e3f27efa6c48e2a0070f7afe52af3.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.