🎚 Fading Overlays & Mobile tweaks

No live coding here: let's just review the code quickly

Desktop overlay

One last thing to improve the feeling yet again! A bit in the same mind as the opacity on the grid items to give some depth to our whole concoction: we added an overlay at the beginning of this section to insist on our sticky element's revealing effect and not rely solely on the demasking.

For that we need to add another element to our markup, and dedicate it's own data-scroll-css-progress!

views/partials/fancy-gallery.twig

<figure
    class="c-fancy-gallery"
    data-module-fancy-gallery
    data-scroll
    data-scroll-css-progress
    data-scroll-module-progress
    data-scroll-offset="100%,100%"
    >
    <div class="c-fancy-gallery_sticky-area">

        <div
            class="c-fancy-gallery_sticky-overlay"
            data-scroll
            data-scroll-css-progress
            data-scroll-offset="100%,100%"
            data-scroll-ignore-fold
        ></div>
        <div class="c-fancy-gallery_sticky">
            <div class="c-fancy-gallery_grid" data-fancy-gallery="grid">
                {% for image in gallery.images %}
                    <div class="c-fancy-gallery_grid-item" data-fancy-gallery="grid-item">
                        {% include "@snippets/image.twig" with {
                            src: image.src,
                            width: image.width,
                            height: image.height,
                            attr: 'data-fancy-gallery="image"'
                        } only %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="c-fancy-gallery_spacer"></div>

    <figcaption class="c-fancy-gallery_caption" data-scroll data-scroll-css-progress data-scroll-module-progress data-scroll-offset="33%,100%">
        {% for word in gallery.caption | split(' ') %}
            <span class="c-fancy-gallery_word">
                <span class="c-fancy-gallery_word-inner" data-fancy-gallery-caption="word">{{word}}</span>
            </span>
        {% endfor %}
    </figcaption>
</figure>

assets/styles/components/_fancy-gallery.scss

// Overlay for fade in on scroll
.c-fancy-gallery_sticky-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: vh(200);
    background-color: var(--color-bg);
    opacity: calc(1 - var(--progress));
    z-index: 50;
    pointer-events: none;

    // Not on mobile as the objective is different (see below)
    @media (max-width: $to-small) {
        display: none;
    }
}

info

Note we also added data-scroll-ignore-fold to our elements' html attributes because even though it's not visible on the hero, it's position: absolute inside the c-fancy-gallery_sticky-area with a top: -100vh means it's considered above the fold! That attribute prevents progress value to already be above 0 when we didn't even scroll once!

Mobile overlay

On mobile-ish devices, the issue lays on the caption readability being poor with those 3 images in the background. It's a bit of the opposite issue, so we get rid of the previous overlay (hence the media query above) and we'll focus on the caption styles instead.

.c-fancy-gallery_caption {
    position: relative;
    text-align: center;
    font-size: var(--font-size-huge);
    line-height: 0.85;
    @include -padding-huge-bottom;

    // Mobile-ish
    @media (max-width: $to-small) {
        @include -padding-huge-top;
        z-index: 50;

        // Gradient overlay to improve readability
        &:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 200%;            
            opacity: 0.5;
            // Gradient will act as a fade-in on scroll
            background: linear-gradient(0deg, var(--color-bg) 40%, transparent 100%); 
        }
    }
}

note

Instead of relying on a --progress variable here, we use a linear-gradient which will produce a fade-in effect on scroll!

Finaly done! unless..?