Line 33: | Line 33: | ||
code = '<i class="innerTitle" data-label=" "></i>'; | code = '<i class="innerTitle" data-label=" "></i>'; | ||
}else if($(this).is('H2')){ | }else if($(this).is('H2')){ | ||
− | code = '<i class="mainTitle" data-label="Ref"></i>' | + | code = '<i class="mainTitle" data-label="Ref"></i>'; |
} | } | ||
labels.append(code); | labels.append(code); | ||
Line 39: | Line 39: | ||
var points = labels.find('i'); | var points = labels.find('i'); | ||
− | points.css('width', 100/$('h3, h2.ref, h4').length+'%'); | + | points.css('width', 100/$('.card h3, .card h2.ref, .card h4').length+'%'); |
// var points = labelsInner.find('i'); | // var points = labelsInner.find('i'); | ||
Line 163: | Line 163: | ||
// on click, scroll to target section | // on click, scroll to target section | ||
− | points.click(function(){ | + | points.click(function (keyframes, options){ |
var sectionIndex = points.index($(this)); | var sectionIndex = points.index($(this)); | ||
var targetY = $('.card h3, .card h4, .card h2.ref').eq(sectionIndex).offset().top - (triggerPoint * .92); | var targetY = $('.card h3, .card h4, .card h2.ref').eq(sectionIndex).offset().top - (triggerPoint * .92); | ||
− | $('html, body').animate({scrollTop:targetY}, 600); | + | $('html, body').animate({scrollTop: targetY}, 600); |
}); | }); | ||
}); | }); |
Latest revision as of 08:12, 19 October 2019
jQuery.extend(jQuery.easing, {
easeInOutCubic: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; }
});
$(document).ready(function(){
// set up and create progress bar in DOM$('.autoMenu2').eq(0).before('');
var container = $('.progressbar');container.append('');
var shim = $('.progressbar .shim');container.append('');
var holder = $('.progressbar .holder');holder.append('');
var bar = $('.progressbar .bar');bar.append('');
var indicator = $('.progressbar .indicator');holder.append('');
var labels = $('.progressbar .labels');holder.append('');
var labelsInner = $('.progressbar .labelsInner'); $('.card h3, .card h4, .card h2.ref').each(function(){ var text = $(this).text(); var end = text.indexOf(' '); if(end > text.indexOf(':') && text.indexOf(':') !== -1) end = text.indexOf(':'); end = end === -1 ? text.length : end; var code = ''; console.log($(this)); if($(this).is('H4')){ code = ''; }else if($(this).is('H2')){ code = ''; } labels.append(code); });
var points = labels.find('i'); points.css('width', 100/$('.card h3, .card h2.ref, .card h4').length+'%');
// var points = labelsInner.find('i'); // points.css('width', 100/$('h3, h2.ref, h4').length+'%');
// var points = labels.find('i.innerTitle'); // points.css('width', "1%"); // $('h4').each(function () { // var code = ''; // labels.append(code); // }) // // points = labels.find('i'); // points.css('width', 100/$('h4').length+'%'); // match height of shim // stop layout jumping when progress bar fixes to / unfixes // from top of viewport function setShimHeight(){ shim.css('height', container.height()+'px'); } setShimHeight(); $(window).resize(function(){ setShimHeight(); });
// position indicator bar so it starts at first dot function setIndicatorX(){ var point = points.eq(0); var xpos = point.offset().left + (point.width() / 2); indicator.css('left', xpos+'px'); } setIndicatorX(); $(window).resize(function(){ setIndicatorX(); });
// fix/unfix progress bar to top of viewport function fixPosition(){ if(container.is(':visible')) { if(!container.hasClass('fixed')) { if(holder.offset().top <= $(window).scrollTop()) { container.addClass('fixed'); } } else { if(shim.offset().top > $(window).scrollTop()) { container.removeClass('fixed'); } } } } fixPosition(); $(window).scroll(function(){ fixPosition() }); $(window).resize(function(){ fixPosition(); });
// set trigger point // i.e. how far down viewport is the "eye line" var triggerPoint = 0; function setTriggerPoint(){ triggerPoint = $(window).height() * .18; } setTriggerPoint(); $(window).resize(function(){ setTriggerPoint(); });
// update progress bar function setPosition(){ if(container.is(':visible')) { var section = false; var sectionIndex = 0; var currentPosition = $(window).scrollTop() + triggerPoint; // dots // if before first section if(currentPosition < $('.card h3, .card h4, .card h2.ref').eq(0).offset().top) { points.removeClass('reading read'); section = -1; } // if after first section else { $('.card h3, .card h4, .card h2.ref').each(function(){ var sectionTop = $(this).offset().top; if(currentPosition >= sectionTop) { points.removeClass('reading'); points.eq(sectionIndex).addClass('reading'); points.eq(sectionIndex).addClass('read'); section = sectionIndex; } else { points.eq(sectionIndex).removeClass('read'); } sectionIndex++; }); } // bar var barWidth = 0; // if before start if(section == -1) { var point = points.eq(0); barWidth = point.offset().left + (point.width() / 2); } // if after end else if(section >= (points.length - 1)) { var point = points.eq((points.length - 1)); barWidth = point.offset().left + (point.width() / 2); } // if within document else { var startPoint = points.eq(section); var startPointX = startPoint.offset().left; var startPointWidth = startPoint.width(); var startSection = $('.card h3, .card h4, .card h2.ref').eq(section); var endSection = $('.card h3, .card h4, .card h2.ref').eq(section+1); var startSectionY = startSection.offset().top; var endSectionY = endSection.offset().top; var sectionLength = endSectionY - startSectionY; var scrollY = currentPosition - startSectionY; var sectionProgress = scrollY / sectionLength; barWidth = startPointX + (startPointWidth / 2) + (startPointWidth * sectionProgress); } barWidth -= indicator.offset().left; indicator.css('width', barWidth+'px'); } } setPosition(); $(window).scroll(function(){ setPosition(); }); $(window).resize(function(){ setPosition(); });
// on click, scroll to target section points.click(function (keyframes, options){ var sectionIndex = points.index($(this)); var targetY = $('.card h3, .card h4, .card h2.ref').eq(sectionIndex).offset().top - (triggerPoint * .92); $('html, body').animate({scrollTop: targetY}, 600); });
});