Jump to content

KevinWalton

Circle Member
  • Posts

    29
  • Joined

  • Last visited

Everything posted by KevinWalton

  1. This worked! Thank you SO MUCH. Seriously I cannot do this without you.
  2. I'm sorry I should of clarified, I was wondering if I could disable LUXY.JS on mobile, basically the smooth scroll only works on desktop, but on mobile it is completely turned off so that it's the normal scrolling. I have played with some code snippets but I cannot figure it out
  3. That worked perfectly. Thank you. Do you think you can help disable it on mobile? So far this JS is not working <!-- Disable mobile: WORKING ON --> <script charset="utf-8"> var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); if (!isMobile) { luxy.init({ wrapper: 'article', }); } </script>
  4. Website: https://kevinwalton-portfolio-2023.squarespace.com/about Password: 1 Hi guys, Can anyone help out with my problem I am solving? On my About Page, I have added a script called Luxy JS. This makes the web page scroll slower. The only problem, is that it doesn't show the footer. The reason for that is because the Footer HTML block is not located in the one I have Luxy JS synced to, which is called Article. What I need to do is move the HTML Footer into Article using some kind of JS. Can someone help? Below is a screenshot of what I am looking for Here is the Luxy JS Code below, and is only located in the About page of the site above: <script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script> <script> $(document).ready(function() { luxy.init({ wrapper: 'article', wrapperSpeed: 0.045, }); }); </script>
  5. THANK YOU. This works! Seriously I can't thank you guys enough. I have been trying to figure this out for over 2 years. Thank you so much jaeveedee and tuanphan
  6. Sorry my bad, I was doing some editing. The code originally posted is now back on the site
  7. Website is https://kevinwalton-portfolio-2023.squarespace.com Password is: 1
  8. Doesn't seem to work, can you help me understand what to do with this code you have shared? Thank you for responding
  9. Hello, I am trying to code the header to be mix blend mode. I have found a way to do so, but it effects the hamburger menu as well. I want to remove the mix blend mode on the hamburger menu when it is opened. And when it is closed, mix blend mode will enable again. I am also interested in any other ways to customize specific target elements like the header-title-text to be mix blend mode, but I cannot figure it out. I have been trying to accomplish this for 2 years and I am starting to get tired of trying. Can anyone help me? Code below of what I have so far <script> function toggleheaderburger() { const header = document.getElementById('header'); const headerburger = document.getElementById('header-burger'); const headerburgerbtn = document.getElementById('header-burger-btn'); if (headerburgerbtn.classList.contains('burger--active')) { // Hamburger menu is opened, set blend mode to "normal" header.style.mixBlendMode = 'normal'; headerburgerbtn.classList.remove('burger--active'); headerburger.classList.remove('header-burger'); } else { // Hamburger menu is closed, set blend mode to "difference" header.style.mixBlendMode = 'difference'; headerburgerbtn.classList.add('burger--active'); headerburger.classList.add('header-burger'); } } </script>
  10. Website is https://kw-aurora.squarespace.com/about-copy Password is "1" I am looking to get the effect on all image blocks, when scrolling, the images follow you as you scroll up and down in a 3D effect. There is a way to do it in CSS but my way doesn't work on Chrome. Let me know if you have any questions
  11. Hi, Can anyone help me add this CSS to my images in Squarespace? I've been doing this for 4 hours straight with no luck. i am looking to do this: https://codepen.io/alvarotrigo/pen/OJxOrOg Thanks again.
  12. No sure what you mean, the question is up top. I do not know how to install Butter Js, I am looking to get a really nice smooth scroll
  13. Site URL: https://www.kevinwalton.ca Hi, I was wondering if someone can help me work Butter.js on my site. I have tried everything I can but I can't do it. Here is the link to the Js: https://www.cssscript.com/smooth-momentum-scrolling-butter/ Thanks, Kevin W
  14. Blank template. Researched a lot on Design and found my style
  15. Site URL: https://www.kevinwalton.ca Need help coding this to my website. I have been trying for 6 hours but I cannot figure this out. Trying to add this to photos with the class: .sqs-block-image https://codepen.io/fusco/pen/IfsAa @import url(https://fonts.googleapis.com/css?family=Montserrat:700); body{ text-align:center; padding:0; margin:0; font-family: 'Montserrat', sans-serif; background-color:#111; } .parallax { padding:0px; perspective: 1px; height: 100vh; font-size:40px; overflow-x: hidden; overflow-y: auto; -webkit-perspective: 1px; perspective: 1px; } .content{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity:.7; } .layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 100vh 0; } .base { transform: translateZ(-2px) scale(3); color:#FFF; } .closer { transform: translateZ(-1px) scale(2); font-size:300%; color:#BF55EC; } .closest { transform: translateZ(0); color:#19B5FE; font-size:700%; }
  16. Site URL: https://www.kevinwalton.ca Hi There! Finally got the chance to publish my redesigned website! See what you think, I am always looking to improve my skills! - Kevin W
  17. Yes @Winther I got the chance to figure it out but unfortunately it messed up with another piece of Javascript that I already had on my site so I had to remove it. Thanks for the update!
  18. Site URL: https://lily-oboe-g479.squarespace.com Password is "1" Hi, I have been working on this for over 6 hours and I cannot figure out how to add Parralaxing to my site. I want to mainly add it to parallax images when you scroll, I just want to figure out how to add it to image blocks but I don't know where to put the ID and the Class. Here is the code from this site: https://codepen.io/smlparry/pen/JzGELL HTML <div class="wrapper"> <div class="parallax-container"> <div class="background"> <img class="background__image" src="https://s3-ap-southeast-2.amazonaws.com/daily-fire-assets/codepen-assets/building.jpg" /> </div> <div class="foreground"> <div class="foreground__content"> <h1>Oooo, parallax</h1> </div> </div> </div> </div> CSS /* layout */ .wrapper { display: flex; justify-content: center; align-items: center; height: 420px; } /* Parallax Styles */ .parallax-container { position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; perspective: 8px; perspective-origin: 0%; display: flex; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(0px); } .foreground { margin-top: auto; margin-bottom: 50px; transform-origin: 0; transform: translateZ(3px) scale(0.625); /* Uncomment the code below to see the difference the scale property makes! */ /* transform: translateZ(3px); */ /* transform: translateZ(0) scale(1); */ } .foreground h1 { font-size: 36px; }
  19. Site URL: https://lily-oboe-g479.squarespace.com/ Password is "1" Hi, I have no idea how to install Rolly.js to my site. I want to have smooth scrolling but I know nothing of javascript. Here is the website where you install it: https://rolly.maj.digital/ Here is where you install it: https://mickaelchanrion.github.io/rolly/guide/ Someone please help me Thanks, - Kevin
  20. Site URL: https://sponge-lychee-awaf.squarespace.com password is "1" I was wondering if someone can help me install Page transitions to my site? I don't know how to do it with Javascript. Here is a link of the code that I want to install. https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ I am mainly looking at the "DIFFERENT EASING" page transitions. Thanks again! - Kevin W
  21. Site URL: https://sponge-lychee-awaf.squarespace.com Password is "1" I am having problems with Javascript. I don't know how to code in Java script so I was wondering if anyone can help me. I have a java script code for Luxy scrolling for smoother scrolling like Webflow, and I also have a code that works when scrolling on a page, the background colours fade together. For some reason, they don't like one another. The fading when scrolling no longer works and removes my background. Here is my code: Background change colour when scrolling: Header <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div wm-plugin="background-change-all"></div> Footer <script src="https://assets.codepen.io/3198845/WMBackgroundScroll101820v1.0.7.min.js"></script> Luxy javascript Header <!-- 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', }); } </script> <script> $(document).ready(function() { luxy.init({ wrapper: '#siteWrapper', wrapperSpeed: 0.085, }); }); </script>
  22. 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?
  23. 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?
×
×
  • 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.