Search the Community

Hi, Does anyone knows how to create a crossfade animation for two images? for example, i have to images, one of top of the other one and i need them to be like back and forth, like changing that 1 second one image is on top and the other second the second image is on top. I dont know i explained myself, if not please let me know so i can be more specific! Also, does anyone knows how i can create this slider effect to a gallery images? https://abdomohamed.com/ the one in the "boharat" section. Heres a video! Thank you in advanced!! Grabación de pantalla 2022-05-19 a la(s) 19.35.14.mov

Site URL: https://www.bowermagic.co.uk/ How can I adjust the timing of the appearance animation of some specific text? There are two lines of text which appear in succession using the default fade in animation. I'm looking to have the second line wait for a few seconds before appearing, although they're both overlaying the same picture. Is this possible?

Site URL: https://kknomics.squarespace.com/program I've used a Blog to create an achive for festival events in 2017-2021. I've added Squarewebsite's Universal Filter to be able to navigate between tags and categories. I want to publish future events as blog posts - for the festival that will occur in october 2022. Is it possible to overrun the Squarespace settings and allow a future date as "published date" (NOT scheduled) ? When I try to choose October 21st 2022, it automatically chooses today's date... I chose not to use Event page because the limit of 30 past events was too low. Does anybody know how this can be done? 🙌

Site URL: https://taranaomi.com/home Hi there, Looking to install githubs plugin for locomotive scroll. I tried to install the javascript and css but I'm likely putting it in the wrong places because when I go to edit the CSS properties nothing happens. If anyone has any idea what I need to do here it would be much appreciated. Here's a code pen version: https://codepen.io/dotpot420/pen/MWwWaaQ Github: https://github.com/locomotivemtl/locomotive-scroll End goal is something like this homepage but one image and no letter shuffle to the type centre: https://mathieulevesque.com/en Thanks so much

Site URL: https://www.visualmediachurch.com/testdesigner Hey, I am testing out img.ly image editor in my site. When it loads on the live page I cannot scroll. Any reason why? https://www.visualmediachurch.com/testdesigner

Site URL: http://www.tlastmarks.com Hi everyone! My client is looking to have a completely responsive/interactive rainbow on their website. Each 'color' of the rainbow corresponds to a different 'trait'. The client would like the rainbow to ideally have a hidden/reveal feature, in which hovering over the different colors would reveal their matching 'trait'. See below for a quick drawing of what they are looking for. I understand this would likely require java and/or jQuery which I know nothing about. To confirm, natural state would show no text, hover states would reveal different texts. Ex: when Red is hovered, the text for "kindness" appears, when Green is hovered, the text for "generosity" appears, etc. Hoping and praying someone can help me figure this out. @bangank36 @creedon

Site URL: https://www.ashtonography.com/ I have a simple slideshow on my site homepage. I have it set to autoplay, which is good - I want to cycle the images automatically. But, I recognize this can be annoying if the window is sitting half behind another window, etc, and it just goes and goes. Is it possible to add play and pause buttons so it'll still automatically cycle, but CAN be stopped if the user wants?

Hi all, I'm working on a website for an Amsterdam based real estate agent who would like to show real time reviews from an external housing platform on the website. The code I got from the platform is this: <script type="text/javascript" src="https://www.funda.nl/js/ifcom.js"></script> <script type="text/javascript"> // Initialize cross-iframe communication var ifcom = new IFCom('host', false); // Initialize frame ZoekWidget.init('https://www.funda.nl/beoordelingenwidget/61016/1/3=86A3AA;6=63/Verkoop'); </script> The widget should be shown at this page https://www.her-makelaardij.nl/beoordelingen in the black section between the three logo's (Funda, Google, Makelaar) and the pictures. Is it possible to put this on the website and if yes, what's the best way to do it? I don't have any experience with this. Thanks in advance! Alexandra Ps. Attached a screenshot of the actual platform page

Site URL: https://www.ssteart.com I have created a back to top button on my site using this code: While it works great in pretty much every way I found that when moving to another page the button is already there as soon as the new page loads (it should appear while scrolling down). If I start scrolling down and then up it starts behaving normally, but I would like to fix it so that when loading a page the button doesn't show up unless I scroll down a bit. Would that be possible? Thank you.

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

Is there a way to change an item's colours depending on light or dark background colours? Any item like a header, or nav. I was wondering how we can implement colour change depending on section backgrounds.For example, a fixed H1 text in the middle of the screen, how do we make the text change colour WHILST SCROLLING between light and dark background colors?What's the best way to do this?I was trying out with color-blend-mode:difference but the effects felt too much on the eyes.Thanks in advance! ❤️ ❤️

