Oliokd123

Hello, I would like the order of my shipping options changed so that my free UK shipping option appears first rather than my external UK option which is £17.50. Since that option appears first, people are being put off by the shipping fee. Is there a way to do it?

yes it is but it changes colours too soon , I want the section to change colour after 80% of it being scrolled not 50% so it flows better similar to the demo link provided . I also want it for multiple sections. When applying the colours also don't look right , they come across as muddy.

I want to create a scroll activated colour background for my website similar to the demo here (https://webdevtrick.com/javascript-change-background-color/?amp=1) how can I apply the code from this to my website?

Hi , how do I have it so section colour blends from one to another without a paid plugin , i've seen multiple ways but can't seem to implement them. this is my website https://oliknowles.com/services-3 Thanks in advance

Hi , Is this still possible to add to a Squarespace 7.1? in the github project do I need to seperate the html to javascript and css , I want to add a background colour change to 3 sections on my website is that possible using your code? Sorry I am still learning and want to learn coding

Is this scroll colour change with sticky images possible on Squarespace? I am wanting to replicate this on my site. Is this possible with css? Screen Recording 2024-02-13 at 22.47.28.mov https://www.tiltongroup.com/

Thank You ,I really appreciate it!

yes please!

Hi how can i change the colour of my text in the lists so they are 3 different colours ? This is the code I have and also for some reason the images arent working when you click on them , they should link to the links provided . thanks in advance! website is : https://www.oliknowles.com/servicessub?rq=service This is the code : /* Targeting specific list items within the section */ [data-section-id="65bb95226d34407ab7877411"] .list-item:nth-of-type(1) { background: #be4127 url('https://www.oliknowles.com/servicessub/brandidentity') center center no-repeat; background-size: cover; cursor: pointer; } [data-section-id="65bb95226d34407ab7877411"] .list-item:nth-of-type(2) { background: #4d6c18 url('https://www.oliknowles.com/servicessub/bespokeillustration') center center no-repeat; background-size: cover; cursor: pointer; } [data-section-id="65bb95226d34407ab7877411"] .list-item:nth-of-type(3) { background: #559b99 url('https://www.oliknowles.com/servicessub/weddingstationery') center center no-repeat; background-size: cover; cursor: pointer; }

Hi does anyone know how to create the effect of the stacking sections , I know they are sticky but how do I have it so the text increases and decreases etc? the section id is section[data-section-id="659ab97d45a83b75e2b50e14"] https://standoutsquare.space/ Screen Recording 2024-01-30 at 17.03.43.mov

How do I add a scroll triggered gallery like this ( https://codepen.io/cameronknight/pen/qBNvrRQ) onto my website using GSAP? How do I make it work? Thanks in advance

How can I have it so that when I hover over the different names in a portfolio hover section the text changes colour and goes to italic ? I want the colours to be for the following : Wedding Stationery #79c5cf , Bespoke Illustration #b9da5a and Brand Identity to be #fb8f73 Thanks in advance!

Yes of course it's https://www.oliknowles.com/blog it's the section under previous posts

is there a way of customising the tags in an archive for a blog so that they are different colours i.e Wedding Stationery blue , Brand Identity red etc?

how do I dynamically invert my logo and menu bar so that on darker backgrounds it inverts to white , the collection id is #collection-64f9b6cdca08bb7aeb28959f i've tried using css ; /* Initial style for the section to be inverted */ #collection-63f4ddb26d6f7d40320b67ac { background-color: white; /* Set the default background color */ transition: filter 0.3s ease; /* Add a smooth transition for the filter effect */ } /* Additional styling to customize the appearance of the inverted section */ #collection-63f4ddb26d6f7d40320b67ac.inverted { -webkit-filter: invert(100%); filter: invert(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } and javascriipt : // Function to check the darkness of a color function isDarkColor(hexColor) { const r = parseInt(hexColor.slice(1, 3), 16); const g = parseInt(hexColor.slice(3, 5), 16); const b = parseInt(hexColor.slice(5, 7), 16); const brightness = (r * 299 + g * 587 + b * 114) / 1000; return brightness < 128; } // Function to apply the inversion based on background color function applyInversion() { const sectionBelow = document.querySelector('.section-below'); // Replace with the actual class or ID of the section below const invertSection = document.querySelector('.invert-section'); if (sectionBelow) { const backgroundColor = getComputedStyle(sectionBelow).backgroundColor; const isSectionBelowDark = isDarkColor(backgroundColor); if (isSectionBelowDark) { invertSection.classList.add('inverted'); } else { invertSection.classList.remove('inverted'); } } } // Call the applyInversion function when the page loads and on window resize (in case the section size changes) window.addEventListener('load', applyInversion); window.addEventListener('resize', applyInversion);