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


Forums

  • 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
  • German Circle Members's Topics

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


Badges


Expert ID

  1. 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?
  2. 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!
  3. 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
  4. 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>
  5. 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?)
  6. 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
  7. 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>
  8. 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?
  9. 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.
  10. We're using custom CSS in the Maple template to make a parallax hero image on the home page that takes up the entire height of the screen: #hero-banner, .Parallax-host .Parallax-item { height: 100vh; } However, that CSS is forcing our product pages to have a bunch of empty white space at the top. I'm hoping we can use Code Injection to disable that CSS just on the Product pages. Please help!
×
×
  • Create New...