Adding JS for interactive background gradient

jbyrnz · November 12, 2020

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 November 12, 2020 by jbyrnz

Beyondspace · November 12, 2020

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>

jbyrnz · November 13, 2020

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?

Beyondspace · November 13, 2020

Remove !important in your css background

jbyrnz · November 13, 2020

27 minutes ago, bangank36 said:

Remove !important in your css background

Thank you so much!!!!! It's working now. 🙂

Adding JS for interactive background gradient

Recommended Posts

jbyrnz

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

jbyrnz

jbyrnz

Beyondspace

Posted Images

Beyondspace

Link to comment

jbyrnz

Link to comment

Beyondspace

Link to comment

jbyrnz

Link to comment

Create an account or sign in to comment

News

jbyrnz

jbyrnz

Beyondspace

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources