parallax html und css fehler

-2

Ich bin neu in der Codierung, aber kann nicht scheinen, einfache Homepage mit Parallax Bild zu arbeiten. Ich habe es schon öfter anders ausprobiert, als ich mich erinnern kann und keiner von ihnen scheint zu funktionieren. Kann jemand einen Fehler mit meinem Code sehen, den ich nicht weiß?parallax html und css fehler

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #f9f9f9; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    color: #000000; 
 
    line-height: 1.5; 
 
    overflow-x: hidden; 
 
} 
 
h1 { 
 
    font-size: 36px; 
 
} 
 
h2 { 
 
    font-size: 30px; 
 
} 
 
h3 { 
 
    font-size: 24px; 
 
} 
 
h4 { 
 
    font-size: 20px; 
 
} 
 
h5 { 
 
    font-size: 18px; 
 
} 
 
h6 { 
 
    font-size: 16px; 
 
} 
 
/*Menu*/ 
 

 
#menu {} #menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
#menu li { 
 
    float: left; 
 
    list-style: none; 
 
} 
 
#menu a { 
 
    background-color: #cccccc; 
 
    display: block; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
    display: block; 
 
    padding: 14px 14px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 
#menu a:hover { 
 
    background-color: #ffffff; 
 
    color: #000000; 
 
} 
 
/*Parallax*/ 
 

 
.parallax1-img, 
 
.parallax2-img. { 
 
    opacity: 0.4; 
 
    background-size: 206px 147px; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: repeat; 
 
} 
 
.parallax1-img { 
 
    min-height: 100%; 
 
    background-image: url("./logo.jpg"); 
 
} 
 
.parallax2-img { 
 
    min-height: 30%; 
 
    background-image: url("./logo.jpg"); 
 
} 
 
/*Containers*/ 
 

 
.container { 
 
    position: relative; 
 
} 
 
.container-middle { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
/*Text*/ 
 

 
.center { 
 
    text-align: center!important; 
 
} 
 
.padding-xlarge { 
 
    padding: 16px 32px!important; 
 
} 
 
.black { 
 
    color: #fff!important; 
 
    background-color: #000!important; 
 
} 
 
.xlarge { 
 
    font-size: 24px!important; 
 
} 
 
.animate-opacity { 
 
    animation: opac 1.5s; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
 
    <link rel="stylesheet" href="index_styles.css"> 
 
</head> 
 

 
<body> 
 
    <!-- Navbar (sit on top) --> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li><a>HOME</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <!-- Parallax Effect 1--> 
 
    <div class="parallax1-img container"> 
 
    <div class="container-middle" style="white-space: nowrap;"> 
 
     <span class="center padding-xlarge black xlarge animate-opacity">My WEBSITE</span> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2016-10-27 jel_car_16

Für Parallax, auf jeden Fall benötigen Sie JavaScript. –

Das ist nicht wahr http://keithclark.co.uk/articles/pure-css-parallax-websites/ – Roberrrt

@Roberrrt ja du hast recht robert. –

Wenn Sie möchten, wie height: 100%; relative Höhe verwenden, müssen Sie festlegen:

html, body { 
height: 100%; 
}

Wenn Sie nur die Körpergröße auf 100% haben, die nicht funktioniert hat.

Blick auf diese: http://codepen.io/powro01/pen/pEBBgR

Ich denke, das ist der Effekt, was Sie wollen.

PS. für Parallaxen-Effekt müssen Sie background-attachment festlegen: behoben nach background-image.

Quelle

2016-10-27 08:43:41

parallax html und css fehler

Antwort

Verwandte Themen