Beiträge von el-julio

el-julio

Hat sich erledigt ... ich weiß woran es lag ...
hatte den main div falsch gelegt.

el-julio

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" />

</style>
<script>
$(document).ready(function(){
$(".main").onepage_scroll({
sectionContainer: "section",
responsiveFallback: 600,
loop: true
});
});
</script>
</head>

<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>

</div>
</section>

</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;
}

el-julio

perfekt ..danke schön.
Ich hab auch das CSS nocheinmal umgeschrieben, es funktioniert jetzt

el-julio

Hallo liebe Forumsmitglieder,

ich habe folgendes Problem beim erstellen eines one pager. Ich hoffe jemand kann mir helfen. Ich will als Startseite ein Video abspielen lassen (was auch funktioniert)
,wenn man dann weiterscrollt soll auf der "nächsten Seite" ein Bild erscheinen im Vollformat. Mein Problem gerade ist, dass ich zwar das Video und das Bild einbinden kann, aber ich nicht nach unten scrollen kann. Ich kann also nicht zum Bild scrollen und sehe es nur am unteren Rand des Browsers. J-Query will ich hier benutzen um möglichst elegant von einer section zur nächsten section zu gelangen, aber auch ohne die Einbindung von jquery funktioniert das scrollen nicht.
Ich habe hier mal meinen Code reinkopoert und würde mich freuen, wenn jemand eine Lösung kennen würde.

Beste Grüße
El Julio

HTML Code:

<!DOCTYPE html>
<html lang="de">
<head>
<title> Menschen die nach oben starren</title>
<link rel="stylesheet" href="onepage-scroll.css">
<script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.scrollify.min.js"></script>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
<title> Menschen die nach oben starren</title>
</head>

<body>

<section>
<div class="container">
<video autoplay>
<source src="video/Anfang.3gp" type="video/3gp">
<source src="video/Ufo_3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</section>

</div>
</div>
</section>

</body>
</html>

css-code

body {
background-color: #000000;
width:100%;
height:100%;
overflow:scroll;
margin-bottom: auto;
}

.container video{
position:fixed;
top: 50%;
left: 50%;
min-width: 75%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
margin: auto;
}

.zwei .container img {
position:fixed;
top: 50%;
left: 50%;
max-width: 120%;
max-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
margin-top: 1000px;

}

Beiträge von el-julio

one-pager, scroll, image nicht sichtbar

one-pager, scroll, image nicht sichtbar

one pager lässt sich nicht scrollen

one pager lässt sich nicht scrollen