Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Does Squarespace support Luxy Java Script?


KevinWalton

Question

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

14 answers to this question

Recommended Posts

  • 0
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

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
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

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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
  • 0
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

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0

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

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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...