diff options
Diffstat (limited to 'js/timeline.js')
| -rw-r--r-- | js/timeline.js | 56 |
1 files changed, 56 insertions, 0 deletions
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 |