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

Search the Community

Showing results for tags 'parallax'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • 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 Topics
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Topics
  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 30 results

  1. Site URL: https://joannapaolaart.com On my mobile site, it won't show the banner video that plays on desktop. It shows the mobile fallback image instead. Is there any way to get the video to play on mobile? OR a way to have a gallery slider there instead? Thank you!
  2. Site URL: https://roland-richarson-v1.squarespace.com/ Hi, I'm using index banner function that I enable parallax for the pages - on the site's Artist page I'm encountering problems with parallax when I view it on my phone When I'm scrolling, there's this grey strip bit that shows under the banner image, especially when I scroll back up It doesnt show with the in-build mobile viewer, only on the actual phone screen and the top banner of a page doesnt have that problem throughout the site. Is there any code to remove that part? or tweak it? Thank you
  3. Site URL: https://www.christcathedral.org/ My site was built with some custom features in the header on each page (by a hired coder), I would like to switch to parallax scrolling but I am afraid of what it might do to those features (I am not a coder). Can someone look at my site and give me some advice? Thanks in advance!
  4. Been trying to "work" the parallax option for an hour only to discover after some frustration that the new update does not support it. Please tell me this is false. Unless, is there another way I am unaware of? Such a shame Squarespace. Taking out one of the best aesthetic features (in my opinion) and honestly the only reason I used Squarespace in the first place. Seems as the company are adding more restrictions deliberately to make them less unique from their competitors. Great. Edit: Have decided to switch from this platform. Screenshot.mp4
  5. Hi, Is there any CSS coding or code injections for parallax scrolling in 7.1? Thanks @tuanphanor anyone else?
  6. I want to have a clean canvas: no header, no footer, no banner image or site title. I'd also like to be able to change the color from white. This page offers instructions on how to remove the header and footer. It worked for me. http://answers.squarespace.com/questions/24905/hiding-header-and-footer-on-marquee This page offers three different sets of instructions on how to remove the banner image and site title. None work for me. http://answers.squarespace.com/questions/34666/marquee-how-to-remove-bannersite-title-from-one-page-only Maybe I'm adding the code incorrectly? I tried adding the banner/title code both inside and outside the style tags with no luck. I made sure I changed the URL id with no luck. Bonus: How do I change the background color of the page?
  7. Hi guys! I've seen a few websites with parallax scrolling on one of their pages and then the next page below is enabled. I think that's such a cool feature that I would love to implement. I searched the web for a long time to try to find the code for this but I just got this link https://blog.alexgittings.com/disable-parallax-on-one-squarespace-page/ with a code, but I have no idea where to put the code as it's poorly described. THIS IS WHAT THE ARTICLE SAID: To do this you will need to inject a script into the page. Navigate to the page cog and select advanced and enter the following: <script> Static.SQUARESPACE_CONTEXT.tweakJSON["tweak-overlay-parallax-enabled"] = false; </script> Once saved the parallax feature for that page should be disabled. But I have no idea where to put this code. Do any of you have any suggestions or know of another way? Thank you! Eager to hear back 🙂
  8. Site URL: https://www.arthurkorbielphotography.ca/london-ontario-wedding-photography-portfolio When I have parallax scrolling enabled and the focal point set on the main subject of the image, some banner images don't display the banner properly, especially if the main subject is close to the bottom of the image, causing it to get cut off - this happens on desktop. However, when I view the site on my phone (or I narrow the browser on my desktop) it displays properly. How can I fix this? Here is the page in question: https://www.arthurkorbielphotography.ca/london-ontario-wedding-photography-portfolio Thanks!
  9. Hi All, I am struggling with Parallax on mobile and I wanted to know if there is a line of code I can insert in the header code injection that will enable me to keep the effect on desktop versions of the site. Site in question : www.nicolebarton.co.ukSite Style: Bedford You can see on the mobile version I am getting bars appear on the top / bottom when viewed in the mobile format. I have copied my Parallax code below, which sits in Settings>Advanced>Code Injection <!-- Parallax --> <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.6.2/rellax.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var targets = '.banner-thumbnail-wrapper #thumbnail img, .index-section #thumbnail img, .index-section:first-child .slide .thumb-image'; if (document.querySelector(targets)) { var rellax = new Rellax(targets, { speed: -3, center: true }); } }); </script> <!-- end Parallax --> Ideally this would be a few lines of code at the end that states if a page is 640px wide then it will disable this particular piece of code. Any help greatly appreciated!
  10. Site URL: http://www.believestudio.co.uk Hi there, I need some help. Does anyone know if there is a way to trigger video playback on hover on a banner image using the brine parallax template on squarespace? Happy to do code injections/css if I need to. I'm just not sure how to go about it, the tricky thing about this whole set up is that the image/videos will be sitting in a parallax banner. The page on my website that I want this to happen is the projects page. Thanks in advance for any help and advice! Cheers, Mark
  11. LeadPages and Samcart have an option where you can make the next section of your webpage show up after X number of minutes. This is helpful if say someone has a video on a page, and at the 8th minute of the video, they want the remaining sections on the page to be visible (like a sales page). Does anyone know if this can be done in Squarespace? I image some modified coding on the parallax setting might achieve this, but I'm hardly savvy enough to know. Anybody know?
  12. Site URL: https://cyan-vibraphone-f5z8.squarespace.com/morningglories Hi there, I'm having trouble targeting a div that a background image lives in, which I'm trying to do so I can change the background-color via css. If you go to the link below and size your browser to be for mobile, you'll notice in the second module (with the photo of the kids), if you scroll down, the background becomes white. I'd like to be able to set the background-color of that div to match the light blue of the background photo, but I can't for the life of me, figure out how to target that div. What's interesting is that if I turn off Parallax, I can find that div and fix the background color. Unfortunately, when I turn Parallax on, it looks like the structure and/or naming convention of the divs changes (which makes sense), and it breaks. https://cyan-vibraphone-f5z8.squarespace.com/morningglories Password: littlefriends Thanks so much for any help!
  13. 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
  14. Site URL: http://hitonoto.com For some reason on mobile the images on our Index page don't stretch all the way to the bottom of the window. And so it's showing the brown background color, which we don't want. It's as if there is a problem with the parallax scrolling. Any ideas what could be causing this? Thanks
  15. Site URL: http://teamcjwip.squarespace.com Hello, I'm trying to finish up the homepage design for my site but there's a couple custom css problems I'm running into. I currently have an index page displaying 2 banner images that parallax as you scroll. I would like to use custom css to make the banners show fully on mobile because they are currently being stretched as if there is a minimum height.. i would also like them to not use parallax on mobile. I've tried the following code, which has stopped the images from parallaxing on mobile but the images are still stretched. site - http://teamcjwip.squarespace.com pass - jaglovers /* show home page block dependent on screen size */ @media only screen and (max-width: 780px) { #mission-banner { display: none; } } @media only screen and (min-width: 781px) { #mission-banner-mobile { display: none; } } @media only screen and (max-width: 780px) { figure[style] { transform: initial !important; } }
  16. Site URL: http://www.winkeyewear.com I’ve noticed that our index page banners have black bars at the bottoms due to the parallax scrolling. It doesn’t matter what the image size is. We’ve tried everything. Is this just a bug in Sonora or do we have something set wrong?
  17. Site URL: https://www.embraceyourspace.co.uk/ Hi there, My client has asked if I can adjust the height of the parallax banners at the top of each page of their website for mobile, as it currently fills about 80% of the mobile screen. I've tried a few simple bits of CSS code but have had no luck in targeting the height of the banner. (Image attached showing what I'm trying to achieve) I'm almost certain there's a simple solution but can't find it. Any help would be appreciated!
  18. Site URL: https://overlandervehicles.co.uk Hi guys, On the homepage, the parallax image sticks when you scroll down and the same thing happens when viewing the Finance page. Feels clunky, so would like to get this smoothed out. I have some Custom CSS and also a script within the site's Code Injection that creates the sticky nav, in case these are interfering with the parallax in some way? Any advice greatly appreciated! Anna
  19. Do you have ideas how to “offload” (kill/hide) a parallax image selectively with CSS? On smaller breakpoints, I'm simply covering the image with a color, but when scrolling, you can see a 1px 'sliver' bleeding-through. (so I want to “offload” (kill/hide) it on those breakpoints) When inspecting, the image is added via scripting: figure.Index-page-image.loaded The parallax section in question: <div class="Parallax-item" data-parallax-item="" data-parallax-id="5e220aae87b00d44dcb998bf" style="top: 2083px; left: 0px; width: 672px; height: 1070px; transform: translate3d(-672px, 0px, 0px);"> <figure class="Index-page-image loaded" data-parallax-image-wrapper="" style="bottom: 14px; overflow: hidden; transform: translate3d(0px, -67.4091px, 0px);"> <img data-src="https://static1.squarespace.com/static/5e18b3178e49c83eef94fbd0/t/5e2235b0b457e7527dde8694/1579314917946/bg-girl%402x.png" data-image="https://static1.squarespace.com/static/5e18b3178e49c83eef94fbd0/t/5e2235b0b457e7527dde8694/1579314917946/bg-girl%402x.png" data-image-dimensions="2500x2073" data-image-focal-point="0.5,0.22025858059715375" data-load="false" data-parent-ratio="0.6" alt="bg-girl@2x.png" style="font-size: 0px; left: -300.758px; top: 0px; width: 1273.52px; height: 1056px; position: relative;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5e18b3178e49c83eef94fbd0/t/5e2235b0b457e7527dde8694/1579314917946/bg-girl%402x.png?format=2500w"> </figure> </div>
  20. How can I disable Parallax on specific sections of an index, instead of all sections using Parallax? seems to be an all or nothing approach which is not what im looking for (in attached image, I wish for the Banner sections to Parallax, but the following sections to be not parallax - is this possible?)
  21. Anyone know of a workaround? Scrolling in Chrome, and even in the dev window is lovely, but when live in Safari only is a mess. Complicating things is I've added a static background effect for some index images, sample below: .collection-type-index #building-block { background-image: url("https://static1.squarespace.com/static/5d668c3fb154060001bbf0ba/t/5dea9ae54fc5135240ef736c/1575656167172/3a.jpg"); background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } Turning "fixed" to any other attribute resolves the scrolling, but need a static image. Help? http://www.edfacgroup.org
  22. Hello-- I'm trying to activate parallax scrolling for one banner image only on my site. This is a banner/background image set up as a Section on an Index page. The inspected code for the section is below, and I've highlighted the image url in bold. Thanks! <section id="new-page-1" class="Index-page Index-page--has-image sqs-frontend-overlay-editor-widget-host" data-parallax-original-element="" data-collection-id="5de1a994a06c926920541ce2" data-parallax-id="5de1a994a06c926920541ce2" data-edit-main-image="Background"> <div class="Index-page-content sqs-alternate-block-style-container" id="yui_3_17_2_1_1575306929677_463"> <div class="sqs-layout sqs-grid-12 columns-12 sqs-layout-dark sqs-frontend-overlay-editor-widget-host-light" data-type="page" data-updated-on="1575070100346" id="page-5de1a994a06c926920541ce2"><div class="pageAnnotationEmptyMessage pageAnnotationEmptyMessageLight" id="yui_3_17_2_1_1575306929677_698">This page is empty. Start editing and add content blocks.</div><div class="row sqs-row" id="yui_3_17_2_1_1575306929677_732"><div class="col sqs-col-12 span-12" id="yui_3_17_2_1_1575306929677_731"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-5de1a994a06c926920541ce3"><div class="sqs-block-content" id="yui_3_17_2_1_1575306929677_734"><p id="yui_3_17_2_1_1575306929677_733">&nbsp;</p></div></div></div></div></div> </div> <figure class="Index-page-image loaded" data-parallax-image-wrapper="" style="overflow: hidden;"> <img data-src="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg" data-image="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg" data-image-dimensions="1920x1080" data-image-focal-point="0.5,0.5" data-load="false" data-parent-ratio="11.2" alt="Metanephric_adenoma_high_mag - EDIT 1.jpg" style="font-size: 0px; left: 0px; top: -446.781px; width: 1889px; height: 1062.56px; position: relative;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg?format=2500w"> </figure> </section> <div class="Index-page-content sqs-alternate-block-style-container" id="yui_3_17_2_1_1575307442393_465"> <div class="sqs-layout sqs-grid-12 columns-12 sqs-layout-dark sqs-frontend-overlay-editor-widget-host-light" data-type="page" data-updated-on="1575070100346" id="page-5de1a994a06c926920541ce2"><div class="pageAnnotationEmptyMessage pageAnnotationEmptyMessageLight">This page is empty. Start editing and add content blocks.</div><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-5de1a994a06c926920541ce3"><div class="sqs-block-content"><p>&nbsp;</p></div></div></div></div></div> </div> <figure class="Index-page-image loaded" data-parallax-image-wrapper="" style="overflow: hidden;"> <img data-src="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg" data-image="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg" data-image-dimensions="1920x1080" data-image-focal-point="0.5,0.5" data-load="false" data-parent-ratio="9.3" alt="Metanephric_adenoma_high_mag - EDIT 1.jpg" style="font-size: 0px; left: 0px; top: -334.719px; width: 1471px; height: 827.438px; position: relative;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg?format=2500w"> </figure> <section id="new-page-1" class="Index-page Index-page--has-image sqs-frontend-overlay-editor-widget-host" data-parallax-original-element="" data-collection-id="5de1a994a06c926920541ce2" data-parallax-id="5de1a994a06c926920541ce2" data-edit-main-image="Background"> <div class="Index-page-content sqs-alternate-block-style-container" id="yui_3_17_2_1_1575307442393_465"> <div class="sqs-layout sqs-grid-12 columns-12 sqs-layout-dark sqs-frontend-overlay-editor-widget-host-light" data-type="page" data-updated-on="1575070100346" id="page-5de1a994a06c926920541ce2"><div class="pageAnnotationEmptyMessage pageAnnotationEmptyMessageLight">This page is empty. Start editing and add content blocks.</div><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-5de1a994a06c926920541ce3"><div class="sqs-block-content"><p>&nbsp;</p></div></div></div></div></div> </div> <figure class="Index-page-image loaded" data-parallax-image-wrapper="" style="overflow: hidden;"> <img data-src="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg" data-image="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg" data-image-dimensions="1920x1080" data-image-focal-point="0.5,0.5" data-load="false" data-parent-ratio="9.3" alt="Metanephric_adenoma_high_mag - EDIT 1.jpg" style="font-size: 0px; left: 0px; top: -334.719px; width: 1471px; height: 827.438px; position: relative;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5beef0682714e50368deb4af/t/5de1a9afa06c926920542068/1575070137257/Metanephric_adenoma_high_mag+-+EDIT+1.jpg?format=2500w"> </figure> </section>
  23. Hi! Does anyone know how I can add padding to a banner background video? I still want the video to be on a loop playing and parallax scrolling but I don't want the video to fill to the edges of the screen. Is there some CSS I can add?
  24. I have a parallax homepage. When viewing on mobile device they do not conform to the mobile page size and are over blown. I did speak with tech support and got no real way to fix this.Is there a way to make the images fit the mobile page or do I need to make the images smaller to fit. They are at 1500 pixels as prescribed. The other pages are fine and they do not have parallax effect used. I thought there was a code to do this but can't seem to find. Thank you ahead.
  25. Hey all! On my site, I have several index pages. Several of the sections of these index pages have background/banner images for the nifty parallax effect. I'm not fully satisfied with how those background/banner images are displaying at all times and I'm attempting to target them with CSS to make some adjustments. However, no matter how much digging I do, when I inspect the page code, I can't seem to find where those index page section background images live to figure out the correct CSS class to use to target them. I'm using the Mojave template and the images were uploaded in the page (the section pages making up the index page) settings under media. Can someone point me to where I can find the parallax index page background images when I'm inspecting? Or, at minimum, let me know the CSS targets I need to hit? Thank you!
×
×
  • Create New...