Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break.
I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a parallax website where scrolling down changes the content with a sharp (#) and scrolls to new content below. However, the transition when clicking the arrow isn't smooth, it simply changes abruptly, which seems like an issue...
This is the code I currently have:
/* 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;
}
If you notice any errors in my current code, please feel free to correct them. I appreciate any help you can provide to improve my code.
Check out the preview here: