daw/js/studio.js

const studioCarouselElement = document.querySelector('#caro')
const carousel = new bootstrap.Carousel(studioCarouselElement, {
  interval: 5000,
  wrap: true
});

jQuery(document).ready(function($) {

  $(window).bind('load', function() {
		$('#loader').fadeOut(2000);
	});
	$('.nav-toggle').on('touchstart click', function(e) {
		e.preventDefault();
		$( this ).toggleClass( 'active' );
	});

  new WOW().init();

  $(function dw_hidenav() {
    var headerHeight = $('.navbar').height();
    $(window).on('scroll', { previousTop: 0 },
    function() {
      var currentTop = $(window).scrollTop();
      if (currentTop < this.previousTop) {
        if (currentTop > 0 && $('.navbar').hasClass('fixed')) {
          $('.navbar').addClass('visible');
          $('.site-title a').removeClass('light');
        } else {
          $('.navbar').removeClass('visible fixed');
          $('.site-title a').addClass('light');
          }
        }
        else {
          $('.navbar').removeClass('visible');
          if (currentTop > headerHeight && !$('.navbar').hasClass('fixed')) $('.navbar').addClass('fixed');
        }
        this.previousTop = currentTop;
      }
    );
  });


  $("#studio-caro").backstretch("../wp-content/themes/daw/img/studio.jpg");
	$('#caro').on('slid.bs.carousel', function(e) {
    var consta = e.to;
    console.log('target: ' + consta );
		setTimeout(function() {
			if (consta === 0) {
				$('a[href="#studio"]').tab('show')
				$('#studio-caro').addClass('caro-grad5').removeClass('caro-grad caro-grad3 caro-grad2 caro-grad5');
				$('.site-title a').addClass('light');
				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
				$("#studio-caro").backstretch({url:'../wp-content/themes/daw/img/studio.jpg', fade: 250 });
			}
			if (consta === 1) {
				$('a[href="#webdev"]').tab('show')
				$('.active #svg-imac.screen').delay(2500).queue(function(screenit){
				    $(this).attr('class', 'bg');
				    screenit();
				});
				$('#studio-caro').addClass('caro-grad').removeClass('caro-grad3 caro-grad2 caro-grad5');
				$('.site-title a').addClass('light');
				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
        $("#studio-caro").backstretch('destroy');
			}
			if (consta === 2) {
				$('a[href="#ux"]').tab('show')
				$('#studio-caro').addClass('caro-grad2').removeClass('caro-grad caro-grad3 caro-grad5');
				$('.site-title a').addClass('light');
				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
        $("#studio-caro").backstretch('destroy');
			}
			if (consta === 3) {
				$('a[href="#graphic"]').tab('show')
				$( '#studio-caro' ).addClass('caro-grad3').removeClass('caro-grad2 caro-grad caro-grad5');
				$('.site-title a').removeClass('light');
				$('.carousel-indicators li').addClass('darken-carousel-indicators');
        $("#studio-caro").backstretch('destroy');
			}
			if (consta === 4) {
				$('a[href="#media"]').tab('show')
				$('#studio-caro').removeClass('caro-grad caro-grad3').addClass('caro-grad5');
				$('.site-title a').addClass('light');
				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
				$("#studio-caro").backstretch({isVideo: true, url:'../wp-content/themes/daw/img/camera.mp4', poster:'../wp-content/themes/daw/img/camera.jpg'});
			}
			if (consta === 5) {
				$('a[href="#art"]').tab('show')
				$( '#studio-caro' ).addClass('caro-grad5').removeClass('caro-grad2 caro-grad caro-grad3');
				$('.site-title a').addClass('light');
				$('.carousel-indicators li').removeClass('darken-carousel-indicators');
				$("#studio-caro").backstretch({url:'../wp-content/themes/daw/img/paints2.jpg', fade: 250 });
			}
		}, 10);
	});

	$('#caro').on('slide.bs.carousel', function() {
		$('.active #svg-imac.bg').attr('class', 'svg screen');
		$('.active .animac').addClass('fade-svg').delay(1000).queue(function(hideit){
		    $(this).addClass('hide-svg');
		    hideit();
		});
	});

	$('#caro').on('slid.bs.carousel', function() {
		$('.active .animac').removeClass('hide-svg fade-svg');
		var animac = new DrawFillSVG({elementId: 'svg-imac'});
		var animac1 = new DrawFillSVG({elementId: 'sv'});
		var animac2 = new DrawFillSVG({elementId: 'svg-mac'});
		var animac3 = new DrawFillSVG({elementId: 'svg-device'});
		animac.replay();
		animac1.replay();
		animac2.replay();
		animac3.replay();
	});

});