Jump to content

sitepositive

Member
  • Posts

    3
  • Joined

  • Last visited

Everything posted by sitepositive

  1. Thanks Ba Ngan! This works really well. I made a tiny change in the else clause because I wanted the block to remain visible when the user scrolls past. Now it does exactly what I intended, many thanks for your help!
  2. Many thanks for your suggestion. Unfortunately, there is still a problem with adding the second class. Here is the url: https://clavichord-garlic-a66t.squarespace.com password: sitepositive
  3. I created a white background for a title on a block by custom css. I would like to create a fade in effect when the user scrolls and the block becomes visible. I want to add classes dynamically and do the rest in custom css. My first step worked: With code injection I can add a class .preFade to my block: window.onload = function myFunction() { var element = document.getElementById("block-85f05db57d57001f69ee"); element.classList.add("preFade"); } My second step failed: I wanted user Intersection Observer to add another class .fadeIn when the block becomes visible: const appear = document.querySelector('.preFade'); const cb = function(entries){ entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('fadeIn'); }else{ entry.target.classList.remove('fadeIn'); } }); } const io = new IntersectionObserver(cb); io.observe(appear); My JS skills are pretty poor, so any help is greatly appreciated.
×
×
  • 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.