Inhalt liegt unter der Slideshow statt im Anschluss angezeigt zu werden
Auf der Suche nach einer html-Slideshow bin ich hier in einem anderen Beitrag auf eine schöne Lösung von @basti1012 gestoßen, die ich in meiner Website verwendet habe (hoffe du hast nichts dagegen @basti1012).
Und da sind wir schon bei meinem Problem: Wie kriege ich es hin, dass der Inhalt der Seite im Anschluss der Slideshow angezeigt wird, und nicht darunter liegt? Die Slideshow soll immer formatfüllend, so groß wie der Viewport sein. Das klappt ja auch, nur sieht man beim überblenden der Slideshow-Sequenzen den weiteren Seiten-Inhalt durchschimmern. Der Inhalt dürfte aber erst beim scrollen in den Viewport reinkommen. Wie geht das?
Würde mich freuen, wenn jemand eine Antwort dazu weiß, herzlichen Dank :-)
Ralf
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<style>
*{
margin:0;
padding:0;
}
body{
font-family: "helvetica neue", helvetica;
background: #000;
font-weight: 400;
font-size: 15px;
color: #aa3e03;
overflow-y: scroll;
overflow-x: hidden;
}
#logo{
margin-top: -0.3em;
margin-left: 0.3em;
position: relative;
display: block;
max-width: 40%;
}
label{
display: block;
background: #FA5882;
cursor:pointer;
width: 75px;
height: 50px;
position: fixed;
right: 0;
z-index: 99999999;
border-radius: 4px;
opacity: 0.7;
}
.line {
position: absolute;
left: 10px;
height: 4px; width: 55px;
background: #fff;
border-radius: 2px;
display: block;
transition: 0.5s;
transform-origin: center;
}
.line:nth-child(1) {
top: 12px;
}
.line:nth-child(2) {
top: 24px;
}
.line:nth-child(3) {
top: 36px;
}
#hamburg:checked + label .line:nth-child(1){
transform: translateY(12px) rotate(-45deg);
}
#hamburg:checked + label .line:nth-child(2){
opacity:0;
}
#hamburg:checked + label .line:nth-child(3){
transform: translateY(-12px) rotate(45deg);
}
#hamburg:checked + label + nav.topmenu {
max-height: 100%;
}
#hamburg {
display:none;
}
main,body{
display:flex;
flex-direction:column;
}
nav.topmenu {
height: 100vh;
max-height: 0;
overflow: hidden;
transition: all 0.5s;
background: #F5A9BC;
opacity: 0.95;
position: fixed;
z-index: 1;
width: 100%;
font-weight: 200;
text-transform: uppercase;
font-size: 1.5em;
color: #FE2E64;
}
a {
text-decoration: none;
}
a.linkfarbe:link {
color: #FFFFFF;
}
a.linkfarbe:active {
color: #688A08;
}
li {
list-style: none;
margin-left: -1.1em;
}
@media (min-width: 30em) {
label.hamburg {
transform: scale(0.7);
margin-top: 2em;
margin-right: 2em;
}
nav.topmenu {
font-size: 3em;
padding-left: 11%;
}
#logo{
margin-left: 0.7em;
position: relative;
display: block;
max-width: 23%;
}
}
@media (min-width: 40em) {
label{
transform: scale(0.7);
margin-top: 2em;
margin-right: 2em;
}
nav.topmenu {
font-size: 3em;
padding-left: 11%;
}
}
#slidebox,.slideshow{
overflow:hidden;
display:block;
height:100vh;
}
.slideshow li span {
width: 100%;
height: 100vh;
position:absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
animation: titleAnimation 18s linear infinite 0s;
}
.slideshow li div h3 {
font-family: "helvetica neue", helvetica;
text-transform: uppercase;
font-size: 80px;
line-height: 200px;
color: rgba(255,255,255, 0.8);
}
.slideshow li:nth-child(1) span {
background-image: url(/image/bildhafte_navi_gesichbykta.jpg)
}
.slideshow li:nth-child(2) span {
background-image: url(/image/ernaehrung_1nbjma.jpg);
animation-delay: 3s;
}
.slideshow li:nth-child(3) span {
background-image: url(/image/bq1a6105zik4v.jpg);
animation-delay: 6s;
}
.slideshow li:nth-child(4) span {
background-image: url(/image/bq1a60081bjaq.jpg);
animation-delay: 9s;
}
.slideshow li:nth-child(5) span {
background-image: url(/image/img_0757zqj5b.jpg);
animation-delay: 12s;
}
.slideshow li:nth-child(6) span {
background-image: url(/image/75513573_197734190570sujiz.jpg);
animation-delay: 15s;
}
.slideshow li:nth-child(2) div {
animation-delay: 3s;
}
.slideshow li:nth-child(3) div {
animation-delay: 6s;
}
.slideshow li:nth-child(4) div {
animation-delay: 9s;
}
.slideshow li:nth-child(5) div {
animation-delay: 12s;
}
.slideshow li:nth-child(6) div {
animation-delay: 15s;
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
transform:scale(1)
}
8% {
opacity: 1;
transform: scale(1);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.05);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
8% {
opacity: 1;
transform: translateY(0px);
}
17% {
opacity: 1;
transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
transform: scale(1);
}
100% { opacity: 0 }
}
@media screen and (max-width: 1140px) {
.slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.slideshow li div h3 { font-size: 50px }
}
#statement {
font-size: 2.4em;
line-height: 1.3em;
font-weight: 200;
text-transform: uppercase;
color: white;
background: #86B404;
padding:1.3em 0.6em;
}
h1 {
font-weight: 200;
font-size: 2.4em;
line-height: 1.2em;
color: #FA5882;
margin-left: 0.3em;
margin-right: 0.3em;
}
#copy {
color: #610B21;
margin:1.2em 0.9em;
font-weight:900;
font-size:18px;
}
p{
color: #610B21;
margin:1.2em 0.9em;
}
#copy_hervorhebung {
border-top: 2px dotted #FA5882;
border-bottom: 2px dotted #FA5882;
color: #86B404;
font-style: italic;
font-weight: bold;
}
footer{
display:flex;
}
.footer_row{
flex:1;
text-align:center;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
<title>slideshow_prodermis.html</title>
</head>
<body>
<input type="checkbox" id="hamburg">
<label for="hamburg">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</label>
<nav class="topmenu">
<ul>
<li><a class="linkfarbe" tabindex="0" aria-current="page">Home</a></li>
<li><a class="linkfarbe" href="gesichtspflege_prodermis.html">Gesichtspflege</a></li>
<li><a class="linkfarbe" href="ernaehrungsberatung_prodermis.html">Ernährungs- und<br>Vitalstoffberatung</a></li>
<li><a class="linkfarbe" href="sonstige_leistungen_prodermis.html">Sonstige Leistungen</a></li>
<li><a class="linkfarbe" href="https://shop.jda.de/catalog/index.php?partnerid=53117">Onlineshop</a></li>
<li><a class="linkfarbe" href="kontakt_prodermis.html">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="slidebox">
<img id="logo" src="/image/logo_prodermis_negdzjsk.png" width="100%" alt="Logo Prodermis negativ">
<ul class="slideshow">
<li><span>Image 01</span><div><h3>Gesunde Haut von außen und innen.</h3></div></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
</div>
<div id="statement">PRODERMIS Kosmetik-Praxis.<br>
Gesunde Haut von außen und innen.
</div>
<div class="row">
<img src="/image/bq1a6130_schmalerf8k2d.jpg" width="100%" alt="Heidrun Brenk">
<h1>Gesunde Haut betrachte ich ganzheitlich.</h1>
<p id="copy">Mein Name ist Heidrun Brenk,<br>
Dipl.-Fachkosmetikerin,<br>
Derma Coach-Hautspezialistin<br>
und Ernährungsberaterin.</p>
<p>Apparative Kosmetik und Pflegeprodukte mit hochwertigen Wirkstoffen können von außen viel für die Haut tun. Ebenso wichtig ist die Pflege von innen – gesunde Haut hängt unmittelbar mit einer gesunden Ernährung zusammen.</p>
<p>Hautprobleme kommen z.B. häufig von einem zu viel an saurer Nahrung. Falten im Gesicht können ihren Ursprung im Darm haben. Wir alle haben Gifte/Toxine im Blut – zu viel davon zeigt sich unzweifelhaft am Hautbild.</p>
<p id="copy_hervorhebung">Bei exklusiven kosmetischen Wohlfühlbehandlungen können Sie sich entspannen, erholen und Ihre Haut spüren. Begleitend können Sie bei einer Haut-, Ernährungs- und Vitalstoffberatung erfahren, wie Sie Ihre Haut und Ihren Körper in Balance bringen können.
</p>
<p>Mit über 30 Jahren Berufserfahrung, ergebnisorientiertem Arbeiten und Ihrer Unterstützung bei der Pflege Ihrer Haut, erzielen wir gemeinsam schnell erkennbare und nachhaltige Ergebnisse.</p>
<p>Ich freue mich auf Sie, Ihre Heidrun Brenk.</p>
</div>
</main>
<footer>
<div class="footer_row">Links </div>
<div class="footer_row">Mitte </div>
<div class="footer_row">Rechts </div>
</footer>
</body>
</html>