Hallo liebe Community,
ich habe folgendes Problem und würde mich sehr freuen, wenn jemand von euch eine Lösung dafür kennen würde.
ich habe ein one-pager mit einem j-query slide system. Dies funktoniert auch wunderbar. Als Startseite habe ich ein video eingebettet und
wenn man runterscrollt soll ein image kommen. Dies hab ich natürlich auch in meiner html eingebettet, aber wird auf der seite nicht sichtbar.
Ich finde das Bild bzw die Bilder einfach nicht auf meiner Seite. Könnten diese unter irgendeiner layer liegen?
Ich würde mich freuen, wenn mir jemand helfen könnte.
Beste Grüße
El Julio
mein html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menschen die nach oben starren</title>
<link rel="image_src" href="/images/notify_better_image.png" />
<link rel="shortcut icon" id="favicon" href="favicon.png">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico:400' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>
<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
</style>
<script>
$(document).ready(function(){
$(".main").onepage_scroll({
sectionContainer: "section",
responsiveFallback: 600,
loop: true
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="main">
<section class="page1">
<div class="page_container">
<video autoplay loop>
<source src="video/Anfang.3gp" type="video/3gp">
<source src="video/Ivan1.mp4" type="video/mp4">
Your browser does not support the video tag.
</div>
</div>
</section>
<section class="page2">
<div class="page_container">
<img src="image/books.jpg">
</div>
</section>
<section class="page3">
<div class="page_container">
<img src="image/books.jpg">
</div>
</section>
</div>
</body>
</html>
css code
body, html {
margin: 0;
overflow: hidden;
-webkit-transition: opacity 400ms;
-moz-transition: opacity 400ms;
transition: opacity 400ms;
}
body, .onepage-wrapper, html {
display: block;
position: static;
padding: 0;
width: 100%;
height: 100%;
}
.onepage-wrapper {
width: 100%;
height: 100%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
.onepage-wrapper .section {
width: 100%;
height: 100%;
}
.onepage-pagination {
position: absolute;
right: 10px;
top: 50%;
z-index: 5;
list-style: none;
margin: 0;
padding: 0;
}
.onepage-pagination li {
padding: 0;
text-align: center;
}
.onepage-pagination li a{
padding: 10px;
width: 4px;
height: 4px;
display: block;
}
.onepage-pagination li a:before{
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(0,0,0,0.85);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.onepage-pagination li a.active:before{
width: 10px;
height: 10px;
background: none;
border: 1px solid black;
margin-top: -4px;
left: 8px;
}
.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
overflow: auto;
}
.disabled-onepage-scroll .onepage-wrapper .section {
position: relative !important;
top: auto !important;
left: auto !important;
}
.disabled-onepage-scroll .onepage-wrapper {
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-ms-transform: none !important;
min-height: 100%;
}
.disabled-onepage-scroll .onepage-pagination {
display: none;
}
body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
position: inherit;
}
html {
height: 100%;
}
body {
background: #E2E4E7;
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
-webkit-font-smoothing: antialiased;
}
.wrapper {
height: 100% !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.pointer {
color: #9b59b6;
font-family: 'Pacifico', cursive;
font-size: 30px;
margin-top: 15px;
}
code {
margin: 20px 1%;
float: left;
width: 48%;
height: 105px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
border-radius: 5px;
padding:5px;
color: white;
text-align: center;
font-size: 15px;
margin-top: 25px;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
code.html {
color: #7EC9E6;
}
code.js {
color: #FFAD00;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.main h1 {
padding:150px 50px;
float: left;
width: 100%;
font-size: 45px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
color: white;
margin: 0;
}
.reload.bell {
font-size: 12px;
padding: 20px;
width: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}
.main section .page_container {
position: relative;
margin: 0 auto 0;
max-width: 100%;
z-index: 3;
}
.main section {
overflow: hidden;
}
.main section > img {
position: absolute;
max-width: 100%;
z-index: 1;
}
.main section.page1 {
background:rgb(230, 217, 200);
}
.main section .page_container video {
width: 100%;
height: 100%;
}
.main section.page2 {
background: #000000;
}
.main section.page2 > img {
position: absolute;
}
.main section.page2 .page_container {
margin-top: 100%;
overflow: hidden;
}
.main section.page2 .page_container img {
width: 100%;
height: 100%
}
.viewing-page-2 .back{
background: rgba(0, 0, 0, 0.25);
color: #FFF;
}
.main section.page3 {
}
.main section.page3 .page_container {
overflow: hidden;
width: 100%;
}
body.disabled-onepage-scroll .onepage-wrapper section {
min-height: 100%;
height: auto;
}
body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container {
padding: 20px;
margin-top: 150px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body.disabled-onepage-scroll section .page_container h1{
text-align: center;
font-size: 50px;
}
body.disabled-onepage-scroll section .page_container h2, body.disabled-onepage-scroll section .page_container .credit, body.disabled-onepage-scroll section .page_container .btns{
text-align: center;
width: 100%;
}
body.disabled-onepage-scroll .main section.page1 > img {
position: absolute;
width: 80%;
left: 10%;
}
body.disabled-onepage-scroll .main section > img {
position: relative;
max-width: 80%;
bottom: 0;
}
body.disabled-onepage-scroll code {
width: 95%;
margin: 0 auto 25px;
float: none;
overflow: hidden;
}
body.disabled-onepage-scroll .main section.page3 .page_container {
width: 90%;
margin-left: auto;
margin-right: auto;
right: 0;
}