полное изображение страницы с анимированным переходом - PullRequest
Новая
       21

полное изображение страницы с анимированным переходом

0 голосов
/ 22 октября 2019

Я пытаюсь сделать плавный переход между двумя страницами с полноэкранными изображениями. В настоящее время я пытаюсь добиться этого с помощью подключаемого модуля.

Я могу получить новое полноэкранное изображение на каждой странице, установив класс для каждого html, например: 

    <!DOCTYPE html>
    <html lang="en" class="home_bg">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <title>Home</title>
    </head>
<body>
    <nav>
        <a href="/index.html">Home</a>
        <a href="/about.html">About</a>
    </nav>   
</body>
</html>

ИCSS: 

*{
    margin: 0;
    padding: 0;
}
.home_bg {
    background: url(img/landscape.jpg) no-repeat center center fixed;
    background-size: cover;
}
.about_bg {
    background: url(img/ocean.jpg) no-repeat center center fixed;
    background-size: cover;
}
nav{
    font-size: 24px;
}

HTML для перехода: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer src="node_modules/swup/dist/swup.min.js"></script>
    <script defer src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Home</title>
</head>
<body>
    <nav>
        <a href="/index.html">Home</a>
        <a href="/about.html">About</a>
    </nav>   
    <main id="swup" class="transition-fade">
        <h1>This is home</h1>
    </main>
</body>
</html>

И CSS: 

*{
    margin: 0;
    padding: 0;
}
nav{
    font-size: 24px;
}

.transition-fade{
    opacity: 1;
    transition: 500ms;
}  
html.is-animating .transition-fade {
    opacity: 0;
}

Существует также одна строка JS для перехода: 

const swup = new Swup();

Моя проблема в том, что я не могу заставить этих двоих работать вместе. Я либо получаю полные страницы изображений ИЛИ переход, а не полные страницы изображений С переходом. Проблема, кажется, заключается в том, что изображение должно быть в пределах «swup». Но каждый раз, когда я пытаюсь поместить свое изображение туда, я теряю контроль над его размером и пропорциями, даже если я даю ему собственный класс.

Теперь я попробовал около тысячи вещей, и я пыталсяGoogle это в течение нескольких дней, но не повезло. Я работал только с HTML, CSS и JS с этим. Должен ли я искать в другом месте?

Любая помощь здесь высоко ценится.

Спасибо

1 Ответ

1 голос
/ 24 октября 2019

Мне наконец удалось это решить. Возможно, это не лучшее решение, поэтому если у вас есть лучшее, пожалуйста, сообщите нам.

Я добавил эту html-часть под панелью навигации: 

<main id="swup" class="transition-fade">
        <div class="background-parent">
            <div class="background-home"></div>         
        </div>
</main>

И в CSS: 

.background-home {
  width: 100%;
  height: 100%;
  background: url(img/landscape.jpg) no-repeat center center fixed;
  background-size: cover;
}
...