Image Fade In on Scroll

Scroll down to see this image fade in smoothly. This effect creates an elegant reveal as the section comes into view, drawing the viewer's attention to the content.

CSS Classes: onscroll-image-fade-in

Scroll Fade

Content Fade In from Left on Load

When the page loads, this text fades in from the left side of the screen, creating a dynamic entrance effect. This happens automatically when the page is first displayed.

CSS Classes: onload-content-fade-right

Load Right

Content Fade In from Right on Load

This section's content fades in from the right when the page loads. Perfect for creating asymmetrical, engaging layouts where content enters from different directions.

CSS Classes: onload-content-fade-left

Load Left

Combined Load Effects

This section combines multiple effects: the image fades in while the content fades in from the left. Both happen simultaneously when the page loads, creating a cohesive, polished entrance.

CSS Classes: onload-image-fade-in + onload-content-fade-right

Combined

Layout Variations

The theme supports different orientations and image positions to create varied layouts:

Image Positions

image-position-left: Image on the left
image-position-right: Image on the right
image-position-center: Image in center

Content Alignment

content-align-left: Text left-aligned
content-align-center: Text center-aligned
content-align-right: Text right-aligned

Orientations

orient-left: Mirror layout to left
orient-right: Mirror layout to right
orient-center: Centered layout

Scroll Effects

onscroll-image-fade-in: Image fades
onscroll-fade-in: Full section fades
onscroll-content-fade: Content fades

How to Customize Your Sections

For your wedding website, you can:

  • Replace SVG demo boxes with your own images
  • Combine animation classes for different effects
  • Use orient-left and orient-right to alternate layouts
  • Mix onload and onscroll effects as needed
  • Add smooth scrolling navigation with anchor links (#venue, #accommodation, etc.)
Customize

Ready to explore?

Use these animation effects to enhance your wedding website. Scroll back up to see all the animations in action!