Method: Dynamic Scroll Icon
This neat little navigation tool caught my eye when I visited terminalplanning.aero For basic versions, we’ve seen these back-to-top widgets as we scroll down the page and when we click on them they take us straight back to the top. This script however has a very different behavior.
As soon as you start scrolling, a black spot appears that immediately draws your attention to navigate to it, once you hover over the image, the shape transforms into a bigger spot with an arrow icon within in. You can click it to slowly move down the page to each section.
When you get down to the last section of the page, they the behavior of the navigation changes, transforming the down arrow to an upward facing arrow and when you click on it again, you smoothly scroll straight back up to the top.
Here’s the snippet
/* JS - Dynamic Scroll icon Reference Site: http://terminalplanning.aero/ */ (function() { function NavElement() { this.el = $("<nav class='black-spot'><span>↓</span></div>'"); this.sectionSelectors = ["#top", "#airports", "#services", "#contact", "#latest"]; $(window).on("load", $.proxy(this, "init")); } NavElement.prototype = {init: function() { $("body").append(this.el); this.el.on("click", $.proxy(this, "handleNext")); $(window).on("scroll", $.proxy(this, "updatePosition")); this.airportsEl = $("#airports"); this.introEl = $(".intro"); this.updatePosition(); $(window).on("load", $.proxy(this, "updatePosition")); },updatePosition: function(e) { var dest = null, last = false, curr; var c = $(window).scrollTop(); for (var i = 0; i < this.sectionSelectors.length; i++) { curr = $(this.sectionSelectors[i]); if (curr.offset().top > (c + 1)) { dest = curr; break; } } if (!dest) { dest = $(this.sectionSelectors[0]); last = true; } this.next = dest; this.isLast = last; if (this.isLast) { this.el.addClass("last"); } else { this.el.removeClass("last"); } this.updateOpacity(c); },updateOpacity: function(scrollTop) { var airportCenter = this.airportsEl.offset().top + (this.airportsEl.height() / 2); var introTop = this.introEl.offset().top; var windowCenter = scrollTop + ($(window).height() / 2); var positionInRange = Math.max(0, Math.min(1, (windowCenter - introTop) / (airportCenter - introTop))); this.el.css({opacity: positionInRange}); },handleNext: function(e) { e.preventDefault(); var duration = 400; if (this.isLast) { duration = 1200; } $("html,body").animate({scrollTop: this.next.offset().top}, duration, 'swing'); },setUp: function() { this.el.css({backgroundColor: "blue"}); },setDown: function() { this.el.css({backgroundColor: "transparent"}); }}; })();
2 Comments
konrad bialy
January 28, 2014good post bro, bookmarked !
love the design of your site by the way
Travis Miller
January 29, 2014Thanks man! Appreciate it!