Интерактивный видеопереход с Next.js
Интерактивный переход — это просто видео, которое воспроизводится, когда вы попадаете на страницу, и когда оно заканчивается, оно медленно исчезает, позволяя вам получить доступ к веб-сайту, нажимать кнопки и т.д. Очевидно, что чем лучшее видео вы покажете пользователю, тем больше будет «вау»-фактор.
Теперь начнем с создания нового компонента под названием VideoReveal и добавим для него следующий код:
import { useRef } from "react";
interface VideoRevelProps {
onVideoEnd: () => void;
}
export const VideoReveal = ({ onVideoEnd }: VideoRevelProps) => {
const wrapperRef = useRef<HTMLDivElement | null>(null);
const handleVideoEnded = () => {
wrapperRef?.current?.classList?.add("opacity-0", "pointer-events-none");
setTimeout(() => {
onVideoEnd();
}, 500);
};
return (
<div
ref={wrapperRef}
onClick={handleVideoEnded}
className="fixed top-0 left-0 w-full h-full z-50 transition-opacity duration-500"
>
<video
autoPlay
muted
className="w-full h-full object-cover"
onEnded={handleVideoEnded}
>
<source src="/door.mp4" type="video/mp4" />
</video>
</div>
);
};Вот что происходит
У нас есть определенное видео, которое имеет свойство autoplay, то есть оно начнет воспроизводить видео, как только компонент будет смонтирован. Мы также установили его так, чтобы он занимал всю высоту и экран области просмотра, и дали ему z-index, чтобы он отображался поверх всего, что уже есть на странице.
Как только это видео закончится, мы хотим удалить этот компонент. Но вместо того, чтобы резко демонтировать компонент, мы устанавливаем его непрозрачность на 0 на протяжении 500 мс, а также вызываем onVideoEnd после завершения перехода CSS (500 мс).
Для чего нам нужен callBack onVideoEnd?
В родительском компоненте, где вы хотите использовать VideoRevealкомпонент, вот как вы можете его использовать:
"use client";
import { VideoReveal } from "./components/VideoReveal";
import { useState } from "react";
export default function Home() {
const [isVideoPlaying, setIsVideoPlaying] = useState(true);
return (
<main>
<h1>Homepage content</h1>
{isVideoPlaying ? (
<VideoReveal onVideoEnd={() => setIsVideoPlaying(false)} />
) : null}
</main>
);
}Мы монтируем VideoReveal, потому что isVideoPlaying установлен true по умолчанию, и видео начинает воспроизводиться. После того, как видео заканчивается, оно вызывает то, что мы передаем в onVideoEnd.
В этом сценарии мы знаем, что когда воспроизведение видео прекратится, мы хотим удалить наш видеокомпонент, поскольку он нам больше не нужен, и мы хотим отобразить контент на странице, чтобы пользователь мог с ним взаимодействовать и т.д.
Заключение
Это решение может не подойти вам, если вы хотите самую быструю страницу и интерактивность для пользователя. Это скорее творческий подход, чтобы «очаровать» или «увлечь» пользователя.
