Add a scroll-reveal animation to your Weebly site

A scroll-triggered reveal effect gives each major section a deliberate entrance as a visitor moves down the page. Instead of presenting every heading, image and call to action at once, the layout can guide attention through a soft fade-and-slide transition. It is a useful visual upgrade for Weebly portfolios, service pages and blogs that contain plenty of content. Learn more about Windowsのストレージセンサーを使って一時ファイルを自動削除しディスク空きを確保する方法.

The effect combines a small CSS keyframe animation with an Intersection Observer that detects when an element enters the browser viewport. The observer applies a class, while CSS handles the movement and opacity. This avoids continuous scroll calculations and lets the animation run once, leaving the finished section stable and easy to read.

For Australian audiences, this should feel quick and restrained rather than elaborate. Commuters in Sydney, Melbourne and Brisbane often browse one-handed on public transport, while small-business customers may arrive through a mobile search result. A lightweight reveal effect can add polish without making the page slow, distracting or difficult to navigate.

What the scroll effect should accomplish

A reveal animation is a scroll-triggered transition applied to selected content, not a continuously looping decoration. A card might move upward by 24 pixels while changing from transparent to opaque. Another block could fade in without moving. The motion gives a visual signal that the visitor has reached a new section, while the underlying content remains ordinary, responsive HTML.

Choose a few meaningful blocks rather than every paragraph. Suitable targets include project cards, testimonials, feature panels and calls to action. Animating headings one after another can make a page feel theatrical and may force readers to wait for the interface to settle. The best reveal effect supports scanning, especially on the smaller screens common to Australian mobile use.

Keep the movement understated and preserve the reading order. Content should never disappear when scripting is blocked, and people who request reduced motion should see it immediately. A scroll effect is an enhancement to navigation, not a condition for accessing information.

Prepare the Weebly page safely

Work on a copy of the page design and note which sections should animate. Weebly’s drag-and-drop editor does not expose a class field for every native element, so an HTML Embed Code element is the simplest route for a block containing text, images or buttons. Existing sections can also be targeted through a wrapper in the theme HTML.

Mark up each participating block with the same class. The surrounding content can stay in the normal Weebly structure, which makes the change easier to reverse if the visual result does not suit the site.

<div class="scroll-reveal">
  <h2>Recent project</h2>
  <p>Add the project details and image here.</p>
</div>

Place the CSS in your site-wide custom CSS area if the theme provides one. Otherwise, open the available Edit HTML option for the theme and put the style rules inside the <head>. Keep a copy of the original theme code before editing. Weebly’s interface and editable theme options can differ between plans, so the exact menu label may be Theme, Design or Advanced.

Create the CSS reveal animation

The following keyframes create a soft upward entrance. The two custom properties make the distance and duration easy to tune later. Opacity and transform are used because browsers can animate them efficiently without forcing the page to recalculate its layout repeatedly.

.scroll-reveal {
  --reveal-distance: 28px;
  --reveal-duration: 700ms;
}

html.reveal-js .scroll-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}

html.reveal-js .scroll-reveal.is-visible {
  animation: reveal-up var(--reveal-duration)
    cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-js .scroll-reveal,
  html.reveal-js .scroll-reveal.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

The reveal-js class is added only when the browser supports the observer and the visitor has not requested reduced motion. That fallback keeps all content visible if JavaScript is unavailable or the effect cannot run. The media query also disables the motion for users whose device settings ask websites to limit animation.

Keep the keyframes in one place rather than duplicating rules for each section. To create a different entrance, change the transform in the keyframe, such as translateX(-20px) for a subtle sideward reveal. Avoid animating height, width or top position, since those properties can make scrolling feel heavy.

Connect scrolling to the reveal

Add this script to the theme head if you can edit the theme HTML. If the plan only permits an embed, place it in an HTML Embed Code element on the same page. The script waits for the document before observing elements. Placing it in the theme head also adds reveal-js before the first paint, preventing a distracting flash of visible content.

<script>
(function () {
  var reducedMotion = window.matchMedia &&
    window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (reducedMotion || !('IntersectionObserver' in window)) return;

  document.documentElement.classList.add('reveal-js');

  function revealOnScroll() {
    var items = document.querySelectorAll('.scroll-reveal');
    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.12,
      rootMargin: '0px 0px -8% 0px'
    });

    items.forEach(function (item) {
      observer.observe(item);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', revealOnScroll);
  } else {
    revealOnScroll();
  }
})();
</script>

The threshold controls how much of a block must be visible before it starts. The negative bottom margin delays the trigger slightly, which can feel more natural as a section approaches the middle of the screen. Once triggered, unobserve stops watching that element, so the animation does not replay every time the visitor scrolls back upwards.

This observer method is quieter than a scroll event that recalculates positions on every frame. It also works with standard mouse, touch and keyboard scrolling. Keep the class naming consistent across the markup, CSS and script, since one mismatched letter will prevent the reveal from starting.

Tune the motion and keep it light

A distance of 16 to 40 pixels and a duration between 500 and 900 milliseconds usually feels natural. Shorter values create a quick response, while longer values suit a spacious editorial design. The easing curve in the example removes the abrupt stop of a linear animation, and the both fill setting preserves the correct state before and after the keyframes run.

Before running browser tests on a Windows computer, free some working space so sluggish performance does not distort your results. Windows Storage Sensor can manage temporary data automatically; this guide to clear temporary files explains a practical way to reclaim disk space. Keep the browser cache and developer tools open only when you need them, since they can also affect memory usage during testing.

Watch how several sections animate in sequence. If every block waits for attention, the effect becomes an obstacle, especially on a long page. Staggering can be created with a small animation delay on selected items, but it should not delay links or essential information. Test one page at a time and keep the first version limited to a few high-value sections.

Use a practical pre-publish check

Image-heavy Weebly portfolios can lose the effect’s impact when large files delay the first render. Before adding further motion, optimise your images and export suitable dimensions for the actual layout. This matters for Australian independent retailers and service providers competing in a crowded local market, where a slow mobile page can cost enquiries before the animation is even seen.

Accessibility and privacy also deserve a quick review. The effect itself stores no personal information, but any analytics or marketing form may fall under the Australian Privacy Act 1988 where its rules apply. Commercial email messages must meet the Spam Act 2003. There is no single federal accessibility rule covering every private Australian website, yet state and territory duties can apply, and public-sector projects commonly require WCAG 2.2 AA.

Before you publish, check:

• The page on an iPhone and Android phone.
• A desktop browser with the mouse and keyboard.
• Every animated section for readable contrast.
• The reduced-motion setting on your own device.

After the page is live, check:

• A full refresh from the top of the page.
• Backward scrolling and anchor links.
• The browser console for script errors.
• Loading speed on a mobile connection.

Launch the effect with a clear next step

Begin with one representative page rather than changing the entire theme. Confirm that the reveal improves the flow, that no content is trapped or hidden and that the visual style still matches the rest of your Weebly site. Keeping the CSS and script together makes later edits or removal straightforward.

Open your Weebly editor now, add the tested reveal to a meaningful section, preview it on a phone and publish the page. A carefully measured scroll animation gives visitors a clearer path through your content while keeping the experience fast, accessible and recognisably yours.