Jump to content

Does Squarespace support Luxy Java Script?

Recommended Posts

Site URL: https://www.kevinwalton.ca

Hi, I was wondering if someone can help me with slowing down scrolling like they use on Webflow. 

I want my site to scroll like this: https://ceremonycoffee.com/

Researching what kind of scroll technique is used, I found that it is called "Luxy" javascript. I can't seem to figure out why it is not working on my site. 

<!-- before <body/> tag -->

<!-- Smooth scrolling -->

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

<script charset="utf-8">  
 var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
 if (!isMobile) {
      luxy.init({
        wrapper: '#luxy',
        wrapperSpeed: 0.065,
       
    });
 }
 </script>

Can someone help?

 

Thanks, 

Kevin

Link to comment
1 hour ago, KevinWalton said:

Site URL: https://www.kevinwalton.ca

Hi, I was wondering if someone can help me with slowing down scrolling like they use on Webflow. 

I want my site to scroll like this: https://ceremonycoffee.com/

Researching what kind of scroll technique is used, I found that it is called "Luxy" javascript. I can't seem to figure out why it is not working on my site. 


<!-- before <body/> tag -->

<!-- Smooth scrolling -->

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

<script charset="utf-8">  
 var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
 if (!isMobile) {
      luxy.init({
        wrapper: '#luxy',
        wrapperSpeed: 0.065,
       
    });
 }
 </script>

Can someone help?

 

Thanks, 

Kevin

in wrapper use "#siteWrapper" , since if the id of the page content not #luxy

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
4 minutes ago, KevinWalton said:

I tried it out, didn't work, thank you for trying! 

hmm, it works well when I place it on console panel, try wrap it inside jquery, also did you include luxy.js to the site? I did not see it on the source code?

$(document).ready(function() {
     luxy.init({
        wrapper: '#siteWrapper',
        wrapperSpeed: 0.065,
       
    });
});

image.thumb.png.e7bceb38875968a4602c5e257a7bd550.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
1 minute ago, KevinWalton said:

That worked! Thank you so much for your help! I didn't know you needed that line you posted! 

What does that line do If I may ask?

it include the luxy script, it's not a built-in feature

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

Okay so I have a new problem, I have an automatic background colour change on scroll that now doesn't work, here is my header code injection: 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div wm-plugin="background-change-all"></div>





<!-- before <body/> tag -->

<!-- Smooth scrolling -->

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

<script charset="utf-8">  
 var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
 if (!isMobile) {
      luxy.init({
        wrapper: '#siteWrapper',
        wrapperSpeed: 0.085,
       
    });
 }
 </script>


<script>
$(document).ready(function() {
     luxy.init({
        wrapper: '#siteWrapper',
        wrapperSpeed: 0.065,
       
    });
});
</script>

 

This is the footer 

<script src="https://assets.codepen.io/3198845/WMBackgroundScroll101820v1.0.7.min.js"></script>

These other lines of code make it so that when I scroll,  each page block adds a fade transition. 

Does that make sense?

Link to comment
1 minute ago, KevinWalton said:

Okay so I have a new problem, I have an automatic background colour change on scroll that now doesn't work, here is my header code injection: 


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div wm-plugin="background-change-all"></div>





<!-- before <body/> tag -->

<!-- Smooth scrolling -->

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

<script charset="utf-8">  
 var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
 if (!isMobile) {
      luxy.init({
        wrapper: '#siteWrapper',
        wrapperSpeed: 0.085,
       
    });
 }
 </script>


<script>
$(document).ready(function() {
     luxy.init({
        wrapper: '#siteWrapper',
        wrapperSpeed: 0.065,
       
    });
});
</script>

 

This is the footer 


<script src="https://assets.codepen.io/3198845/WMBackgroundScroll101820v1.0.7.min.js"></script>

These other lines of code make it so that when I scroll,  each page block adds a fade transition. 

Does that make sense?

You should as the author of the snippet you bought

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

sorry nevermind, I don't know how the background on scroll working so I can't help

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
  • 1 month later...
  • 3 months later...

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.