Erstellen eines Side-Scrolling-Website

Ich versuche, eine Website zu erstellen, die sich horizontal mit einem festen Charakter in der Mitte, ähnlich wie http://www.rleonardi.com/interactive-resume/ scrollt.Erstellen eines Side-Scrolling-Website

Beim Versuch, die css zu ändern, um die Bilder, um die Größe es auf die Website beeinflussen tut und ich weiß nicht, ob ich die Position verwenden muß: fixed das Zeichen in der Mitte zu beheben.

background

floor

character

<html lang="en"> 

<head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
    <title>Your title</title> 
    <link rel="stylesheet" href="css/styles.css"> 
</head> 

    <body> 

     <background><img src="Photos/Backgroundclear%20.png" alt= "Background"/> </background> 


     <character><img src="Photos/Character.png" alt= "Background image"/> </character> 


     <div><floor><img src="Photos/floor.png" alt= "Background image"/> </floor> </div> 


    </body>

und CSS:

body{ 
    background-color: $primarycolour; 
    max-width: 8000px; 
    max-height: auto; 

} 

background{ 
    max-height: auto; 
    max-width: 100%; 

} 

character{ 
    max-height: 20px; 
    margin: auto; 

}

Quelle

2017-11-15 user8946239

Sie besser verpacken Sie Ihren Code in Fiddle. Dein CSS macht überhaupt keine Größenänderung. –

Bei einem komplexen Projekt wie dieses Sie wirklich gehen zu müssen Ihren Kopf herum wickeln die Positionierung von Elementen und wie fest/r Elaktive und absolute Positionierungsarbeit. This sollte Sie auf den richtigen Weg bringen. In diesem Fall habe ich Chrom Inspektor einen Blick auf das Beispiel zu haben, die Sie zu replizieren versuchen, und ich kann sehen, dass der Charakter position: absolute hat. Hier sind einige CSS mit dem Zeichen in der Größe geändert. Ich hoffe es hilft!

body{ 
    background-color: $primarycolour; 
    max-width: 8000px; 
    max-height: auto; 

} 

background{ 
    max-height: auto; 
    max-width: 100%; 

} 

character{ 
    max-height: 20px; 
    margin: auto; 

} 
background img { 
    width: 100%; 
} 
floor img { 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
} 
character img { 
    position: absolute; 
    width: 200px; 
    bottom: 140px; 
    left: calc(50% - 100px); 
}

Quelle

2017-11-16 11:27:46

Erstellen eines Side-Scrolling-Website

Antwort

Verwandte Themen