I am using The SuperScrollorama plugin, and used the "simple-demo" included with the plug-in (which works fine..) as a template in which I want to fade the given elements. Something identical to the "design process" section of this website www.comradeweb.com if you scroll about halfway down, you will see a cool timeline they have built outlining their design process.
Like I said, I used the SimpleDemo included with SuperScrollorama which does work for me has a template for my fading tweens. However when I test my version my images fail to show up, although the images are their which I can tell by the scroll bar being scrollable but just being hidden and not becoming visible on the scroll event.
I am very new to this, so its probably something basic. Any help is greatly appreciated, thanks in advance!
Here is the SimpleDemo, which I have based mine of off... (this one works)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>SUPERSCROLLORAMA - Simple Demo #1</title>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<style type="text/css">
#examples-1 {
position: relative;
}
body {
background-color: #272827;
}
#fade-it {
position: absolute;
left: 260px;
top: 33px;
}
#1fade-it {
position: absolute;
left: 44px;
top: 180px;
}
#2fade-it {
position: absolute;
left: 295px;
top: 415px;
}
</style>
</head>
<body class="simple-demo">
<div id="content-wrapper">
<div id="examples-1">
<img alt="img1" id="fade-it" src="img1.png" width="639" height="249" />
<img alt="img2" id="1fade-it" src="img2.png" width="733" height="313" />
<img src="img3.png" id="2fade-it">
</div>
</div>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.superscrollorama.js"></script>
<script>
$(document).ready(function() {
var controller = $.superscrollorama();
// individual element tween examples
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
controller.addTween('#fade-it', TweenMax.from( $('#1fade-it'), .5, {css:{opacity: 0}}));
controller.addTween('#fade-it', TweenMax.from( $('#2fade-it'), .5, {css:{opacity: 0}}));
});
</script>
</body></html>
And here is my Code, which does not work,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>SUPERSCROLLORAMA - Simple Demo #2</title>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<style>
body { background-color:#000;
}
#examples-1 {
position: relative;
}
#fade-it {
position: absolute;
left: 260px;
top: 33px;
}
#img2 {
position: absolute;
left: 44px;
top: 180px;
}
#img3 {
position: absolute;
left: 295px;
top: 415px;
}
#img4 {
position: absolute;
left: 235px;
top: 638px;
}
#img5 {
position: absolute;
left: 527px;
top: 1029px;
}
#img6 {
position: absolute;
left: 127px;
top: 1190px;
}
#img7 {
position: absolute;
left: 476px;
top: 1384px;
}
#img8 {
position: absolute;
left: 105px;
top: 1651px;
}
#img9 {
position: absolute;
left: 133px;
top: 1860px;
}
#img10 {
position: absolute;
left: 430px;
top: 2096px;
}
#img11 {
position: absolute;
left: 222px;
top: 2143px;
}
#img12 {
position: absolute;
left: 469px;
top: 2419px;
}
#img13 {
position: absolute;
left: -2px;
top: 2496px;
}
#img14 {
position: absolute;
left: 152px;
top: 2716px;
}
#img15 {
position: absolute;
left: 20px;
top: 3026px;
}
#img16 {
position: absolute;
left: 447px;
top: 3051px;
}
#img17 {
position: absolute;
left: 315px;
top: 3363px;
}
#img18 {
position: absolute;
left: 279px;
top: 3539px;
}
#img19 {
position: absolute;
left: 97px;
top: 3621px;
}
#img20 {
position: absolute;
left: -7px;
top: 3906px;
}
</style>
</head>
<body class="simple-demo">
<div id="content-wrapper">
<div id="examples-1">
<img alt="img1" id="fade-it" src="img1.png" width="639" height="249" />
<img alt="img3" id="img3" src="img3.png" />
<img alt="img4" id="img4" src=img4.png width="544" height="426" />
<img alt="img7" id="img7" src="img7.png" width="528" height="425" />
<img alt="img2" id="img2" src="img2.png" width="733" height="313" />
<img alt="img5" id="img5" src="img5.png" width="420" height="256" />
<img alt="img6" id="img6" src="img6.png" width="565" height="442" />
<img alt="img8" id="img8" src="img8.png" width="733" height="238" />
<img alt="img9" id="img9" src="img9.png" width="563" height="229" />
<img alt="img10" id="img10" src="img10.png" width="412" height="71" />
<img alt="img11" id="img11" src="img11.png" width="452" height="388" />
<img alt="img12" id="img12" src="img12.png" width="371" height="210" />
<img alt="img13" id="img13" src="img13.png" width="984" height="336" />
<img alt="img14" id="img14" src="img14.png" width="791" height="342" />
<img alt="img15" id="img15" src="img15.png" width="652" height="227" />
<img alt="img16" id="img16" src="img16.png" width="475" height="374" />
<img alt="img17" id="img17" src="img17.png" width="361" height="187" />
<img alt="img18" id="img18" src="img18.png" width="457" height="87" />
<img alt="img19" id="img19" src="img19.png" width="779" height="275" />
<img alt="img20" id="img20" src="img20.png" width="1139" height="332" />
</div>
</div>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.superscrollorama.js"></script>
<script>
$(document).ready(function() {
// This example adds a duration to the tweens so they are synced to the scroll position
var controller = $.superscrollorama();
// amount of scrolling over which the tween takes place (in pixels)
var scrollDuration = 200;
// individual element tween examples
controller.addTween('#fade-it', TweenMax.from( $('#img1'), .5, {css:{opacity: 0}}), scrollDuration);
controller.addTween('#fade-it', TweenMax.from( $('#img2'), .5, {css:{opacity: 0}}), scrollDuration);
controller.addTween('#fade-it', TweenMax.from( $('#img3'), .5, {css:{opacity: 0}}), scrollDuration);
controller.addTween('#fade-it', TweenMax.from( $('#img4'), .5, {css:{opacity: 0}}), scrollDuration);
});
</script>
</body>
</html>