css 从图像到内容的“放大”过渡效果-点击时切换内容

xdyibdwo 于 2023-01-03 发布在其他

关注(0)|答案(1)|浏览(102)

我试图在内容之间建立一个过渡，这是现在的想法：
我有两个div：
1.第一个包含一个占据浏览器宽度和高度的图像，再加上一个单一的按钮，这些都是网页的介绍;
1.第二个包含网站的实际内容;
这个想法是，当我点击按钮，图像放大，并在过渡后，我得到的网页内容。
我的代码（HTML，CSS，JS）：https://pastebin.com/VZUVefPw
我的代码“算是”做到了这一点，但我试图实现的是有点复杂。
我发现了一个很棒的视频，描述了我的愿景，这里是链接，从21秒https://youtu.be/lRVEOoSA5EI?t=21。
如视频所示，我希望在点击按钮后有类似的过渡：保持一两秒钟，以平滑的方式“放大”（几乎看起来像是穿过图像的门，像是进入商店），然后我的内容就会出现。
这个代码的另一个问题（到现在为止我还没有解决）：因为我在body元素上有overflow:hidden，在.trailer-container类上有position: fixed，所以我不能向下滚动网页。
我希望这不是太多，我意识到这并不容易实现。我正在学习JavaScript，香草，这是一些小项目，我需要做。

css

来源：https://stackoverflow.com/questions/74986106/zoom-in-transition-effect-from-image-to-content-switching-content-on-click

1条答案

按热度按时间

rhfm7lfc1#

你需要缩放，并添加你的图像不透明度，与css动画，并开始这个动画和不透明度时，我们点击它，测试此代码

/** style.css :*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: green;
    height: 100vh;
}
p{
    text-align: center;
    font-size: 70px;
}
#overflow-hide-transition{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
}
#img-transition {
    width: 100%;
    height: 100%;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    flex-direction: column;
}
button {
    width: 250px;
    height: 50px;
    font-size: 30px;
}

@keyframes presentationTransition{
    to{
        transform: scale(5);
        opacity: 0;
    }
}

<!-- index.html --> :

<!DOCTYPE html>
<html lang="FR-fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body >
    <p>This is the body</p>
    <div id="overflow-hide-transition">
        <div id="img-transition" >
            test for zoom
            <button id="boutton-transition"> clique</button>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

/** script.js: */ 
const overflowHide = document.getElementById('overflow-hide-transition')
const imgTransition = document.getElementById('img-transition')
const buttonTransition = document.getElementById('boutton-transition')
const seconde = 3; 

document.addEventListener('click', ()=>{
    imgTransition.style.cssText = `animation: presentationTransition ${seconde}s linear `
    setTimeout(() => {
        overflowHide.style.display= "none"
    }, seconde *1000);
    

})

赞(0）回复(0）举报 2023-01-03

我来回答

css 从图像到内容的“放大”过渡效果-点击时切换内容

1条答案

相关问题

热门标签

最新问答