Parallax Slider

Многослойный слайдер, где фон и передний план живут отдельно и дают ощущение глубины.

Framer MotionScroll transforms

Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Parallax Slider

'use client';

import { motion, useScroll, useTransform } from 'framer-motion';
import { useRef } from 'react';

export function ParallaxSlider() {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const offset = useTransform(scrollYProgress, [0, 1], [-50, 50]);

  return (
    <div ref={ref} className="grid gap-4">
      <div className="relative aspect-[16/9] overflow-hidden rounded-[24px] bg-neutral-900">
        <motion.div style={{ y: offset }} className="absolute inset-0 bg-[radial-gradient(circle,rgba(187,255,0,0.45),transparent_55%)]" />
      </div>
    </div>
  );
}