Jump to content

slide in 'appears' and then navigates only a little


wright67uk

Recommended Posts

Below, I have set .navbar to animate after 4 seconds but I have a bit of a problem.

I want the navbar to slide down into view.

It seems that it's not animating from the top of the page.  It 'appears' and then animates on the last few pixels.

 


 

 



<style type="text/css">
.navbar {
display:none;
min-height:auto;
}
video{
width:100%!important;
height:auto!important;
visibility:hidden;
position:fixed;
z-index:-20;
}
#videoclip{
width:100%;
position:fixed;
z-index:-20;
}
#space{
width:100%;
height:640px;
opacity:1.0;
filter:alpha(opacity=100);
}
#opacity{
width:100%;
height:450px;
color:#fff;
opacity:1.0;
filter:alpha(opacity=100);
}
.parallax-main-banner {
height:auto;
}
@media (max-width: 990px){
#opacity{
height:288px;
}
.parallax-main-banner {
min-height: 310px;
}
video#my_video {
width: 130%!important;
}
}
@media (max-width: 760px){
#opacity{
height:168px;
}
.parallax-main-banner {
min-height: 310px;
}
}
</style>
<script type='text/javascript'>
var resize_home_page_image_divs = function() {
jQuery('.field-name-field-landing-page-image img').each(
function(i, el) {
var el1 = jQuery(el);
var h = parseInt(el1.height()*2/3)+'px';
el1.parent().parent().parent().css('height', h).css('overflow','hidden');
}
);
}
jQuery(document).ready(function(){
jQuery(window).resize(
function() {
resize_home_page_image_divs();
}
);
jQuery(window).scroll(
function(ev) {
var h = jQuery(window).scrollTop();
var wh = jQuery(window).height();
jQuery('.field-name-field-landing-page-image img').each(
function(i, el) {
var el1 = jQuery(el);
var h1 = parseInt(el1.height());
var off1 = el1.offset();
var mt = 0;
if (wh>off1.top-h) {
mt = parseInt(h1/3)-parseInt(h1/3*(off1.top-h+h1)/(h1+wh));
}
if (off1.top+h1-h<0) {
mt = parseInt(h1/3);
}
mt = -mt;
el1.css('margin-top', mt+'px');
}
);
}
);
jQuery('#space').delay(4000).slideUp("slow");
jQuery('.navbar').delay(4000).slideDown("slow");
setTimeout(function() {
jQuery('body').scrollTo(10).scrollTo(0);
resize_home_page_image_divs();
},4500);
});
</script>


 

 

can anyone explain where i'm going wrong?

 

I can supply source code, but its a rather big file.

 

Many thanks.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.