Jump to content

Adding JS for interactive background gradient

Go to solution Solved by Beyondspace,

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!

Edited by jbyrnz
Link to comment
  • Solution

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>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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