Параллакс Видео эффект на div - PullRequest
0 голосов
/ 20 октября 2018

Я искал в стеке, но не могу найти решение, которое работает.Мой веб-сайт имеет два эффекта параллакса на двух разных видео внутри двух отдельных div'ов.Первый работает нормально.

Как выглядят первые HTML

<div class = "divVideo">
    <video autoplay muted loop class="Video">
        <source src="Videos/Walk.mp4" type="video/mp4">
        Your Browser does not support Video Element.
    </video>
</div>

CSS:

.divVideo{
    height: 100%;
    width: 100%;
}

.Video {
    position: fixed;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}

Второй имеет похожий HTML-код, я использую те же атрибуты CSS, и он не работает.Это просто показывает предыдущее видео в параллаксе в том 2-м делении.

Я также пытался изменить position to relative, но это просто удаляет параллакс и показывает видео, которое я хочу, как обычно (как и должно быть).

Также, когда я удаляю код CSS для моего второго видео div и просто получаю:

.divVideo2 {
height: 400px;
width: 100%;
}

Вот CSS для второго видео

.Video2 {
    position: fixed;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}

его ничего не делаетдо 2-го класса видео, пока я не применю атрибуты CSS.Он просто отображает фактический размер видео.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...