how do I update the screen height on screen resize (zoom)? The arrows I have get broken every time I zoom the screen.
Also I'd like to ask you, if the way I'm showing the images on the screen is a good way or not... It should be made as a parallax website, every time you scroll down, it should get changed into another sharp (#) and scroll to different content which will be placed below as it is. And the move when you click the arrow is not really smooth, it only gets changed, but not in a smooth way, which is a problem I guess...
This is my code:
/* 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;
}
Feel free to correct my current code if you see something wrong or something which would be possible to make in a better way. I guess there will be lots of mistakes, so I ask you to help me to fix my mistakes and help me a little.
Preview: http://zahrajem.cz/
