Bekijk alle posts

if -> scrollbar positie : 1px and more {
start transition css }

<!-- CUSTOM JAVASCRIPT TO MAKE UPPER MOVE -->
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$(function() {
$(".before").toggleClass("after");
});
});
});
</script>
<!-- END CUSTOM JAVASCRIPT TO MAKE UPPER MOVE -->

#logo img.before { width: 100px; height: 99px; -webkit-transition: width 2s ease, height 2s ease; -moz-transition: width 2s ease, height 2s ease; -o-transition: width 2s ease, height 2s ease; -ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; }
#logo img.after { width: 157px; height: 154px; }

<!-- CUSTOM JAVASCRIPT TO MAKE UPPER MOVE -->
<script type="text/javascript">
var scrollTimeout = null;
var scrollendDelay = 500; // ms

$(window).scroll(function() {
if ( scrollTimeout === null ) {
scrollbeginHandler();
} else {
clearTimeout( scrollTimeout );
}
scrollTimeout = setTimeout( scrollendHandler, scrollendDelay );
});

function scrollbeginHandler() {
// this code executes on "scrollbegin"
$('#logo').stop()
.animate({rotate: '30deg', scale: '0.50'}, 1000);

}

function scrollendHandler() {
// this code executes on "scrollend"

scrollTimeout = null;
}

</script>
<!-- END CUSTOM JAVASCRIPT TO MAKE UPPER MOVE -->

<SCRIPT language="JavaScript">
<!--
if (document.images)
{
preload_image = new Image(998,175);
preload_image.src="images/headeroverlay.png";
}
//-->
</SCRIPT>

#headerimage {
background-image: url('images/headersprite.png');
width: 988px;
height: 175px;
border-style: solid;
border-width: 1px;
border-color: #999;
margin-top: 10px;
display: block;
background-position: 0px 0px;
}


#headerimage:hover {
width: 988px;
height: 175px;
border-style: solid;
border-width: 1px;
border-color: #999;
margin-top: 10px;
display: block;
background-position: 0px 175px;
}