Jump to content

Parallax/Scrollytelling Not Working

Recommended Posts

Site URL: http://www.glowing.org/playing4theplanet/

Hi we were trying to do a "Scrollytelling" element in our Brine 7.0 site -- I tried to enable parallax but it doesn't show up where it's meant to in Site Styles so we tried to get creative with code injection but it isn't working.

 

Any advice?

 

<div class="scrolly">
<div class="floaty">It's not all ocean out there, <br><em>but it's close!</em></div>

<div class="scrolly-section">
  <div class="scrolly-figure">
    <img src="https://source.unsplash.com/tWWCqIMiUmg/500x380" alt="Beach Water Scene"> 
  </div>
  
  <div class="scrolly-article">
    <p>Covering more than 70 percent of the Earth's surface, our Ocean - which is one body of water across the entire globe- supports the livelihoods and nutritional needs of billions of people and is home to millions of species.</p>
    
    <p>Marine ecosystem services comprise more than 60 percent of the economic value of all life on Earth, with one in ten people relying on marine fisheries and aquaculture for their livelihood.</p>
  </div>
  
</div>

<div class="floaty"><br><br>Oceans keep you cool.<br><br></div>

<div class="scrolly-section">
  
  <div class="scrolly-figure">
    <img src="https://source.unsplash.com/kf4GQEmaIOs/500x380" alt="Beach Water Scene">
  </div>
  
  <div class="scrolly-article">
    <p>The Ocean makes life on earth habitable, regulating weather and temperature patterns while serving as a critically important carbon sink, through ecosystems such as mangroves, seagrasses, and chemical processes.</p>
    
    <p>Some estimates say that the Ocean absorbing as much as 90% of the additional heat that carbon emission have trapped in our atmosphere, which has slowed the impacts of a warming planet.</p>
    
  </div>
  
</div>

<div class="floaty"><br><br>But this is un-cool:<br><br></div>

<div class="scrolly-section">
  
  <div class="scrolly-figure">
    <img src="https://source.unsplash.com/RUqoVelx59I/500x380" alt="Beach Water Scene">
  </div>
  
  <div class="scrolly-article">
    <p>However, 2/3 of the Ocean has been negatively impacted by human activity from pollution to unsustainable and overfishing to climate change, which is jeopardizing its ability to deliver the services that are vital to maintaining human well-being and healthy biodiversity.</p>
    
    <p>
      Coral reefs that support 25 percent of all marine life are at risk of
disappearing if our planet warms above 1.5 degrees Celcius over pre-industrial levels. <strong>Right now we are at 1.2.</strong>
    </p>
    
    
    
  </div>
  
</div>


<div class="floaty"><br><br>The time to act is now!<br><br></div>

<div class="scrolly-section">
  
  <div class="scrolly-figure">
    <img src="https://source.unsplash.com/I9y_6J-HhY8/500x380" alt="Beach Water Scene">
  </div>
  
  <div class="scrolly-article">
    <p>At least 33 percent of fish stocks are currently overfished with 33 to 50 percent of critical marine habitats lost.</p>
    
    <p>Reversing this trend requires immediate intervention by governments and innovation by the private sector to transform from business as usual.</p> 
    
    <strong><p><br>World Leaders will meet several times in 2021 and we want to show them we are paying attention and that we care!</p></strong>
    
  </div>
  
</div>
</div>

Link to comment
  • Replies 1
  • Views 495
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

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