bnbweb/themes/vr/web/js/main.js

(function($) {
	let winW = $(window).width();
	let winH = $(window).height();
	let headerH = $('header').outerHeight();

	let htmlbody = $('html, body');
	let main = $('.mainArea');
	let header = $("header");
	let booking = $('#headerBooking');
	let bannerlogo = $('.bannerTopLogo');
	let footerTop = $('footer .top');

	let down = $('.btnDown');

	let harderT = $('header').offset().top;

	footerTop.on("click", function(){
		htmlbody.animate({
			scrollTop: 0
		}, 1000);
	});

	down.click(function() {
		htmlbody.animate({
			scrollTop: main.offset().top
		}, 1000)
	});

	$(function() {
		let bannerLength = $('#banner').find('li.slick-slide').length
		if(bannerLength > 1) {
			header.css('top','-30px')
		}
	})

	$(window).scroll(function() {
		let winScroll = $(window).scrollTop();
		let bannerH = $('.bannerArea').outerHeight();

		if(winScroll > bannerH && winW > 1180) {
			main.css('padding-top',headerH)
			header.addClass('fixed')
		} else {
			main.css('padding-top','0px')
			header.removeClass('fixed')
		}
	})

	window.human = false;

	var canvasEl = document.querySelector('.clickFire');
	var ctx = canvasEl.getContext('2d');
	var numberOfParticules = 30;
	var pointerX = 0;
	var pointerY = 0;
	var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown';
	/*var colors = ['#333323', '#788C6A', '#96A58B'];*/

	function setCanvasSize() {
	    canvasEl.width = window.innerWidth * 2;
	    canvasEl.height = window.innerHeight * 2;
	    canvasEl.style.width = window.innerWidth + 'px';
	    canvasEl.style.height = window.innerHeight + 'px';
	    canvasEl.getContext('2d').scale(2, 2);
	}

	function updateCoords(e) {
	    pointerX = e.clientX || e.touches[0].clientX;
	    pointerY = e.clientY || e.touches[0].clientY;
	}

	function setParticuleDirection(p) {
	    var angle = anime.random(0, 360) * Math.PI / 180;
	    var value = anime.random(50, 180);
	    var radius = [-1, 1][anime.random(0, 1)] * value;
	    return {
	        x: p.x + radius * Math.cos(angle),
	        y: p.y + radius * Math.sin(angle)
	    }
	}

	function createParticule(x, y) {
	    var p = {};
	    p.x = x;
	    p.y = y;
	    p.color = colors[anime.random(0, colors.length - 1)];
	    p.radius = anime.random(12, 24);
	    p.endPos = setParticuleDirection(p);
	    p.draw = function() {
	        ctx.beginPath();
	        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
	        ctx.fillStyle = p.color;
	        ctx.fill();
	    }
	    return p;
	}

	function createCircle(x, y) {
	    var p = {};
	    p.x = x;
	    p.y = y;
	    p.color = '#FFF';
	    p.radius = 0;
	    p.alpha = 0;
	    p.lineWidth = 0;
	    p.draw = function() {
	        ctx.globalAlpha = p.alpha;
	        ctx.beginPath();
	        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
	        ctx.lineWidth = p.lineWidth;
	        ctx.strokeStyle = p.color;
	        ctx.stroke();
	        ctx.globalAlpha = 1;
	    }
	    return p;
	}

	function renderParticule(anim) {
	    for (var i = 0; i < anim.animatables.length; i++) {
	        anim.animatables[i].target.draw();
	    }
	}

	function animateParticules(x, y) {
	    var circle = createCircle(x, y);
	    var particules = [];
	    for (var i = 0; i < numberOfParticules; i++) {
	        particules.push(createParticule(x, y));
	    }
	    anime.timeline().add({
	            targets: particules,
	            x: function(p) {
	                return p.endPos.x;
	            },
	            y: function(p) {
	                return p.endPos.y;
	            },
	            radius: 0.1,
	            duration: anime.random(1200, 3000),
	            easing: 'easeOutExpo',
	            update: renderParticule
	        })
	        .add({
	            targets: circle,
	            radius: anime.random(80, 240),
	            lineWidth: 0,
	            alpha: {
	                value: 0,
	                easing: 'linear',
	                duration: anime.random(600, 800),
	            },
	            duration: anime.random(1200, 2400),
	            easing: 'easeOutExpo',
	            update: renderParticule,
	            offset: 0
	        });
	}

	var render = anime({
	    duration: Infinity,
	    update: function() {
	        ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
	    }
	});

	// document.addEventListener(tap, function(e) {
	//     window.human = true;
	//     render.play();
	//     updateCoords(e);
	//     animateParticules(pointerX, pointerY);
	// }, false);

	var centerX = window.innerWidth / 2;
	var centerY = window.innerHeight / 2;

	setCanvasSize();
	window.addEventListener('resize', setCanvasSize, false);

	let hovereffect = function(e) {
		render.play()
		updateCoords(e);
		animateParticules(pointerX, pointerY);
	}

	// bannerlogo.hover(hovereffect);
	booking.hover(hovereffect);
})($)




$(function(){
	$('#menu01').click(function(){
		$('html,body').animate({scrollTop:$('#about').offset().top}, 800);
	});
});

$(function(){
	$('#menu02').click(function(){
		$('html,body').animate({scrollTop:$('#news').offset().top}, 800);
	});
});

$(function(){
	$('#menu03').click(function(){
		$('html,body').animate({scrollTop:$('#rooms').offset().top}, 800);
	});
});

$(function(){
	$('#menu04').click(function(){
		$('html,body').animate({scrollTop:$('#location').offset().top}, 800);
	});
});

$(function(){
	$('#menu05').click(function(){
		$('html,body').animate({scrollTop:$('#fac').offset().top}, 800);
	});
});

$(function(){
	$('#menu06').click(function(){
		$('html,body').animate({scrollTop:$('#vr').offset().top}, 800);
	});
});


$(function(){
	$('#menu11').click(function(){
		$('html,body').animate({scrollTop:$('#about').offset().top}, 800);
	});
});

$(function(){
	$('#menu12').click(function(){
		$('html,body').animate({scrollTop:$('#news').offset().top}, 800);
	});
});

$(function(){
	$('#menu13').click(function(){
		$('html,body').animate({scrollTop:$('#rooms').offset().top}, 800);
	});
});

$(function(){
	$('#menu14').click(function(){
		$('html,body').animate({scrollTop:$('#location').offset().top}, 800);
	});
});

$(function(){
	$('#menu15').click(function(){
		$('html,body').animate({scrollTop:$('#fac').offset().top}, 800);
	});
});

$(function(){
	$('#menu16').click(function(){
		$('html,body').animate({scrollTop:$('#vr').offset().top}, 800);
	});
});