BareCreative

I am wondering if anyone can help, I am wanting to make an small image block (which is a basic shape, a triangle ect) grow and shrink or scale up and down as you scroll down the page. I know there is the plugin available through squarekicker (https://squarekicker.com/blog/scrolling-effects-for-squarespace#:~:text=SquareKicker Scroll Effects enables you,and blur to any block.) but i didnt know if anyone can help me with the code to do it myself - I have got this far but not working correctly <script> document.addEventListener("DOMContentLoaded", function () { const block = document.getElementById("block-bc86dd26121a31bdf991"); // Define the initial scale factor for the original size let scale = 1.0; // Start at the original size // Set the threshold position where the block starts shrinking const thresholdPosition = block.getBoundingClientRect().top + window.innerHeight / 2; // Set up an event listener for the scroll event window.addEventListener("scroll", function () { const scrollPosition = window.scrollY; if (scrollPosition > thresholdPosition) { // Scrolling down - Shrink the block scale = 1.0 - (scrollPosition - thresholdPosition) * 0.001; // Adjust the scaling factor as needed } else { // Scrolling up or before the threshold - Keep it at the original size scale = 1.0; // Original size } // Ensure that the scale doesn't go below 0.1 (10%) scale = Math.max(scale, 0.1); // Apply the scale transformation to the block block.style.transform = `scale(${scale})`; }); }); </script>

Hi, I am not sure how to explain this so probably easier to send a link to the site I have got the inspiration. Is it possible to get items to move independently as in website shown - which then line up along-side one another like in brand name on this site - https://quamarquitectura.com/ I have looked at the developer tools on the site and seen the transition CSS (it is a Spanish site) which seems to be a large part of the code to enable this to work transition: top 1s cubic-bezier(.68,0,.45,.85),left 1s cubic-bezier(.68,0,.45,.85),width 1s cubic-bezier(.68,0,.45,.85),height 1s cubic-bezier(.68,0,.45,.85); Cheers for any help!

@Beyondspace Thanks for having a quick look, but sort of but not really, have managed a small work around but very messy and causes issues on smaller screens the code i placed in was - section[data-section-id="6373c8abf1b4e0080c28a194"]{ margin-bottom: -0.25%; } but I would like something which meant it would scale and keep the image tight against the following section

I am trying to remove this very small amount of background showing between my sections on my site which is empathized when scaled smaller. (see attached screen shot) I am trying to find a way to remove this gap. CSS to make the image full bleed height? OR second option just to remove the gap at the bottom so the two sections can fit directly against one another? Just for understanding I have code to move the header navigation below the 2nd section and have the gallery in the header section URL- https://www.barestudio.co.uk/ password - testsite

managed to solve this through - (code below) - anyone see any issues with this? ALSO Could anyone help with being able to enable 'scroll back' as everytime i enable it through the pre-header settings - it causes the code to break? <style> @media screen and (min-width: 768px) { #header { position: sticky; top: 0; display: none; z-index: 10000; } main .page-section:nth-child(2) + #header { display: block; } </style> <script> document.addEventListener("DOMContentLoaded",function() { const header = document.getElementById('header'); const firstSection = document.querySelector('.page-section:nth-child(2)'); firstSection.after(header); }); </script>

I have tried using this change to the code - (replacing 'first-child to 'nth-child(2) Which has worked but has caused the section section to have strange spacing and also lost the dynamic movement within the header navigation <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script> <script> document.addEventListener("DOMContentLoaded",function() { const header = document.getElementById('header'); const firstSection = document.querySelector('.page-section:nth-child(2)'); firstSection.after(header); }); </script> <style> @media screen and (min-width: 768px) { #header { position: sticky; top: 0; display: none; } main .page-section:nth-child(2) + #header { display: block; } main .page-section:nth-child(2) { min-height: calc(100vh - 93px)!important; } } </style>

I was wondering if anyone can help, I have found and used this code from @tuanphan which was incredible, however I am looking to put the navigation bar below the 'second section' of the homepage (while keeping the dynamic and re-appear on scroll back properties) Is this possible? this is the code found from @tuanphan <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script> <script> document.addEventListener("DOMContentLoaded",function() { const header = document.getElementById('header'); const firstSection = document.querySelector('.page-section:first-child'); firstSection.after(header); }); </script> <style> @media screen and (min-width: 768px) { #header { position: sticky; top: 0; display: none; } main .page-section:first-child + #header { display: block; } main .page-section:first-child { min-height: calc(100vh - 93px)!important; } } </style>

Hello, I am wondering if anyone can point me in the right direction, currently not started the build on the site yet but the client has seen this action on the site - https://forner.studio/ Where the text is sticky on the right hand side while scrolling through images on the left, which is fine as I think I have seen either a plugin or custom code enabling sticky sections in vertical scroll. The code I would be trying to work out would be how to have the individual word within the text also change depending on scrolling height? The site I am referencing is above and below is a screen shot of the section I was referring too.

Also It would need to be responsive for mobile, so all images would need to be able to stack without big gaps between.

Hi, I was wondering if anyone could help? Trying to create staggered image blocks (see attached) is this possible? Also would need them to be clickable/link to other pages on the site Cheers, Mike