I'm building a parallax website and I wanted my parent navigation and its child to change color on specific slides so as to be visible. What code should I use in jQuery to achieve this?
This is my CSS, markup and code:
.navigation{
font-family:thin lines and curves;
position:fixed;
text-align:center;
letter-spacing:1px;
z-index:51;
top:50%;
left:6%;
}
.navigation li{
font-family:thin lines and curves;
color:#fff;
display:block;
letter-spacing:2px;
padding:0 10px;
line-height:30px;
margin-bottom:2px;
margin-left:auto;
margin-right:auto;
-webkit-transition: all .2s ease-in-out;
}
.navigation li:hover,
.active{
font-family:thin lines and curves;
cursor:pointer;
text-decoration:underline;
}
.navigation2{
font-family:thin lines and curves; /*EC2127 - red color tone of logo*/
position:fixed;
text-align:right;
letter-spacing:1px;
top:50%;
left:88%;
z-index:51;
}
.navigation2 li{
font-family:thin lines and curves;
color:#fff;
display:block;
letter-spacing:2px;
padding:0 10px;
line-height:30px;
margin-bottom:2px;
margin-left:auto;
margin-right:auto;
-webkit-transition: all .2s ease-in-out;
}
.navigation2 li:hover,.active{
font-family:thin lines and curves;
cursor:pointer;
text-decoration:underline;
<ul class="navigation">
<li data-slide="1"><img class="geshalogo" src="images/geshalogo.png"></li>
<li data-slide="2">estate
<ul class="navigation2">
<li data-slide="2">land</li>
<li data-slide="3">varietal</li>
<li data-slide="4">people</li>
<li data-slide="6">practices</li>
<li data-slide="9">future offerings</li>
</ul>
</li>
<li data-slide="10">about</li>
<li data-slide="13">location</li>
<li data-slide="14">contact</li>
</ul>
jQuery(document).ready(function ($) {
//initialise Stellar.js
$(window).stellar();
//Cache some variables
var links = $('.navigation').find('li');
var link = $('.navigation2').find('li'); // informs to cache a second set of navigation and sets it to play
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
//Setup waypoints plugin
slide.waypoint(function (event, direction) {
//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');
//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
// same as the aboove for the second set of navigations
if (direction === 'down') {
$('.navigation2 li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
else {
$('.navigation2 li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation2 li[data-slide="1"]').addClass('active');
$('.navigation2 li[data-slide="2"]').removeClass('active');
}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
$('.navigation2').hide(); //Hide children by default
$('.navigation').children().click(function(){
$(this).siblings().children('.navigation2').hide();
$(this).children('.navigation2').slideToggle(2000, 'easeInOutQuint');
}).children('.navigation2').click(function (event) {
event.stopPropagation();
});
});
Regarding the way your code is written there is only one thing to do for applying different colors based on the current active slide.
First declare an array of objects that represent each slide's visual settings that you'll need:
var slideSettings = [
{ 'links': '#AAA', 'background': '#FFF', 'image': 'http://url-to-an-image1.png' },
{ 'links': '#BBB', 'background': '#FFF', 'image': 'http://url-to-an-image2.png' }
// add more colors here ...
];
After that whenever the user changes the current slide (scrolls up or down) you are going to apply the current slide settings to the navigation elements that need to be changed.
// ... whenever the user changes the current slide
$('.navigation li').css('color', slideSettings[dataslide].links);
$('.navigation li').css('background-color', slideSettings[dataslide].background);
$('.navigation li img').attr('src', slideSettings[dataslide].image);
// ... continue with the rest ...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다