You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
447 lines
19 KiB
447 lines
19 KiB
(function ($) {
|
|
$.fn.extend({
|
|
vinnyFollow: function (options) {
|
|
|
|
var defaults = {
|
|
wrapper: 1260,
|
|
class: 'vinny-line',
|
|
zindex: 20,
|
|
width: 1,
|
|
lineWidth: 2,
|
|
color: '#ffffff',
|
|
alignClass: null,
|
|
maxHeight: 200,
|
|
flowColor: '#5cff00',
|
|
flowTop: 230,
|
|
responsiveOffset: 50
|
|
};
|
|
|
|
options = $.extend(defaults, options);
|
|
|
|
var vinnyFollow = $(this);
|
|
var lineContinueX = null;
|
|
var winWidth = $(window).width();
|
|
|
|
// RESET LINES FOR WINDOW RESIZE
|
|
var reset = function () {
|
|
lineContinueX = null;
|
|
winWidth = $(window).width();
|
|
};
|
|
|
|
// CREATE LINES
|
|
var init = function () {
|
|
vinnyFollow.each(function () {
|
|
|
|
// INIT VARS
|
|
var element = $(this);
|
|
var color = options.color;
|
|
var offsetTop = 0;
|
|
var offsetLeft = 'auto';
|
|
var offsetBottom = 0;
|
|
var offsetRight = 'auto';
|
|
var angle = 0;
|
|
var origin = '0 0';
|
|
var offsetBottom2 = 0;
|
|
var angle2 = 0;
|
|
var line2 = false;
|
|
var followOn = false;
|
|
var horizontal = false;
|
|
var horizontalTop = 0;
|
|
var horizOffsetRight = 'auto';
|
|
var offsetBottom3 = 0;
|
|
var angle3 = 0;
|
|
var line3 = false;
|
|
var diagLeft = false;
|
|
var responsive = false;
|
|
|
|
// UPDATE VARS WITH DATA ELEMENTS
|
|
if (element.data('offset-top') != undefined) {
|
|
offsetTop = parseInt(element.data('offset-top'));
|
|
}
|
|
if (element.data('offset-left') != undefined) {
|
|
offsetLeft = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('offset-left')) + 'px)';
|
|
|
|
if (winWidth <= 550) {
|
|
offsetLeft = '-' + parseInt(element.data('offset-left')) * 4 + 'px';
|
|
}
|
|
}
|
|
if (element.data('offset-bottom') != undefined) {
|
|
offsetBottom = parseInt(element.data('offset-bottom'));
|
|
}
|
|
if (element.data('offset-right') != undefined) {
|
|
offsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('offset-right')) + 'px)';
|
|
}
|
|
if (element.data('angle') != undefined) {
|
|
angle = parseInt(element.data('angle'));
|
|
}
|
|
if (element.data('origin') === 'bottom') {
|
|
origin = '0 100%';
|
|
}
|
|
if (element.data('color') != undefined) {
|
|
color = element.data('color');
|
|
}
|
|
if (element.data('follow-on') != undefined) {
|
|
followOn = element.data('follow-on');
|
|
}
|
|
if (element.data('2-line') != undefined) {
|
|
line2 = element.data('2-line');
|
|
}
|
|
if (element.data('follow-on') != undefined) {
|
|
offsetRight = lineContinueX;
|
|
}
|
|
if (element.data('horizontal') != undefined) {
|
|
horizontal = true;
|
|
}
|
|
if (element.data('horizontal-top') != undefined) {
|
|
horizontalTop = parseInt(element.data('horizontal-top'));
|
|
if (winWidth <= 767) {
|
|
horizontalTop = options.responsiveOffset;
|
|
}
|
|
offsetBottom = 'calc(100% - ' + horizontalTop + 'px)';
|
|
}
|
|
if (element.data('horizontal-offsetx') != undefined) {
|
|
horizOffsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('horizontal-offsetx')) + 'px)'
|
|
}
|
|
if (element.data('3-line') != undefined) {
|
|
line3 = element.data('3-line');
|
|
}
|
|
if (element.data('diag-left-follow') != undefined) {
|
|
diagLeft = true;
|
|
}
|
|
if (element.data('responsive') != undefined) {
|
|
responsive = true;
|
|
}
|
|
|
|
// CREATE LINE 1
|
|
var html = '<div class="' + options.class + '"></div>';
|
|
|
|
if (!$(this).find('.' + options.class).length) {
|
|
$(this).append(html)
|
|
}
|
|
|
|
$(this).find('.' + options.class + ':not(.line-horiz)').css({
|
|
'width': options.lineWidth + 'px',
|
|
'position': 'absolute',
|
|
'z-index': options.zindex,
|
|
'top': offsetTop,
|
|
'left': offsetLeft,
|
|
'bottom': offsetBottom,
|
|
'right': offsetRight,
|
|
'-webkit-transform': 'skewX(' + angle + 'deg)',
|
|
'-moz-transform': 'skewX(' + angle + 'deg)',
|
|
'-ms-transform': 'skewX(' + angle + 'deg)',
|
|
'-o-transform': 'skewX(' + angle + 'deg)',
|
|
'transform': 'skewX(' + angle + 'deg)',
|
|
'-webkit-transform-origin': origin,
|
|
'-moz-transform-origin': origin,
|
|
'-ms-transform-origin': origin,
|
|
'-o-transform-origin': origin,
|
|
'transform-origin': origin,
|
|
'overflow': 'hidden'
|
|
});
|
|
|
|
if (angle != 0) {
|
|
$(this).find('.' + options.class + ':not(.line-horiz)').attr('skewed', '1');
|
|
}
|
|
|
|
// ALIGNMENT FOR ELEMENTS UNDERNEATH
|
|
if (options.alignClass != null && element.data('align-offset')) {
|
|
var alignOffset = parseInt(element.data('align-offset'));
|
|
|
|
if (winWidth <= 1250) {
|
|
alignOffset = 20;
|
|
}
|
|
|
|
var vinnyLine = element.find('.' + options.class);
|
|
|
|
var posRight = (winWidth - (vinnyLine.offset().left + vinnyLine.height())) - ((winWidth - options.wrapper) / 2);
|
|
|
|
element.find(options.alignClass).css({
|
|
'width': 'calc(((100vw - ' + options.wrapper + 'px) / 2) - ' + alignOffset + 'px + ' + posRight + 'px)'
|
|
})
|
|
}
|
|
|
|
// CREATE HORIZONTAL LINE
|
|
if (horizontal === true) {
|
|
var lastElem = $(element).find('.' + options.class + ':last-child');
|
|
var horizontalStart = (lastElem.offset().left + lastElem.height());
|
|
|
|
var horizontalOffsetLeft = 'calc(' + horizontalStart + 'px + ' + ((options.lineWidth / 2)) + 'px)';
|
|
horizOffsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('horizontal-offsetx')) + 'px + ' + ((options.lineWidth / 2)) + 'px)';
|
|
|
|
var html = '<div class="' + options.class + ' line-horiz"></div>';
|
|
|
|
if (!$(this).find('.line-horiz.' + options.class).length) {
|
|
$(this).append(html)
|
|
}
|
|
|
|
offsetBottom = 'calc(100% - ' + horizontalTop + 'px - ' + ((options.lineWidth / 2)) + 'px)';
|
|
|
|
$(this).find('.line-horiz.' + options.class).css({
|
|
'height': options.lineWidth + 'px',
|
|
'position': 'absolute',
|
|
'z-index': options.zindex,
|
|
'right': horizOffsetRight,
|
|
'bottom': offsetBottom,
|
|
'left': horizontalOffsetLeft,
|
|
'overflow': 'hidden'
|
|
});
|
|
}
|
|
|
|
// CREATE LINE 2
|
|
if (line2 === true) {
|
|
if (element.data('2-offset-bottom') != undefined) {
|
|
offsetBottom2 = element.data('2-offset-bottom');
|
|
offsetTop = 'calc(100% - ' + offsetBottom + 'px)'
|
|
}
|
|
if (element.data('2-offset-right') != undefined) {
|
|
offsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('2-offset-right')) + 'px)';
|
|
}
|
|
if (element.data('2-offset-top') != undefined) {
|
|
offsetTop = element.data('2-offset-top');
|
|
}
|
|
if (element.data('2-angle') != undefined) {
|
|
angle2 = element.data('2-angle');
|
|
}
|
|
|
|
var html = '<div class="' + options.class + ' line-2"></div>';
|
|
|
|
if (!$(this).find('.line-2.' + options.class).length) {
|
|
$(this).append(html)
|
|
}
|
|
|
|
$(this).find('.line-2.' + options.class).css({
|
|
'width': options.lineWidth + 'px',
|
|
'position': 'absolute',
|
|
'z-index': options.zindex,
|
|
'top': offsetTop,
|
|
'left': offsetLeft,
|
|
'bottom': offsetBottom2,
|
|
'right': offsetRight,
|
|
'-webkit-transform': 'skewX(' + angle2 + 'deg)',
|
|
'-moz-transform': 'skewX(' + angle2 + 'deg)',
|
|
'-ms-transform': 'skewX(' + angle2 + 'deg)',
|
|
'-o-transform': 'skewX(' + angle2 + 'deg)',
|
|
'transform': 'skewX(' + angle2 + 'deg)',
|
|
'-webkit-transform-origin': '0 0',
|
|
'-moz-transform-origin': '0 0',
|
|
'-ms-transform-origin': '0 0',
|
|
'-o-transform-origin': '0 0',
|
|
'transform-origin': '0 0',
|
|
'overflow': 'hidden'
|
|
});
|
|
|
|
if (angle2 != 0) {
|
|
$(this).find('.line-2.' + options.class).attr('skewed', '1');
|
|
}
|
|
}
|
|
|
|
if (followOn === true) {
|
|
var lastElem = $(element).find('.' + options.class + ':last-child');
|
|
lineContinueX = (winWidth - (lastElem.offset().left + lastElem.height()) - options.lineWidth)
|
|
}
|
|
|
|
// CREATE LINE 3
|
|
if (line3 === true) {
|
|
if (element.data('3-offset-bottom') != undefined) {
|
|
offsetBottom3 = element.data('3-offset-bottom');
|
|
offsetTop = 'calc(100% - ' + offsetBottom2 + 'px)'
|
|
}
|
|
if (element.data('3-offset-right') != undefined) {
|
|
offsetRight = 'calc(((100vw - ' + options.wrapper + 'px) / 2) + ' + parseInt(element.data('3-offset-right')) + 'px)';
|
|
}
|
|
if (element.data('3-offset-top') != undefined) {
|
|
offsetTop = element.data('3-offset-top');
|
|
}
|
|
if (element.data('3-angle') !== undefined) {
|
|
angle3 = element.data('3-angle');
|
|
}
|
|
|
|
var html = '<div class="' + options.class + ' line-3"></div>';
|
|
|
|
if (!$(this).find('.line-3.' + options.class).length) {
|
|
$(this).append(html)
|
|
}
|
|
|
|
$(this).find('.line-3.' + options.class).css({
|
|
'width': options.lineWidth + 'px',
|
|
'position': 'absolute',
|
|
'z-index': options.zindex,
|
|
'top': offsetTop,
|
|
'left': offsetLeft,
|
|
'bottom': offsetBottom3,
|
|
'right': offsetRight,
|
|
'-webkit-transform': 'skewX(' + angle3 + 'deg)',
|
|
'-moz-transform': 'skewX(' + angle3 + 'deg)',
|
|
'-ms-transform': 'skewX(' + angle3 + 'deg)',
|
|
'-o-transform': 'skewX(' + angle3 + 'deg)',
|
|
'transform': 'skewX(' + angle3 + 'deg)',
|
|
'-webkit-transform-origin': '0 0',
|
|
'-moz-transform-origin': '0 0',
|
|
'-ms-transform-origin': '0 0',
|
|
'-o-transform-origin': '0 0',
|
|
'transform-origin': '0 0',
|
|
'overflow': 'hidden',
|
|
'border-radius': '2px'
|
|
});
|
|
|
|
if (angle3 !== 0) {
|
|
$(this).find('.line-3.' + options.class).attr('skewed', '1');
|
|
}
|
|
}
|
|
|
|
// ALIGNMENT FOR DIAGONAL BACKGROUND
|
|
if (diagLeft === true) {
|
|
|
|
var next = element.next();
|
|
|
|
var lastElem = $(element).find('.' + options.class + ':last-child');
|
|
var diagOffset = (winWidth - (lastElem.offset().left + lastElem.height()) - options.lineWidth);
|
|
|
|
next.find('.diag-left').css({
|
|
width: diagOffset + 'px'
|
|
})
|
|
}
|
|
})
|
|
};
|
|
|
|
// INIT LINES
|
|
init();
|
|
$(window).on('resize', function () {
|
|
reset();
|
|
init();
|
|
});
|
|
|
|
// CREATE COLOR
|
|
var html = '<div class="vinnycolor"></div>';
|
|
var vinnyLine = $('.vinny-line');
|
|
vinnyLine.append(html);
|
|
var vinnyV = $('.vinny-line:not(.line-horiz) .vinnycolor');
|
|
var vinnyH = $('.line-horiz .vinnycolor');
|
|
|
|
vinnyV.css({
|
|
'position': 'absolute',
|
|
'left': '0',
|
|
'right': '0',
|
|
'top': '0',
|
|
'bottom': '0',
|
|
'margin': '0 auto',
|
|
'width': options.width + 'px',
|
|
'background': options.color
|
|
});
|
|
|
|
vinnyH.css({
|
|
'position': 'absolute',
|
|
'left': '0',
|
|
'right': '0',
|
|
'top': '0',
|
|
'bottom': '0',
|
|
'margin': 'auto 0',
|
|
'height': options.width + 'px',
|
|
'background': options.color
|
|
});
|
|
|
|
$('#main-banner .vinnycolor').css('top', '1px');
|
|
|
|
// CREATE FLOW
|
|
var html = '<div class="vinnyflow"></div>';
|
|
vinnyLine.append(html);
|
|
var vinnyFlow = $('.vinny-line:not(.line-horiz) .vinnyflow');
|
|
var vinnyHoriz = $('.line-horiz .vinnyflow');
|
|
var distanceOffset = 0;
|
|
|
|
vinnyLine.each(function () {
|
|
|
|
if ($(this).closest('.vinnyfollow').data('offset-reset') !== undefined) {
|
|
distanceOffset = 0;
|
|
}
|
|
|
|
$(this).find('.vinnyflow').attr('data-distance-offset', distanceOffset);
|
|
|
|
if ($(this).hasClass('line-horiz')) {
|
|
distanceOffset += 200;
|
|
}
|
|
});
|
|
|
|
var skewWidth;
|
|
|
|
vinnyLine.each(function () {
|
|
var element = $(this);
|
|
|
|
if (element.attr('skewed') === 1) {
|
|
skewWidth = options.lineWidth / 2;
|
|
} else {
|
|
skewWidth = options.lineWidth / 4;
|
|
}
|
|
|
|
if (!element.hasClass('line-horiz')) {
|
|
element.find('.vinnyflow').css({
|
|
'width': skewWidth + 'px',
|
|
'border': skewWidth + 'px solid ' + options.flowColor,
|
|
});
|
|
} else {
|
|
element.find('.vinnyflow').css({
|
|
'height': skewWidth + 'px',
|
|
'border': skewWidth + 'px solid ' + options.flowColor,
|
|
});
|
|
}
|
|
});
|
|
|
|
vinnyFlow.css({
|
|
'position': 'absolute',
|
|
'left': '0',
|
|
'right': '0',
|
|
'margin': '0 auto',
|
|
'height': options.maxHeight + 'px',
|
|
'max-height': options.maxHeight + 'px',
|
|
'background': options.flowColor,
|
|
});
|
|
|
|
vinnyHoriz.css({
|
|
'position': 'absolute',
|
|
'top': '0',
|
|
'bottom': '0',
|
|
'margin': 'auto 0',
|
|
'width': '100%',
|
|
'max-width': '100%',
|
|
'background': options.flowColor,
|
|
});
|
|
|
|
vinnyFollow.each(function () {
|
|
var element = $(this)
|
|
|
|
if (element.data('color') !== undefined) {
|
|
var color = element.data('color');
|
|
|
|
element.find('.vinnycolor').css('background', color);
|
|
}
|
|
});
|
|
|
|
var flowAnim = function () {
|
|
vinnyLine.each(function () {
|
|
var scrollTop = $(window).scrollTop();
|
|
var distanceOffset = parseInt($(this).find('.vinnyflow').data('distance-offset'));
|
|
var elementOffset = $(this).offset().top;
|
|
var distance = -(elementOffset - scrollTop) + options.flowTop - distanceOffset;
|
|
|
|
$(this).find('.vinnyflow').css('top', distance + 'px');
|
|
|
|
if ($(this).hasClass('line-horiz')) {
|
|
|
|
var horizDistance = 'calc(' + distance + 'px * (' + ($(this).width() + (options.flowTop / 2)) / options.flowTop + '))';
|
|
|
|
$(this).find('.vinnyflow').css({
|
|
'left': horizDistance,
|
|
'top': '0'
|
|
})
|
|
}
|
|
})
|
|
};
|
|
|
|
flowAnim();
|
|
$(window).on('scroll resize', function () {
|
|
flowAnim();
|
|
});
|
|
}
|
|
});
|
|
})(jQuery);
|