Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Scroll through blocks of color while scrolling
//for an example of this working, see the hamburger menu on mobile at brentonstrine.com
//define colors to scroll through
var colorWheel = [
"chocolate",
"coral",
"cornflowerblue",
"darkslateblue",
"crimson",
"darkcyan",
"darkorange",
"dodgerblue",
"gold",
"darksalmon",
"firebrick",
"deepskyblue"
];
colorWheel[-1] = "deepskyblue";
$(document).ready(function(){
// open and close menu
$(".nav").on("click", function(){
$(this).toggleClass("open");
});
// don't close menu when a link is clicked
$(".nav").on("click", "a", function(e){
e.stopImmediatePropagation()
});
// scroll blocks of colors through hamburger menu while scrolling
var burgerScroller = function(e){
var stepSize = 50;
var colorCount = colorWheel.length;
var repeatSize = (stepSize * colorCount);
var totalOffset = $("body").scrollTop();
var stepOffset = totalOffset % stepSize;
var repeatOffset = (totalOffset % repeatSize );
var colorOffset = Math.floor( repeatOffset / stepSize );
var topColor = colorWheel[colorOffset];
var bottomColor = colorWheel[colorOffset - 1];
var gradient = "background-image:repeating-linear-gradient(to top, " +
topColor + " 0px, " +
topColor + " " + stepOffset + "px, " +
bottomColor + " " + stepOffset + "px, " +
bottomColor + " " + stepSize + "px);";
$(".nav").attr("style", gradient);
}
// toggle scroller on resize
$(window).resize(function(){
if ( $(window).width() <= 600 ) {
$(window).on("scroll.scrollBurger", burgerScroller);
} else {
$(window).off("scroll.scrollBurger", burgerScroller);
$(".nav").removeAttr("style");
}
});
// turn on scroller if initially small
if($(window).width() <= 600) {
$(window).on("scroll.scrollBurger", burgerScroller);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment