Menu
I found this code in a magazine, from my understanding, it’s supposed to slide a full image into view on scroll, overlapping the previous image like this:[url]http://fitness.reebok.co.uk/be-more-human/#/home
The code is as follows:
CSS:
[CODE]
.inView{
opacity:1;
-webkit-transform:translateY(0); -ms-transform: translateY(0); transform:translateY(0); -webkit-animation:none;
}
.slideIn{
opacity:0;
-webkit-transform:
translateY(200px);
-ms-transform: translateY(200px);
transform:translateY(200px);
-webkit-animation-name:slideIn;
animation-name:slideIn;
-webkit-animation-duration:1.5s;
animation-duration:1.5s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
/*.inView class here or below next class!*/
@keyframes slideIn{
to{
opacity:1;
-webkit-transform:translateY(0); -ms-transform: translateY(0); transform:translateY(0);
}
}
Javascript:
[CODE]<script src=”http://code.jquery.com/jquery-1.11.2.min.js”></script>
<script src=”jquery.visible.js”></script>
<script>
//returns true if whole element is visible:
$(‘#element’).visible();
//Returns true if only part of element is visible
$(‘#element’).visible(true);
$(‘#element:visible’).visible();
$(‘#element:visible’).visible(false,true);
</script>
<script>
$(“.content”).each(function(index,elment){
if ($(element).visible(true,’vertical’)){
$(element).addClass(“inView”);
}
});
</script>
<script>
var prevScrollTop =0;
$(window).scroll(function(event){
var scrollTop=$(this).scrollTop();
if (scrollTop > prevScrollTop){
$(“.content”).each(function(index,element){
if ($(element).visible(true,’vertical’)){
$(element).addClass(“slideIn”);
}
});
prevScrollTop=scrollTop;
}
});
</script>
My code:
[CODE]<html>
<head>
<style>
.inView{
opacity:1;
-webkit-transform:translateY(0); -ms-transform: translateY(0); transform:translateY(0); -webkit-animation:none;
}
.slideIn{
opacity:0;
-webkit-transform:
translateY(200px);
-ms-transform: translateY(200px);
transform:translateY(200px);
-webkit-animation-name:slideIn;
animation-name:slideIn;
-webkit-animation-duration:1.5s;
animation-duration:1.5s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
/*.inView class here or below next class!*/
@keyframes slideIn{
to{
opacity:1;
-webkit-transform:translateY(0); -ms-transform: translateY(0); transform:translateY(0);
}
}
</style>
<title>I like cheese</title>
</head>
<body>
<div class=”container”>
<img src=”BG.jpg”></img>
</div>
<div class=”img2″>
<img src=”ChristmasTree1.jpg”></img>
</div>
<script src=”http://code.jquery.com/jquery-1.11.2.min.js”></script>
<script src=”jquery.visible.js”></script>
<script>
//returns true if whole element is visible:
$(‘#element’).visible();
//Returns true if only part of element is visible
$(‘#element’).visible(true);
$(‘#element:visible’).visible();
$(‘#element:visible’).visible(false,true);
</script>
<script>
$(“.content”).each(function(index,elment){
if ($(element).visible(true,’vertical’)){
$(element).addClass(“inView”);
}
});
</script>
<script>
var prevScrollTop =0;
$(window).scroll(function(event){
var scrollTop=$(this).scrollTop();
if (scrollTop > prevScrollTop){
$(“.content”).each(function(index,element){
if ($(element).visible(true,’vertical’)){
$(element).addClass(“slideIn”);
}
});
prevScrollTop=scrollTop;
}
});
</script>
</body>
</html>
I’m new to javascript, I don’t know what I’m supposed to do to get this to work. Extremely grateful for anyone that can help me out.