带有动画过渡的整页图像

Question

I am trying to make a fade in- fade out transition between two pages with full screen images.我正在尝试在具有全屏图像的两个页面之间进行淡入淡出过渡。 Currently I'm trying to achieve this with the swup plugin.目前我正在尝试使用 swup 插件来实现这一点。

I can achieve a new full screen image on each page by setting a class on every html, like:我可以通过在每个 html 上设置 class 来实现每个页面上的新全屏图像，例如：

    <!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>

And css:和 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 for the transition: 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>

And the css: css：

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

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

There is also one line js for the transition:过渡也有一行js：

const swup = new Swup();

My problem is I can't seem to get these two to work together.我的问题是我似乎无法让这两者一起工作。 I either get the full image pages OR the transition, not the full image pages WITH transition.我要么得到完整的图像页面或过渡，而不是带有过渡的完整图像页面。 The problem seems to lie in the fact that the image has to be within the "swup".问题似乎在于图像必须在“swup”内。 But every time I try to put my image there, I lose control over its size and proportions, even if I give it a class of its own.但是每次我试图把我的图像放在那里时，我都会失去对它的大小和比例的控制，即使我给它一个自己的 class。

Now I have tried about a zillion things and I have tried to google this for a few days but no luck.现在我已经尝试了无数的事情，我已经尝试在谷歌上搜索了几天但没有运气。 I have only been working with html, css and js with this.我一直在使用 html、css 和 js。 Should I be looking elsewhere?我应该在别处寻找吗？

Any help here is highly appreciated.非常感谢这里的任何帮助。

Thanks谢谢

Answer 1

I finally managed to solve this.我终于设法解决了这个问题。 It may not be the best solution, so if you have a better one, please let us know.这可能不是最好的解决方案，所以如果您有更好的解决方案，请告诉我们。

I added this html-part below the navigationbar:我在导航栏下方添加了这个 html 部分：

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

And in the css:在 css 中：

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

带有动画过渡的整页图像

问题描述

1 个解决方案

解决方案1
1 2019-10-24 09:45:13

带有动画过渡的整页图像

问题描述

1 个解决方案

解决方案1 1 2019-10-24 09:45:13

解决方案1
1 2019-10-24 09:45:13