Estoy intentando hacer una web, en la que aparte de una sencilla animación parallax, una vez llegues a un punto, aparezcan una serie de mensajes (titulobebe, texto1bebe, texto2bebe...) solo una vez llegues a ese punto del scroll.
Me encuentro con que no funciona, y la única forma de que se carguen los elementos es haciendo o scroll hasta arriba, hasta abajo, o scroll horizontal. No se en que me estoy equivocando. Me podeis echar una mano? Os copio el codigo:
HTML
Código:
CSS<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Utopicum - No nos vas a callar</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" charset="utf-8" src="chupetin_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-47166392 { visibility:hidden; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
</script>
</head>
<body>
<header>
<div id="logo">
<img src="logo.png" alt=""/>
</div>
</header>
<div id="chupete">
<div id="Stage" class="EDGE-47166392"></div>
</div>
<div class="parallax">
<div id="estrellicas"> </div>
<div class="parallax__layer parallax__layer--back">
<div id="pisos">
<img src="pisos.png" width="960" height="508" alt=""/></div> </div>
<div class="parallax__layer parallax__layer--base">
<div id="texto1">SÍ, SOMOS OTRA DE ESAS AGENCIAS DE PUBLICIDAD QUE QUIERE QUE LE PRESTES ATENCIÓN</div>
<div id="texto2">PERO NOSOTROS SOMOS DISTINTOS</div>
<div id="texto3">TENEMOS ALGO DE LO QUE EL RESTO
DE AGENCIAS NO PUEDE PRESUMIR</div> </div>
<div id="casabebe">
<div id="titulobebe" class="hideme"> ACABAMOS<br>DE NACER</div>
<div id="texto1bebe" class="hideme">Y AUNQUE NO NOS<br> PILLAS EN PAÑALES </div>
<div id="texto2bebe" class="hideme"> NO NOS VAMOS<br>A CALLAR</div>
<div id="texto1bebe" class="hideme"> HASTA QUE NOS<br>HAGAS CASO</div>
<div class="parallax__layer parallax__layer--back">
<div id="fondo2"> <img src="fondohabita.png" /></div></div>
<div class="parallax__layer parallax__layer--base">
<div id="fondo1"> <img src="fondohabitabase.png" width="960" height="1031" alt=""/></div></div>
</div>
</div>
</body>
</html>
Código:
@charset "UTF-8";
/* CSS Document */
@font-face {
font-family: 'Klinic';
src: url('font/KlinicSlabMedium.otf');
}
body {
margin: 0;
}
header{
width: 100%;
height: 100px;
background-color:#000;
position:fixed;
z-index:2;
}
#logo{
margin: 0 auto;
width: 150px;
height: 31px;
padding-top:30px;
}
#chupete{
width: 100px;
z-index:1;
position:fixed;
margin-left: 46%;
margin-top: 79px;
}
#texto1{
width: 300px;
height: 200px;
margin: 430px auto;
text-align:center;
color:#FFF;
z-index: 5;
font-family:Klinic;
font-size: 18px;
}
#texto2{
width: 300px;
height: 200px;
margin: 130px auto;
text-align:center;
color:#FFF;
z-index: 5;
font-family:Klinic;
font-size: 18px;
}
#texto3{
width: 300px;
height: 200px;
margin: 330px auto;
text-align:center;
color:#FFF;
z-index: 5;
font-family:Klinic;
font-size: 18px;
}
#pisos{
width: 960px;
height: 2000px;
margin: 1600px auto;
}
.parallax {
perspective: 3px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
z-index: 5;
background-image:url(bg.jpg);
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
#casabebe{
width: 100%;
height: 2290px;
background-color:#000;
margin-top: 2000px;
position:absolute;
background-image:url(fondo2.jpg);
border:none;
}
#estrellicas{
height: 3700px;
width: 1920px;
background-image:url(estrellas.png);
position:absolute;
}
#fondo1{
margin: 0 auto;
width: 960px;
margin-top: 600px;
}
#fondo2{
margin: 0 auto;
width: 1250px;
margin-top: 790px;
}
#titulobebe{
color:#000;
font-family:Klinic;
font-size: 32px;
width: 300px;
margin: 0 auto;
padding-right: 520px;
padding-top: 70px;
text-align:right;
line-height: 26px;
}
#texto1bebe{
color:#FFF;
font-family:Klinic;
font-size: 19px;
width: 300px;
margin: 0 auto;
padding-left: 520px;
padding-top: 120px;
text-align:left;
}
#texto2bebe{
color:#fff;
font-family:Klinic;
font-size: 19px;
width: 300px;
margin: 0 auto;
padding-right: 520px;
padding-top: 70px;
text-align:right;
}
.hideme
{
opacity:0;
}
Gracias
