0
画面のサイズを画面のサイズ変更（ズーム）で更新するにはどうすればよいですか？ 画面をズームするたびに、矢印が壊れてしまいます。jQuery - 画面のサイズ変更の更新
また、画面上に画像を表示する方法が良い方法であるかどうかについてもお聞きしたいと思います。視差のあるウェブサイトとして作成する必要があります。別のシャープ（＃）に変えて、別のコンテンツにスクロールして、そのまま下に置きます。
/* Resize to fit screen */
window.onload = function() {
var height = getViewportHeight();
document.getElementById("main").style.height = height + "px";
document.getElementById("lobby").style.height = height + "px";
}
function getViewportHeight() {
var h = 0;
if(self.innerHeight)
h = window.innerHeight;
else if(document.documentElement && document.documentElement.clientHeight)
h = document.documentElement.clientHeight;
else if(document.body)
h = document.body.clientHeight;
return h;
}
：そして、あなたは矢印をクリックして動きが
この
は私のコードです...それだけではなく、私は推測する問題があり、滑らかな方法、で、変更されます、本当にスムーズではありませんHTML：<!DOCTYPE html>
<html lang="cs">
<head>
<title>Zahrajem.cz | Nový československý herní portál</title>
<meta charset="utf-8">
<meta name="author" content="Jan Dvořák">
<meta name="description" content="Zahrajem.cz | Nový český herní portál">
<meta name="version" content="1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700">
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<section id="main">
<div class="container">
<div class="header">
<img src="img/z_logo.png"/>
</div>
<div class="footer">
<a href="#lobby"><img src="img/z_down.png"/></a>
</div>
</div>
</section>
<section id="lobby">
<div class="container">
<div class="header">
<a href="#main"><img src="img/z_up.png"/></a>
</div>
</div>
</section>
</body>
</html>
CSS：
html, body {
font-family: "Open Sans", "sans-serif";
}
* {
padding: 0;
margin: 0;
}
/* ANIMATION */
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.92, 0.92);}
100% {-webkit-transform: scale(1.0, 1.0);}
}
@-moz-keyframes pulsate {
0% {-webkit-transform: scale(0.92, 0.92);}
100% {-webkit-transform: scale(1.0, 1.0);}
}
@keyframes pulsate {
0% {-webkit-transform: scale(0.92, 0.92);}
100% {-webkit-transform: scale(1.0, 1.0);}
}
@-webkit-keyframes arr {
0% {opacity: 0.4;}
100% {opacity: 1.0;}
}
@-moz-keyframes arr {
0% {opacity: 0.4;}
100% {opacity: 1.0;}
}
@keyframes arr {
0% {opacity: 0.4;}
100% {opacity: 1.0;}
}
/* STRUCTURE */
#main {
overflow: auto;
background-image: url('/img/z_background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
display: block;
}
#main .container {
margin: auto;
text-align: center;
}
#main .container .header {
margin-top: 10%;
}
#main .container .header img {
-webkit-animation: pulsate 2s ease-in-out infinite alternate;
-moz-animation: pulsate 2s ease-in-out infinite alternate;
animation: pulsate 2s ease-in-out infinite alternate;
}
#main .container .footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#main .container .footer img {
width: 50px;
height: 50px;
opacity: 0.4;
}
#main .container .footer img:hover {
-webkit-animation: arr 0.7s ease-out infinite alternate;
-moz-animation: arr 0.7s ease-out infinite alternate;
animation: arr 0.7s ease-out infinite alternate;
}
/* LOBBY */
#lobby {
overflow: auto;
background-image: url('/img/z_lobby_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
display: block;
}
#lobby .container {
margin: auto;
text-align: center;
}
#lobby .container .header {
position: absolute;
left: 0;
right: 0;
}
#lobby .container .header img {
width: 50px;
height: 50px;
opacity: 0.4;
}
#lobby .container .header img:hover {
-webkit-animation: arr 0.7s ease-out infinite alternate;
-moz-animation: arr 0.7s ease-out infinite alternate;
animation: arr 0.7s ease-out infinite alternate;
}
あなたが何かwronを見れば、私の現在のコードを修正してお気軽によりよい方法で作ることが可能なもの、私は間違いがたくさんあると思うので、私は私の間違いを修正し、少し私を助けるように頼みます。
プレビュー：http://zahrajem.cz/我々はonresize -event持っているだけでonloadよう
はjqueryの – Binvention