Hi to all:
demo: https://erikaivo.info/html/ron/dark/
I don’t understand where my javascript reviewer say:
PROPER EVENT BINDING: Consider using the preferred .on() method rather than .click(), .bind(), .hover(), etc. For best performance and concise code use event delegation whenever possible: http://code.tutsplus.com/tutorials/quick-tip-javascript-event-delegation-in-4-minutes--net-8961
(function ($) {
"use strict";
/*----------------------------
LOADING
------------------------------*/
$(window).on("load", function () {
$('.loader').slideUp(200);
});
/*----------------------------
SCROLL TO TOP
------------------------------*/
$('.scrolltotop').each(function(){
$(this).on('click', function(){
$('html,body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
/*----------------------------
SCROLL DOWN CHANGE COLOR BACKGROUND
------------------------------*/
var myNav = document.getElementById("header");
window.onscroll = function() {
"use strict";
if (document.body.scrollTop >= 100 || document.documentElement.scrollTop >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
/*----------------------------
SCROLL TOP NAVIGATION FOOTER
------------------------------*/
$("footer .menuFooter a").click(function(){
var pageId = $(this).attr("data-page");
$("html, body").animate({ scrollTop: $("#"+pageId).offset().top }, 1000);
});
/*----------------------------
WATER RIPPLES
------------------------------*/
$(".banner").ripples({
resolution: 256,
perturbance: 0.04,
});
$(".food").ripples({
resolution: 256,
perturbance: 0.04,
});
/*----------------------------
OWL CAROUSEL
------------------------------*/
if($(".offer").length > 0){
$(".offer .owl-carousel").owlCarousel({
stagePadding: 50,
margin: 30,
loop: true,
navigation : false, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
autoplay: true,
autoplayHoverPause: true,
mouseDrag: true,
responsiveRefreshRate: 0,
autoplayTimeout:5000,
navText: ["<i class='fas fa-long-arrow-alt-left'></i>", "<i class='fas fa-long-arrow-alt-right'></i>"],
responsive:{
0:{
items: 1,
dots: false,
},
768:{
items: 2,
dots: false,
},
991:{
items: 2,
dots: false,
},
1200:{
items: 3,
dots: false,
}
}
});
};
$(".clients .owl-carousel").owlCarousel({
items: 1,
margin: 30,
loop: true,
autoPlay: 5000,
pagination: false,
navigation: true,
dots: false,
navigationText: false,
mouseDrag: false,
stagePadding: 10,
navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"],
});
/*----------------------------
3d hover
------------------------------*/
$(".project").hover3d({
selector: ".project__card",
perspective: 500,
});
/*----------------------------
LIGHTBOX GALLERY
------------------------------*/
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
})(jQuery);
Thank you, Regards.
