0
私は誰かがこの問題を助けることを望んでいます！CSS/jqueryはdivの中央にある位置からウィンドウの左上に移動します
2つの異なるイメージに分割されたページ中心のdivにロゴが表示されているため、異なる方向からアニメーション化し、オーバーレイして1つの完全なロゴのように見えるようにすることができます。
私はそれをクリックすると、2つの画像とロゴタイトルの画像が消え、1つのロゴ画像に置き換えられます。それはうまく動作し、まだページの中央に位置しています。
私が探しているのは、ページの中央からページの左上に来る単一のロゴ画像をアニメートすることです。アニメーションは画像そのものでうまく動作しますが、divではなく非常に乱雑です。私はjqueryをつぶすことに行きましたが、それを手に入れることはできません！誰かがこれにいくつかの光を当てることができますか？私はここでベンチされた例を持っています：http://endframe.saturn-global.com/
何かアドバイスありがとう！
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="assets/estyle.css">
</head>
<body>
<div class="container-fluid">
<div class="logo">
<div class="logocontainer">
<img class="logoE" src="img/logoE.png" alt="Logo Letter E">
<img class="logoF" src="img/logoF.png" alt="Logo Letter F">
<img class="thelogo" src="img/thelogo.png" alt="Endframe Logo">
</div>
<div class="logotitle">
<img src="img/logotitle.png" alt="Logo Title">
</div>
<div class="beginbutton">
<button class="btn beginbtn">Let's Begin!</button>
</div>
</div>
<div class="content" style="opacity:0;color:#000;margin-top:200px;padding:20px;">
some content
</div>
</div>
<script src="assets/ejs.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>
$('.beginbutton').click(function() {
$("body").css("background","#ffffff");
$(".beginbtn").css("opacity","0");
$(".logoE").css("opacity","0");
$(".logoF").css("opacity","0");
$(".logotitle").css("opacity","0");
$(".content").css("opacity","1");
$(".thelogo").css(
{
"opacity" : "1",
"left" : "0",
"margin" : "0 auto",
}
);
$(".logo").css(
{
"top" : "0",
"left" : "0",
"bottom" : "auto",
"right" : "auto",
"text-align:" : "left",
"margin" : "0 auto",
});
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script></body>
</html>
CSS：
body {
background: #000;
color:#fff;
transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-moz-transition: .6s ease-in-out;
}
.logo {
position:fixed;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
width:300px;
height:300px;
text-align:center;
transition: 3s ease-in-out;
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
}
.logocontainer {
width:100px;
margin:auto;
text-align:center;
}
.logocontainer img {
width:100px;
height:auto;
display:block;
margin:auto;
}
img.logoE {
position:absolute;
z-index:1;
left:50%;
margin-left:-50px;
animation:logoEanim 4s;
-webkit-animation:logoEanim 4s;
-moz-animation:logoEanim 4s;
}
img.logoF {
position:absolute;
z-index:2;
left:50%;
margin-left:-50px;
padding-top:1.8em;
padding-left:1.8em;
animation:logoFanim 4s;
-webkit-animation:logoFanim 4s;
-moz-animation:logoFanim 4s;
}
img.thelogo {
position:absolute;
z-index:3;
left:50%;
margin-left:-50px;
opacity: 0;
transition: 3s ease-in-out;
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
}
@keyframes logoEanim {
from {left:-100%;opacity:0;}
to {left:50%;opacity:1;}
}
@-webkit-keyframes logoEanim {
from {left:-100%;opacity:0;}
to {left:50%;opacity:1;}
}
@keyframes logoFanim {
from {left:200%;opacity:0;}
to {left:50%;opacity:1;}
}
@-webkit-keyframes logoFanim {
from {left:200%;opacity:0;}
to {left:50%;opacity:1;}
}
.logotitle {
margin-top:100px;
animation: etitle 5s ease-in-out;
-webkit-animation: etitle 5s ease-in-out;
-moz-animation: etitle 5s ease-in-out;
transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
}
.logotitle img {
width:280px;
height:50px;
padding:10px 10px;
}
@-webkit-keyframes etitle {
0% {opacity:0;}
55% {opacity:0;}
100% {opacity:1;}
}
@keyframes etitle {
0% {opacity:0;}
55% {opacity:0;}
100% {opacity:1;}
}
.beginbtn {
position:relative;
font-weight:bold;
font-size:1.8em;
padding:3px 10px;
border:2px solid #000;
border-radius:10px;
transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
box-shadow: -2px 2px rgba(153,206,255,1);
}
.beginbutton {
animation: beginanim 6s ease-in-out;
-webkit-animation: beginanim 6s ease-in-out;
-moz-animation: beginanim 6s ease-in-out;
}
.beginbtn:hover {
cursor:pointer;
}
@-webkit-keyframes beginanim {
0% {opacity:0;}
60% {opacity:0;}
100% {opacity:1;}
}
@keyframes beginanim {
0% {opacity:0;}
60% {opacity:0;}
100% {opacity:1;}
}
.beginbtn:hover {
}
.beginbtn:focus {
box-shadow:none;
}
.beginbtn:active {
}
これを実装しようとしたときにのみ、divがページの左上にジャンプしてから、新しい位置でロゴが左上に移動します。 / – Dauntless0