From 2c0a9fd5f1ccaf969acf80dd8b60e2224a0a1bfb Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Fri, 26 Jan 2018 22:02:37 +0530 Subject: New Timeline interface --- js/timeline.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 js/timeline.js (limited to 'js') diff --git a/js/timeline.js b/js/timeline.js new file mode 100644 index 0000000..5f5aa7c --- /dev/null +++ b/js/timeline.js @@ -0,0 +1,56 @@ +(function($) { + $.fn.timeline = function() { + var selectors = { + id: $(this), + item: $(this).find(".timeline-item"), + activeClass: "timeline-item--active", + img: ".timeline__img" + }; + selectors.item.eq(0).addClass(selectors.activeClass); + selectors.id.css( + "background-image", + "url(" + + selectors.item + .first() + .find(selectors.img) + .attr("src") + + ")" + ); + var itemLength = selectors.item.length; + $(window).scroll(function() { + var max, min; + var pos = $(this).scrollTop(); + selectors.item.each(function(i) { + min = $(this).offset().top; + max = $(this).height() + $(this).offset().top; + var that = $(this); + if (i == itemLength - 2 && pos > min + $(this).height() / 2) { + selectors.item.removeClass(selectors.activeClass); + selectors.id.css( + "background-image", + "url(" + + selectors.item + .last() + .find(selectors.img) + .attr("src") + + ")" + ); + selectors.item.last().addClass(selectors.activeClass); + } else if (pos <= max - 40 && pos >= min) { + selectors.id.css( + "background-image", + "url(" + + $(this) + .find(selectors.img) + .attr("src") + + ")" + ); + selectors.item.removeClass(selectors.activeClass); + $(this).addClass(selectors.activeClass); + } + }); + }); + }; +})(jQuery); + +$("#timeline-1").timeline(); \ No newline at end of file -- cgit v1.2.3