← Back to Demos

Scroll AOS Effect

滾動動畫效果

Animate on scroll integration with AOS library and ScrollAos module.

整合 AOS 動畫庫和 ScrollAos 模組的滾動動畫。

↓ Scroll down

Basic Slider — fade-up

Container entrance uses fade-up animation.

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4

Cards Effect — slide-right

Container entrance uses slide-right animation.

  • Card 1
  • Card 2
  • Card 3
  • Card 4

Coverflow Effect — Per-Slide Animation

Each slide uses fade-up with incremental delay.

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6

AOS Global Settings (updates live)

Source Code

js 
var DS = DriftSlider;

// Slider 1: Basic + ScrollAos
var slider1 = new DS.DriftSlider('.slider-1', {
  modules: [DS.Navigation, DS.Pagination, DS.ScrollAos, DS.A11y],
  slidesPerView: 1,
  speed: 400,
  scrollAos: { enabled: true, refreshOnChange: true },
});

// Slider 2: Cards + ScrollAos
var slider2 = new DS.DriftSlider('.slider-2', {
  modules: [DS.Navigation, DS.EffectCards, DS.ScrollAos, DS.A11y],
  effect: 'cards',
  slidesPerView: 1,
  speed: 400,
  scrollAos: { enabled: true, refreshOnChange: true },
});

// Slider 3: Coverflow + ScrollAos with per-slide animation
var slider3 = new DS.DriftSlider('.slider-3', {
  modules: [DS.Navigation, DS.Pagination, DS.EffectCoverflow, DS.ScrollAos, DS.A11y],
  effect: 'coverflow',
  slidesPerView: 3,
  centeredSlides: true,
  speed: 500,
  coverflowEffect: { depth: 200, rotate: 30, scale: 0.85 },
  scrollAos: {
    enabled: true,
    slideAnimation: 'fade-up',
    slideDelay: 100,
    refreshOnChange: true,
  },
});

AOS.init({ once: true, duration: 800, offset: 120 });