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)
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
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;
}