Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'parallax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://raspberry-ladybug-nhm8.squarespace.com/config/pages Hello, I'm trying to figure out if there is a way to resize some of the photos for the mobile version and tablet. My homepage looks terrible on these two versions. and the flower doesn't look so great either. the images are too cropped. How can i have a smaller version of the images that fits fully Thank you.
  2. Site URL: https://circlenewlanguage.com/ Hello, I know this is an on-going problem that has not been properly fixed in years... But I'd like to know, if by any chance, some has discovered how to fix this problem with the choppy parallax thing that takes place when the site is viewed on a mobile device or tablet. (I'm using SONORA Template btw, 7.0) OR, if there's no way around this, I'd like to know if you could tell me how I can disable this effect on mobile devices only. Thanks in advance!
  3. Site URL: http://www.allkings.org We had been successfully using the code shared here in this tutorial: https://www.launchthedamnthing.com/blog/use-parallax-in-squarespace-71 Until last weekend, we hadn't made any changes to the site and suddenly the parallax is off, and the layers are overlapping. I've disabled the script for now, but wondering if there may have been an update to 7.1 that would have changed things? We're still on that same version, and the tutorial is there to match it, but the problem is there.
  4. So I've asked the "Customer Care" team a few times about this issue. Site scrolls fine on desktop but on mobile it is choppy and jumps up and down as you go by different content. I've tried experimenting with parallax content on and off and other things, but it still happens. And quite frankly, just turning off parallax wouldn't be a "solution" really. So the answer I always get is, "We're aware of this, but no ETA on a fix." That's just not acceptable. So I'm posting this to see if anyone has had any success with any hack to improve how jumpy things are on mobile. We predominantly use Sonora and Mojave templates. Perhaps it isn't as bad on some templates? Thanks.
  5. Site URL: https://thecreativeinka.com/branding-2 After hours of searching for an answer, I haven't found it. Hope you all can help! I've been using plenty of Custom CSS code snippets on my site revamp on my Brine template 7.0, and on this one specific page, I have no clue where I possibly broke the code. I have a feeling it's in the #cta-button custom code, but I have no clue what part of it - it LOOKS right to me. The first attached image is where the problem lies I think. This whole index-page is supposed to be dark green background with light mint green text, and mint button centered. Second image is another test page showing how this section is supposed to look. The URL for the broken index-page is below and. the background is also not supposed to be fixed in the back of ALL sections - it's supposed to only be the parallax banner image for the top index-page section. https://thecreativeinka.com/branding-2 What the above URL is supposed to resemble: https://thecreativeinka.com/website-design-2 Bit more info on the #CTA-Button code. - it contains a code block with <div> code to create the button, styling in Custom CSS, and a javascript code in footer injection. Again, it's my assumption this is where the problem lies, but I'm not sure. Halp. Thanks!!
  6. Hi ! I was wondering if there is a way to create overlapping section rather than background. Something similar to parallax effect but for entire section content not just its background. For example, I want as I scroll down section 2 to cover section 1 (both background and text) rather than only covering the background. Currently, I am using the parallax code from https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1 I really appreciate your help! @tuanphan
  7. Site URL: https://clar.dev/fr Hi! I wanted to see if an effect was doable in SS templates (maybe Brine?). I want to replicate this parallax effect in the example site, specifically the overlap in sections going from the blue section to the green (see attachment). Any help is much appreciated! Kindly, Shane
  8. Site URL: https://www.naturalbornorganizers.com/welcome The background images on the homepage move while on mobile. I don't see it inside of the SS viewport, but I notice it on my phone. Address: https:www.naturalbornorganizers.com/welcome
  9. Site URL: https://vinculum.ai/ I'm trying to figure out how to add particles on the left and right sides of a website like this: https://vinculum.ai/ Would someone be able to help me understand how to add code to the margins of a site and allow it to be responsive (like flexbox) so as the page increases/decreases, the particles on the side move back and forth? I'm not sure what to target the code injection for or how exactly to build this cool thing, but would love to give it a shot :) Any suggestions?
  10. Site URL: https://quillfish-toucan-h4me.squarespace.com/ What css can we add to our website to adjust the positioning of images when the site is being viewed on a mobile device? The images are appearing fine on desktop, however on mobile view they are extremely cropped from the top and don't show the main part of the images.
  11. Site URL: https://www.aditya-sinha.com/ Hi, I am looking to create a parallax effect (through Squarespace style options or Custom CSS) on the slideshow at the top of my homepage. Basically, when scrolling down on the page, I want the header to disappear first and then the lower section to come up (thus achieving a parallax/tilt up effect on the slideshow where it moves slower than the text on screen). I managed to add tilt up to other sections with an image background that gives the illusion of parallax but the same option is not available for Slideshows. If @tuanphanor anyone else can help me with the same that would be really helpful! No Javascript code injection please ☹️ Thanks again! Password for access: tester
  12. Site URL: https://www.rorc.ie/ Hi, I'm trying to disable parallax on mobile only for a personal site using the Brine template, I've tried a few things in Custom CSS but nothing is working. Any help is much appreciated. Thanks
  13. Site URL: https://blackgryphon.squarespace.com/ So this can currently be seen at blackgryphon.squarespace.com (password is gathman). Right now the menu is set to default to show all menu items, but when clicking say "Lite Fare" which has substantially less instead of changing the height of the section it seems to be pulling the next section below it (events) up and I lose the banner images in between. When switching off parallax in the design panel the problem is gone, but... ideally I'd like to use parallax. I've attached a couple screenshots below:
  14. Site URL: https://typeaprofessionals.com Hi there, I'm using the Brine 7.0 template with the parallax scrolling effect for three images on my home page. The images look fine on desktop and tablet view, but when I look at my site on my phone, I notice there is a black space below the images before they start scrolling (shown below). I'm using this CSS to make the header fixed--could this be cause of the black space problem beneath the images? Any idea how to fix? Thank you! //fixed header navigation// .Header.Header--top { position: fixed; top: 0px; z-index:1000; width:100%; } .Intro {padding-top:100px;} .Index {padding-top:100px;} .Main {padding-top:100px;} .Main.Main--page {padding-top:100px !important;} .Main.Main--blog-item {padding-top:0px !important;} @media only screen and (max-width: 480px) { .Main {padding-top:0px !important;} .Intro {padding-top:0px !important;} .Index {padding-top:0px !important;} .Main.Main--page {padding-top:0px !important;} }
  15. Site URL: https://www.aditya-sinha.com/ Hi anyone, or @tuanphan,😄 I want to add custom css for parallax effect (or Tilt Animation) to the slide show on my home page (Paloma template, version 7.1). Please suggest how to do so without Javascript code injection; I can only include custom css. Password for website access: tester Please let me know how to do this!
  16. Site URL: https://horse-vibraphone-p6lg.squarespace.com/ I'm really eager to resize both banner images and the images that I'm using for parallax scrolling for mobile view. I've been looking through multiple previous and similar posts in here, but nothing have been working for me so far. Can anybody help me with a CSS code in order to resize the images for mobile view? Kindest,
  17. Site URL: https://gregorylassale.com I know that you can do this with banner images, but I'd like to use the image blocks' fade in effect.
  18. Site URL: https://www.lightbulb.com.au/home I am using a code block to embed an animation for the title page and am having a few issues: Layers: I need the text "connecting people to purpose" and "and strategy to execution" to sit neatly when switching to mobile. Currently the "strategy to execution" part drops off under the animation background. I think that's because the code block is currently inline with the text so pushes the text when re-sizing, but not sure how to fix. In my mind if the animation background sat on z-index:1 and the text sat on z-index:2 it would work, but the column of text still gets pushed Parallax: I have done some research into parallax for images but am unable to replicate that with this animated effect because it isn't able to be coded in as 'background-attachment: fixed' Cover page: The main goal is to have the entire screen taken up by this animation and the words on load. Then as you start to scroll the header menu appears. Currently I can't get the menu to appear only on scroll. I also can't get the animation background to appear as the exact same size of screen (especially when moving between ipad and phone size) even though I'm using 'height: 100vh;' Any help would be much appreciated! Here is my current code; <!-- particles.js container --> <div id="particles-js"></div> <!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <style> h1{color:white; z-index:99!important;} #block-de839e242497a7829823 {z-index:101!important;} #block-yui_3_17_2_1_1618818769687_39082 { height: 100vh; width: 110vw; margin-top: -20vh!important; margin: 0rem -60vw; position: relative; left: 50%; right: 50%; background-size: cover !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: center !important; background-repeat: no-repeat; z-index:0;} /* ---- reset ---- */ body{ margin:0; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #262626; background-repeat: no-repeat; background-size: cover; background-position: 0% 0%; } </style> <script> particlesJS("particles-js", {"particles":{"number":{"value":30,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.7,"random":true,"anim":{"enable":true,"speed":0.1,"opacity_min":0.3,"sync":false}},"size":{"value":30,"random":true,"anim":{"enable":true,"speed":1,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1.5,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"},"onclick":{"enable":false,"mode":"remove"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});; </script>
  19. Site URL: https://www.studiodelger.com/testing I’m trying to achieve a simple parallax effect on two overlapping .PNGs here: StudioDelger.com/testing My goal is to have the clouds in the background move more slowly than the people in the foreground as you scroll down the page. I’ve been looking at these tutorials on perspective and translatez https://medium.com/@johnearle/all-in-perspective-2996ee463509 https://keithclark.co.uk/articles/pure-css-parallax-websites/ Is it possible to do this with pure CSS? This site has a similar effect in the way that the pizza drawing and hand illustration moves up the page as you scroll. https://www.lamannabakery.com/ The CSS: /* Paralax Illustration */ //column container [data-section-id="60745c91580bd53b44eb6725"]{ .sqs-col-5{ position: relative; } .image-block{ position: absolute; width: 100%; } } //clouds sqs-block #block-yui_3_17_2_1_1618238465998_4806{ .sqs-block-content{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; perspective: 1px; perspective-origin: 0 0; } .image-block-outer-wrapper{ transform-origin: 0 0; transform: translateZ(-1px) scale(2); } .image-block-wrapper{} } //clouds image [data-image-id="60745d03bc8cce06463584c8"]{} //people sqs-block #block-yui_3_17_2_1_1618238465998_6847{ .sqs-block-content{} .image-block-outer-wrapper{} .image-block-wrapper{} } //people image [data-image-id="60745d1b829140737fd62ca8"]{} I would appreciate any help.
  20. Site URL: https://earthlycraft.co Hello! So i'd really like to implement the multi speed parallax styles available in rellax.js; https://dixonandmoe.com/rellax/ Anyone had any success with this? I found some guidance within https://www.minimist.ca/articles/variable-speed-parallax-effects-in-squarespace, but no matter what i do to the inline code nothing seems to change Thanks! Joe
  21. Site URL: https://lukaseriksen.com Hi! I've been trying to figure out how to target a parallax effect to specific images on my site so that they move slightly slower, or faster than the text that is aligned with them upon scrolling. I've found a couple examples of this effect on various websites: https://dixonandmoe.com/rellax/ https://delassus.com/en/products/tomatoes https://www.ixstudio.net/ Would anyone know how to do this?
  22. Site URL: https://www.dentalartlimited.co.uk Hello I have added Parallex code found on this website (https://stnsvn.com/blog/how-to-add-parallax-scrolling-squarespace-7-1) to make the image on the front page have the parallax effect however it is very glitchy and stuttery, does anybody know how to fix this ? Any help would be greatly appreciated. I have screenshotted the section that I am trying to make parallaxed.
  23. Hi everyone, Straight up I'm not a coder but I'm trying to achieve two things on my page: 1. Smooth Home page navigation scroll using anchors 2. Parallax Scroll where images are blocked in the background and the next section overlaps as you scroll down. Both codes work idividually, however when I combine both in the Custom CCS section, the Parallax code works and the smooth navigation stops working. What happens is when I click on a menu item, it jumps straight to that section and I loose that "smooth scroll" effect. Can you guys help me out? is it possible to have both effects? I've posted the codes I'm using at the end. Thanks in advance! Jen This one in the CSS Custom section: { scroll-behavior: smooth; } This one in the Code Injection Footer section: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ bleed: 0, imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>
  24. Site URL: https://www.samdanan.com/ RPReplay_Final1615858581.MP4 Hi all! I am trying to change the dark blue background color that only appears when you pull up or down on mobile view. I've searched everywhere in the site styles but can't seem to find what is causing this. Any help is appreciated! Website: https://www.samdanan.com/ Password: butter
  25. Site URL: https://www.chilliosis.com/ My parallax effect is doing a weird thing where it has a random white bar at the top of the parallax banners. Sometimes it disappears, then reappears again. The following is the code I used which I found here. I also have javascript code that splits certain sections which is also in the footer, I don't know if that may what's interfering with it. Any insight on what might be causing this would be greatly appreciated 🙏 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: 0.2, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>
  • Create New...