Jump to content

Maddy123

Member
  • Posts

    2
  • Joined

  • Last visited

Everything posted by Maddy123

  1. Hi, sorry about the password issue, I have changed it to DrUmBeat250% Ideally, some code to make the home page carousel images transition with a fade or dissolve similar to the attached vid would be great 🙂 11.03.2023_13.12.27_REC.mp4
  2. Hi all, I'm currently completing a website for a client using Squarespace 7.1 and the Stanton template. The splash page is a carousel of images set to 1 image per column. I have used the following Page Header Code Injection to make the images display as a dynamic slideshow transitioning every 3 seconds: <script> (function(){ let playInBackend = true, timing = 3, section = '', direction = 1; //1 = forwards, 0 = backwards /*Do not Adjust below this line*/ function AutoScrollLayout(e){e=""==e?document.querySelector(".user-items-list-section"):document.querySelector(e);let t,n,o,i,c,r=!1,s=e.querySelectorAll('button[class*="__arrow-button"]');function d(){t=setInterval(u,n)}function u(){o=document.querySelector("body.sqs-edit-mode-active"),i=document.querySelector(".sqs-modal-lightbox-open"),r||o||i||!c||s[direction].click()}n=1e3*timing;if(document.addEventListener("visibilitychange",function(){r=!!document.hidden}),["mousedown","touchstart"].forEach(t=>{e.addEventListener(t,function(){r=!0})}),["mouseup","touchend"].forEach(n=>{e.addEventListener(n,function(){r=!1,clearInterval(t),d()})}),window.IntersectionObserver){new IntersectionObserver((e,t)=>{e.forEach(e=>{c=!!e.isIntersecting})},{rootMargin:"-75px 0px -75px 0px"}).observe(e)}s[direction]&&d()}window.addEventListener("load",function(){let e=new Array;e.push(section),section.includes(",")&&(e=section.split(",")),e.forEach(e=>{(window.top==window.self||window.top!==window.self&&playInBackend)&&new AutoScrollLayout(e)})}); }()); </script> However now I am wondering if anyone knows a way to edit the transition style/ animation using CSS? Currently the images scroll between each other very quickly and it is quite jarring. Ideally I would like one image to fade out and into the next one for a more gradual transition. If anyone has knowledge of how to do this it would be so appreciated! My site url: jeremy-morgan.co.uk (custom domain) jeremy-morgan.squarespace.com (squarespace built-in domain) Password: ShowMe250% Thanks in advance!
×
×
  • 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.