jQuery - Update auf dem Bildschirm Größe ändern

Wie aktualisiere ich die Bildschirmhöhe auf dem Bildschirm Größe ändern (Zoom)? Die Pfeile, die ich habe, werden jedes Mal gebrochen, wenn ich den Bildschirm zoome.jQuery - Update auf dem Bildschirm Größe ändern

Auch ich möchte Sie fragen, ob die Art, wie ich die Bilder auf dem Bildschirm zeige, ein guter Weg ist oder nicht ... Es sollte als eine Parallax-Website gemacht werden, jedes Mal wenn Sie nach unten scrollen sollte in ein anderes scharfes Zeichen (#) geändert werden und zu einem anderen Inhalt scrollen, der unten so platziert wird, wie er ist. Und der Schritt, wenn Sie auf den Pfeil klicken ist nicht wirklich glatt, es wird nur verändert, aber nicht in einer glatten Art und Weise, was ein Problem ist, ich denke, ...

Dies ist mein 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; 
}

Fühlen Sie sich frei meine aktuellen Code zu korrigieren, wenn Sie etwas sehen, wron g oder etwas, das man besser machen könnte. Ich schätze, es wird viele Fehler geben, also bitte ich Sie, mir zu helfen, meine Fehler zu beheben und mir ein wenig zu helfen.

Vorschau: http://zahrajem.cz/

Quelle

2016-03-27 strangereu

Ganz nebenbei nichts davon ist jquery – Binvention

Genau wie onload wir haben eine onresize -event:

window.onresize = function(event) { 
    var height = getViewportHeight(); 
    document.getElementById("main").style.height = height + "px"; 
    document.getElementById("lobby").style.height = height + "px"; 
};

Quelle

2016-03-27 16:12:00

Und was ist mit der glatten Bewegung nach unten/oben? – strangereu

Dafür würde ich scrollTo verwenden. Schaut euch diesen Beitrag an :) http://stackoverflow.com/questions/12199363/scrollto-with-animation –

jQuery - Update auf dem Bildschirm Größe ändern

Antwort

Verwandte Themen