Site URL: https://www.waterdragonfabrics.com/ Hi folks, I hope you are all doing well! This might not be something that's generally posted here but I thought there are probably some talented people that could point me in the right directions. I'm looking to realize something, (with the help of an expert of course) that I don't really have any knowledge about. The project is planned for this page: https://www.waterdragonfabrics.com/ It is about creating an interactive chart that let's people choose and visualize various color combinations and clothing designs in some kind of interavtice chart. This is a tailor-shop for traditional Chinese martial arts clothing. We offer a variety of different designs (cuts), fabrics, and options for the trim (multi colored outfits). The customer can browse the shop and choose from a variety of examples. He then adds his preferences, fabric choices and variations. Some products have a pop-up form that shows up when they click on the "add to cart" button. This is used to fill in sadditional information. The customer submits his measurements after placing the order. You can see that this process is rather difficult and creates lots of friction in the checkout process. I am not sure if this is something that can be realized but I'm sure you will let me know. 😉 My plan is to create a drawing (probably a vector file?) with simple black lines for each upper garment. This means there will be a shirt with long sleeves, another drawing is the same shirt with long sleeves but different cuffs, then a short sleeve shirt etc. Each design will be a different variation. Sometimes the variation is only slightly different like the amount of buttons. This means there will be a good 20-30 drawings in total. The next step I am imagining is to link all these pictures to a text link in a chart. In other words, if the customer clicks on "Traditional shirt with long sleeves" the allocated drawing will show up. Up to this point I believe it's not too bad to realize. However, my next wish is as follows: I would love a feature that allows the customer to color different sections of the individual drawings. That means the section of a trim detail, for example the cuff, can be colored by simply choosing a color from a normal color palette. The goal is that the customer can visualize the color combination. Our goal is to make the internal processes easier and get rid of the friction in the checkout process. If we can somehow connect the choices of the customer, may it be a direct link to the shopping cart with allocated variants connected (to adjust the price according to the customers choices) or even simply to submit the choice via email or to download the choices for sending them to us manually, that would be great. We try to get the customer to make a purchase as quickly and easily as possible to remove the friction. The prices will change depending on the design variations and not the color variations. This means the filled-in color choices would not have to be linked to a different price, only the design option (that's allocated to a different drawing). We do have different prices depending on the fabrics, but I'm open to simplify for the sake of convenience for the customer. The more intuitive this chart can be, the better. The more we can link the customers' choices to different price selections the better. If we can somehow guide the customer directly to the shopping cart after selecting this would be great too. I understand that this requires a bunch of coding, possibly Javascript, html or even programming. If you think that squarespace is a bit limiting for creating something like this, we'd also have a separate web server that possibly works instead. We could somehow connect them. If there are any simplified solutions that have a similar effect, reducing friction and making it easier for the customer, I'm open to hear any suggestions. For us it would be very convenient if the customer somehow submits this drawing with his color choices because we'd be able to use it for processing the order with our tailor. So we'd save some time there, too. I will be able to provide all the drawings made via illustrator or photoshop. Please let me know your thoughts on this project. If you think I can begin creating the drawings (since these will be part of the project no matter what) what file would you make them as? Or am I imagining things too easy? Again sorry if this in the wrong place. Maybe someone knows someone that's really good at this stuff. I am looking forward to your reply.

I made a code in processing thats java. I'm having problems finding any resources or tutorials on how to put it into my site. If its even possible. I go into "Pages" > "Page Settings" > "Advanced" inject code here. It doesn't work. The code itself just shows up on the page. Another thing is that this code basically uses the mouse to control an image. So the image needs to be uploaded as well. Could I put my Java code into CSS? Again this is Java, not JavaScript. Any help would be appreciated. See code below. PImage img; void setup() { size(1440, 810); img = loadImage("test4.jpg"); img.resize (1440, 810); } void draw() { background(#FCEAEA); fill(0); noStroke(); float tiles = mouseX/2; float tileSize = width/tiles; translate(tileSize/2, tileSize/2); for (int x = 0; x < tiles; x++) { for (int y = 0; y < tiles; y++) { color c = img.get(int(x*tileSize), int(y*tileSize)); float size = map(brightness(c), 255, 0, 0, 3); ellipse(x*tileSize, y*tileSize, size, size); } } }

Site URL: https://www.ryanewanchuk.com/case-studies/fellowkidsblacklight Page Link: https://www.ryanewanchuk.com/case-studies/fellowkidsblacklight Password: SquarespaceDemoHelp! Hi, So I have been working on making my navigation change colour based on what the current visible page content background colour is. Surprisingly, I did manage to get it working for the most part, but I am having a few issues I am hoping to get help with. Problem/Goals 1. When the navigation reaches the first trigger, it changes as it should. However, when it reaches another area below that matches the same criteria, it does nothing. I would like to find a way to make the intersectional observer trigger on multiple sections, and ideally I want to be able to reorder sections and not have any issues. 2. When the navigation changes to black, and the menu is activated via the burger and then closed, the navigation returns to the original colour. I would like to keep the navigation colour the same after the menu is closed. 3. When the menu is opened, it only takes one colour theme. I would like the observer to change the menu overlay as well as the nav colour. This isn't as important as the other two. Here is the code I am currently using: <script> const sectionOne = document.querySelector(".black-section"); const sectionOneOptions = { rootMargin: '0px', threshold: .6 }; let prevYPosition = 0 let direction = 'up' const sectionOneObserver = new IntersectionObserver(function( entries, sectionOneObserver ) { entries.forEach(entry => { if (!entry.isIntersecting) { header.classList.add("white") } else { header.classList.remove("white") } }); }, sectionOneOptions); sectionOneObserver.observe(sectionOne); </script>

I'd like to diable the announment bar javascrip on mobile to increase the loading speed. I know how to do it with css (display:none). But it does not stop the script acutally.

Site URL: https://johnetterleebooks.com/ Does anyone know how I can make my header like the one in this website and do a video background? https://stevenkonkoly.com/

I am looking for a blog post counter for my website. The blog on my website focuses on cigar reviews and each new post is a new cigar review. I would visitors to know how many cigars have been reviewed on my website in total using a blog post counter or the likes. Is this possible?

Dear Community, I am in the process of making my website Multilingual. For the moment I have set up a test Squarespace website to experiment on, though the implementation on my live website will be the same. Website: http://lychee-sheep-23gt.squarespace.com/ Password: 123456789 Template: Brine I have followed the guide found here https://www.bradgood.net/articles/multi-language-content-on-any-squarespace-template with great success. However, I am stuck on the following: On the mobile / tablet view I would like the Language switcher to appear on the bottom of the mobile menu and not in the header... For reference here is the code I have used so far. CODE INJECTION FOOTER: CUSTOM CSS: Please take note: I am not a coder. I can understand instructions on code and modify them so they work for me.... If somebody could please help me with this, it would honestly make my day! Thanks Max

Hello! I've recently changed my site template to Tudor (Skye Family), and noticed that most of my blog pages don't have an H1 associated with them. For example, on this blog page: https://bitbloggist.com/video-game-blog-collection/top-10-switch-games-so-far The text "10 Best Switch Games Right Now" is automatically classified as an H2 instead of an H1. There's no way to change this in the style editor, so I believe I'll need some custom CSS to change this. Also, this change only needs to apply to individual blog posts, as I don't want my home page to have multiple H1's listed. Thanks in advance!

Site URL: https://www.smore.com/clippy-js Hi there - Can someone please give me a hand adding this to my site: https://www.smore.com/clippy-js. I'm looking for the 'Clippy' version to be added so when users first visit they are greeted with it - and then on every page after also. I am using Squarespace v7.1. Thanks!

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

Site URL: https://www.ssteart.com/presets/p/essential-preset-pack-by-ssteart I would like to remove the scrollbar that appears next to the previews in a product slideshow. Right now I have used this code on the product page, though that also removes the main page scrollbar. Is there a way to specifically target the product item?

Site URL: https://emu-orange-ea7f.squarespace.com/impact I'm trying to create an animated number counter. I've found some code on this forum (see below). It's working fine on desktop but isn't loading on mobile. It appears to be correctly written for ajax so I'm at a loss as to why it isn't working. Can anyone help? <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> var a = 0; $(window).load(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 3000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $(this).format({format:"#,###", locale:"uk"}); $this.text(this.countNum); } }); }); a = 1; } }); </script> <div id="counter"> <div class="sqs-col sqs-col-4 counter-value" data-count="30000" data-desc="Young people">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="80000" data-desc="Problems">0</div> <div class="sqs-col sqs-col-4 counter-value" data-count="250000" data-desc="Solutions">0</div> </div>

Site URL: http://www.sethgoodfellow.com/ Hi, I would like to add a looping typewriter typing effect that loops through a series of lines of text. A blinking cursor spelling out a line of text, deleting back over it, then typing the next line in a series. the password to my site: password example: https://www.innovativeink.ca/ I have found several forum queries that had some solutions on here already, but they do not seem to be working for Squarespace 7.1 which is what I am using to build this site. Does anyone know of a plugin for sale that offers this already coded with instructions for installation and modification? Thanks in advance!

Hello,I am using the jasper template. I am trying to get a background image behind my logo in my header. I want to add the shape in the photo behind the logo and navigation on the actual site. Any ideas?! thanks, Ashley