Voor een mini onderneming moet ik een website maken http://luckynation.be nu ben ik bezig met exmerimenteren van parallax, door gebruik te maken van jarralax. Nu is het zo dat wanneer ik de tekst met dde afbeelding wil laten bewegen hij dit niet doet, terwijl hij dit aan de andere kant wel doet. Zie website voor een beter beeld.
Dit is mijn code:
index.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://jarallax.com/jquery-1.7.1.min.js"></script>
<script src="http://jarallax.com/download/jarallax-0.2.js" type="text/javascript"></script>
<script type="text/javascript">
init = function(){
var jarallax = new Jarallax();
jarallax.addAnimation('.functie1', [{progress:'0%', opacity:'0'},{progress:'10%', opacity:'1'}]);
jarallax.addAnimation('.functie1', [{progress:'10%', opacity:'1'},{progress:'15%', opacity:'0'}]);
jarallax.addAnimation('.thomas, .thomasnaam', [{progress:'0%', opacity:'0', left:'0%'},{progress:'10%', opacity:'1', left:'35%'}]);
jarallax.addAnimation('.thomas', [{progress:'10%', opacity:'1'},{progress:'15%', opacity:'0'}]);
jarallax.addAnimation('.andreas .andreasnaam', [{progress:'0%', opacity:'0', right:'0%'},{progress:'10%', opacity:'1', right:'35%'}]);
jarallax.addAnimation('.andreas', [{progress:'10%', opacity:'1'},{progress:'15%', opacity:'0'}]);
jarallax.addAnimation('.functie2', [{progress:'15%', opacity:'0'},{progress:'25%', opacity:'1'}]);
jarallax.addAnimation('.functie2', [{progress:'25%', opacity:'1'},{progress:'30%', opacity:'0'}]);
jarallax.addAnimation('.emiel .emielnaam', [{progress:'15%', opacity:'0', left:'0%'},{progress:'25%', opacity:'1', left:'35%'}]);
jarallax.addAnimation('.emiel', [{progress:'25%', opacity:'1'},{progress:'30%', opacity:'0'}]);
jarallax.addAnimation('.jarik . jariknaam', [{progress:'15%', opacity:'0', right:'0%'},{progress:'25%', opacity:'1', right:'35%'}]);
jarallax.addAnimation('.jarik', [{progress:'25%', opacity:'1'},{progress:'30%', opacity:'0'}]);
}
</script>
</head>
<body onload="init()">
<div id="header">
<div id="logo">
<img src="/images/logo-luckynation.png" height="48" width="48" border="0" />
<h1>Lucky Nation</h1>
</div>
</div>
<div id="content">
<div id="mtt">
<h2 class="meettheteam">Meet the team</h2>
<h2 class="functie1">Gedelegeerd bestuurders</h2>
<div class="thomas"><h3 class="thomasnaam">Thomas Geiregat</h3></div>
<div class="andreas"><h3 class="andreasnaam">Andreas Craeymeersch</h3></div>
<h2 class="functie2">Administratie</h2>
<div class="emiel"><h3 class="emielnaam">Emiel Desmet</h3></div>
<div class="jarik"><h3 class="jariknaam">Jarik Tytgat</h3></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
</html>
style.css:
/* GOOGLE WEBFONTS IMPORTEREN */
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
/* HEADER */
h2, h3, #logo {
position: fixed;
}
#header {
background-color: #f39c12;
height: 70px;
}
#logo img {
float:left;
}
#logo {
margin: 0px 0px 0px 100px;
padding: 10px 0px 0px 0px;
}
#logo h1 {
width: 220px;
background-color: #c0392b;
border-radius: 25px 25px 25px 25px;;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 34px;
margin: 0px 0px 0px 55px;
padding: 0px 0px 5px 25px;
}
/* CONTENT */
#content {
width: 70%;
margin: 0 auto;
}
/* MEET THE TEAM */
.meettheteam {
display: block;
font-family: 'Pacifico', cursive;
color: #000000;
font-size: 34px;
}
#mtt h3 {
font-family: 'Indie Flower', cursive;
opacity: 0;
width:70%;
}
.functie1, .functie2 {
margin-top: 100px;
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 25px;
width: 70%;
opacity: 0;
}
.thomas {
background: url(/images/thomas-profiel.png) no-repeat;
}
.andreas {
background: url(/images/andreas-profiel.png) no-repeat;
}
.emiel {
background: url(/images/emiel-profiel.png) no-repeat;
}
.jarik {
background: url(/images/jarik-profiel.png) no-repeat;
}
.thomas, .emiel{
border-radius: 75px;
position: fixed;
opacity: 0;
height: 150px;
width: 150px;
left: 0%;
margin-top: 200px;
}
.thomasnaam, .emielnaam {
margin-top: 150px;
left: 35%;
}
.andreas, .jarik{
border-radius: 75px;
position: fixed;
opacity: 0;
height: 150px;
width: 150px;
right: 0%;
margin-top: 200px;
}
.andreasnaam, .jariknaam {
margin-top: 150px;
right: 35%;
}
Het probleem zit hem hier:
jarallax.addAnimation('.thomas, .thomasnaam', [{progress:'0%', opacity:'0', left:'0%'},{progress:'10%', opacity:'1', left:'35%'}]);
jarallax.addAnimation('.thomas', [{progress:'10%', opacity:'1'},{progress:'15%', opacity:'0'}]);
jarallax.addAnimation('.andreas .andreasnaam', [{progress:'0%', opacity:'0', right:'0%'},{progress:'10%', opacity:'1', right:'35%'}]);
jarallax.addAnimation('.andreas', [{progress:'10%', opacity:'1'},{progress:'15%', opacity:'0'}]);
In de eerste 3 regels werkt alles naar wens, wanneer ik dit dan probeer over te brengen naar 'andreas', loopt het fout, zonder 'andreasnaam' werkt alles goed, echter wanneer ik het wel toevoeg, beweegt 'andreas' niet meer. Hoe kan ik dit oplossen.
Alvast bedankt
Louis