|
|
@@ -1,6 +1,9 @@
|
|
|
$(function () {
|
|
|
header();
|
|
|
hamburger();
|
|
|
+ waypoint_init();
|
|
|
+ waypoints();
|
|
|
+ why();
|
|
|
});
|
|
|
|
|
|
function header() {
|
|
|
@@ -10,11 +13,11 @@ function header() {
|
|
|
|
|
|
function small_header() {
|
|
|
var top = $window.scrollTop();
|
|
|
- if (top > 200 && !smallHeaderShowing) {
|
|
|
+ if (top > 80 && !smallHeaderShowing) {
|
|
|
$smallHeader.addClass('showing');
|
|
|
smallHeaderShowing = true;
|
|
|
}
|
|
|
- else if (top <= 200 && smallHeaderShowing) {
|
|
|
+ else if (top <= 80 && smallHeaderShowing) {
|
|
|
$smallHeader.removeClass('showing');
|
|
|
smallHeaderShowing = false;
|
|
|
}
|
|
|
@@ -43,3 +46,205 @@ var isOpen = false,
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+function why() {
|
|
|
+ var index = 0,
|
|
|
+ $section = $('.testimonials-section'),
|
|
|
+ $testimonials = $('.br-testimonial'),
|
|
|
+ $indicators = $('.indicators'),
|
|
|
+ interval;
|
|
|
+ function next(goTo) {
|
|
|
+ $testimonials.removeClass('showing');
|
|
|
+ if (index < $testimonials.length - 1)
|
|
|
+ index++;
|
|
|
+ else index = 0;
|
|
|
+ $testimonials.eq(index).addClass('showing');
|
|
|
+ $indicators.children().eq(index).addClass('current').siblings().removeClass('current');
|
|
|
+ }
|
|
|
+ function start() {
|
|
|
+ interval = setInterval(function () {
|
|
|
+ next();
|
|
|
+ }, 6000);
|
|
|
+ }
|
|
|
+ function stop() {
|
|
|
+ clearInterval(interval);
|
|
|
+ }
|
|
|
+ function makeIndicators() {
|
|
|
+ for (var i = 0; i < $testimonials.length; i++) {
|
|
|
+ var indicator = $('<span></span>');
|
|
|
+ if (i === 0)
|
|
|
+ indicator.addClass('current');
|
|
|
+ $indicators.append(indicator);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function advanceNow() {
|
|
|
+ stop();
|
|
|
+ next();
|
|
|
+ start();
|
|
|
+ }
|
|
|
+ if ($testimonials.length) {
|
|
|
+ makeIndicators();
|
|
|
+ start();
|
|
|
+ $section.on('mouseenter', '.br-testimonial', function () { stop(); });
|
|
|
+ $section.on('mouseleave', '.br-testimonial', function () { start(); });
|
|
|
+ $indicators.on('click', 'span', function () {
|
|
|
+ index = $(this).index() - 1;
|
|
|
+ advanceNow();
|
|
|
+ });
|
|
|
+ $('.next-testimonial').on('click', function () { advanceNow(); });
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function waypoints() {
|
|
|
+ var waypoints = [];
|
|
|
+ var $window = $(window),
|
|
|
+ $body = $('body');
|
|
|
+ var $headerSmall = $('.header-small');
|
|
|
+ var $pages = $('.page-view');
|
|
|
+ var $html = $('html'), isSmallWindow;
|
|
|
+
|
|
|
+ function removeClasses($element) {
|
|
|
+ $element.removeClass('viewport-above viewport-below viewport-inside');
|
|
|
+ }
|
|
|
+ function setClass($element, className) {
|
|
|
+ removeClasses($element);
|
|
|
+ $element.addClass(className);
|
|
|
+ }
|
|
|
+ function manageSize() {
|
|
|
+ isSmallWindow = $window.width() <= 620;
|
|
|
+ }
|
|
|
+
|
|
|
+ function manageBackground($element) {
|
|
|
+ var $colorSource = $element.prev('.background-color'),
|
|
|
+ bgClass = false, hasGradient, background, gradient;
|
|
|
+
|
|
|
+ if ($colorSource.length) {
|
|
|
+ bgClass = $colorSource[0].hasAttribute('data-dark-bg') ? 'dark-bg' : 'light-bg';
|
|
|
+ background = $colorSource.css('background-color');
|
|
|
+ $body.css('background', background);
|
|
|
+ $html.css('background', background);
|
|
|
+ $body.attr('bg', bgClass);
|
|
|
+ $headerSmall.css('color', background);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function waypoint_init() {
|
|
|
+ $pages.each(function () {
|
|
|
+ var $this = $(this);
|
|
|
+ var inview = new Waypoint.Inview({
|
|
|
+ element: $this[0],
|
|
|
+ enter: function (direction) {
|
|
|
+ manageBackground($this);
|
|
|
+ setClass($this, 'viewport-inside');
|
|
|
+ },
|
|
|
+ exited: function (direction) {
|
|
|
+ if (direction == 'down')
|
|
|
+ setClass($this, 'viewport-above');
|
|
|
+ else setClass($this, 'viewport-below');
|
|
|
+ },
|
|
|
+ offset: {
|
|
|
+ top: $window.height() / 2,
|
|
|
+ bottom: $window.height() / 2
|
|
|
+ }
|
|
|
+ });
|
|
|
+ waypoints.push(inview);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function clearWaypoints() {
|
|
|
+ for (var i = 0; i < waypoints.length; i++) {
|
|
|
+ waypoints[i].destroy();
|
|
|
+ }
|
|
|
+ waypoints = [];
|
|
|
+ }
|
|
|
+ function handleWaypoints() {
|
|
|
+ clearWaypoints();
|
|
|
+ waypoint_init();
|
|
|
+ }
|
|
|
+ handleWaypoints();
|
|
|
+ manageSize();
|
|
|
+
|
|
|
+ $(window).on('resize', function () {
|
|
|
+ $pages.each(function () {
|
|
|
+ removeClasses($(this));
|
|
|
+ });
|
|
|
+ handleWaypoints();
|
|
|
+ manageSize();
|
|
|
+ });
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function waypoint_init() {
|
|
|
+ Waypoint.Inview.prototype.createWaypoints = function () {
|
|
|
+ function outerHeight(el) {
|
|
|
+ var height = el.offsetHeight;
|
|
|
+ var style = getComputedStyle(el);
|
|
|
+ height += parseInt(style.marginTop) + parseInt(style.marginBottom);
|
|
|
+ return height;
|
|
|
+ }
|
|
|
+
|
|
|
+ var configs = {
|
|
|
+ vertical: [{
|
|
|
+ down: 'enter', up: 'exited',
|
|
|
+ offset: function () {
|
|
|
+ var _offset = this.options.offset && this.options.offset.bottom || 0;
|
|
|
+ return this.options.context.innerHeight - _offset;
|
|
|
+ }.bind(this)
|
|
|
+ }, {
|
|
|
+ down: 'entered', up: 'exit',
|
|
|
+ offset: function () {
|
|
|
+ var _offset = this.options.offset && this.options.offset.bottom || 0;
|
|
|
+ return this.options.context.innerHeight - outerHeight(this.element) - _offset;
|
|
|
+ }.bind(this)
|
|
|
+ }, {
|
|
|
+ down: 'exit', up: 'entered',
|
|
|
+ offset: function () {
|
|
|
+ var _offset = this.options.offset && this.options.offset.top || 0;
|
|
|
+ return _offset;
|
|
|
+ }.bind(this)
|
|
|
+ }, {
|
|
|
+ down: 'exited', up: 'enter',
|
|
|
+ offset: function () {
|
|
|
+ var _offset = this.options.offset && this.options.offset.top || 0;
|
|
|
+ return _offset - outerHeight(this.element);
|
|
|
+ }.bind(this)
|
|
|
+ }],
|
|
|
+ horizontal: [{
|
|
|
+ right: 'enter',
|
|
|
+ left: 'exited',
|
|
|
+ offset: '100%'
|
|
|
+ }, {
|
|
|
+ right: 'entered',
|
|
|
+ left: 'exit',
|
|
|
+ offset: 'right-in-view'
|
|
|
+ }, {
|
|
|
+ right: 'exit',
|
|
|
+ left: 'entered',
|
|
|
+ offset: 0
|
|
|
+ }, {
|
|
|
+ right: 'exited',
|
|
|
+ left: 'enter',
|
|
|
+ offset: function () {
|
|
|
+ return -this.adapter.outerWidth()
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ for (var i = 0, end = configs[this.axis].length; i < end; i++) {
|
|
|
+ var config = configs[this.axis][i];
|
|
|
+ this.createWaypoint(config)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $.fn.scrollEnd = function (callback, timeout) {
|
|
|
+ $(this).scroll(function () {
|
|
|
+ var $this = $(this);
|
|
|
+ if ($this.data('scrollTimeout')) {
|
|
|
+ clearTimeout($this.data('scrollTimeout'));
|
|
|
+ }
|
|
|
+ $this.data('scrollTimeout', setTimeout(callback, timeout));
|
|
|
+ });
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
