Jump to content

Parallax for One Image Only

Recommended Posts

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>

Link to comment
  • Replies 0
  • Views 2.2k
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.