Ask your WordPress questions! Pay money and get answers fast! (more info)

Slider animaion WordPress

  • SOLVED

I´m interested in having this type of big-image (slider?) at the top of the indexpage
that have that scroll animaion and then fade in top navigation bar and show index page.

See url, http://www.bandofhorses.com/home

I want to apply that to this test website,
http://www.theevent1001.com/musik/nyheter/

Answers (2)

2014-05-23

Pavel Petrov answers:

As far as I can understand these are two separate things
First you have the slider, from the source code of the page i can see it is this one: [[LINK href="https://github.com/nicinabox/superslides"]]Github[[/LINK]]
And then [[LINK href="http://www.bandofhorses.com/wp-content/themes/bandofhorses/assets/js/init.js"]]here[[/LINK]] you can see how they apply the floating header(search for "#banner")


Pavel Petrov comments:

Just load the following jQuery somewhere in your footer:

jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
$(window).scroll(function() {
var e, t, n, r;
e = $("#banner #logo");
t = $("#menu_strip");
n = t.css("margin-top");
r = $(this).scrollTop();
if (r > 0 && n === "-110px") {
t.not(":animated").animate({marginTop: 0});
return e.fadeOut("slow")
}
if (r === 0) {
t.animate({marginTop: "-110px"});
return e.fadeIn("slow")
}
});
});

Tested it on your site seems to work :)


Manny comments:

HI, thanx!

I just added the jQuery and folowing html, css to the header file.

<div id="banner">Banner test</div>


#banner{ padding-top:20px; background:#093; width:100%; color:#CCC; height:90px; text-align:center; font-size:38px;}

Am I missing something here?


Pavel Petrov comments:

Remove the <div id="banner"> you put and try changing the jquery to this one:
jQuery( document ).ready(function( $ ) {

// Code that uses jQuery's $ can follow here.

$(window).scroll(function() {

var e, t, n, r;

e = $("#slidersHolder");

t = $("#menu_strip");

n = t.css("margin-top");

r = $(this).scrollTop();

if (r > 0 && n === "-110px") {

t.not(":animated").animate({marginTop: 0});

return e.fadeOut("slow")

}

if (r === 0) {

t.animate({marginTop: "-110px"});

return e.fadeIn("slow")

}

});

});

I've pasted the wrong snippet

2014-05-25

Romel Apuya answers:

hi,

here are the js and css u need.
js.

$(window).scroll(function () {
if (document.body.scrollTop > 83)
$('#menu_strip').stop().animate({"margin-top": '0'});
else
$('#menu_strip').stop().animate({"margin-top": '-83'});
});


css
#sliderHolder {
height: 660px;
margin-top: 0;
width: 100%;
}
#slider1 {
background: none repeat scroll 0 0 #000000;
height: 100%;
margin: 0 auto;
padding-left: 0;
padding-top: 0;
width: 100%;
}
#menu_strip {
background: none repeat scroll 0 0 #000000;
box-shadow: 10px 10px 25px rgba(0, 1, 6, 0.7);
height: 83px;
margin-top: -83px;
width: 100%;
z-index: 6;
}