I have a problem with wowjs if it does the animation effects but it does not detect the scroll, it loads all the effects when loading the page, does anyone know why this is ???
This is part of the html view. In the section who is where the classes of the wowjs library are
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0")
each css in files.CSS
link(rel="stylesheet", href='${css}')
title Rianjani - Inicio
body(data-offset="70")
//- Intro
section#intro.intro
div.m-center
div.intro--wrapper
div.intro--logo
h1.intro__h1 R
div.intro--text
h2.intro__h2 Clean, Awesome and Multi-Purpose.
p.intro__text Responsive Multi-Purpose Theme For Running Serious Business
div.intro--btn
a(href="#").m-btnIntro Learn More
//- Nav
nav#nav.nav
div.m-center
div.nav--wrapper
div.nav-logo
a(href="#intro").nav__logo Rianjani
div.nav-listCont
ul.nav--list
li.nav--element
a(href="#who") ABOUT
li.nav--element
a(href="#skill") SKILLS
li.nav--element
a(href="#servicies") SERVICIES
li.nav--element
a(href="#work") PORTAFOLIO
li.nav--element
a(href="#team") TEAM
li.nav--element
a(href="#testimonial") TESTIMONIALS
li.nav--element
a(href="#pricing") PRICING
li.nav--element
a(href="#contact") CONTACT
//- Who
section#who.m-section
div.m-center
div.m-wrapper
div.m--titleCont.m-titleBlack
h2.m__h2 Who We Are?
h3.m__h3 Some Things You Should Know About Us
span.m__lineBottom
div.who--cont
div.owl-carousel.owl-theme.owl-loaded.who--wrap
div.item
img(src="img/who-we-are-image-1.jpg" alt="")
div.item
img(src="img/who-we-are-image-1.jpg" alt="")
div.owl-dots
div.owl-dot.active
span
div.owl-dot
span
div.who--wrap.who--text.who--wrap.animated.wow.fadeInUp
h4.m__h4 A Little About Our Past
p.m__text Gunung Rinjani adalah gunung yang berlokasi di Pulau Lombok, Nusa Tenggara Barat. Gunung ini merupakan gunung favorit bagi pendaki Indonesia karena keindahan pemandangannya. Gunung ini merupakan bagian dari Taman Nasional Gunung Rinjani yang memiliki luas sekitar 41.330 ha dan ini akan diusulkan penambahannya sehingga menjadi 76.000 ha ke arah barat dan timur. Secara administratif gunung ini berada dalam wilayah tiga kabupaten: Lombok Timur, Lombok Tengah dan Lombok Barat. Gunung Rinjani dengan titik tertinggi 3.726 m dpl, mendominasi sebagian besar pemandangan Pulau Lombok bagian utara. Di sebelah barat kerucut Rinjani terdapat kaldera dengan luas sekitar 3.500 m x 4.800 m, memanjang kearah timur dan barat.
div.btn-gen
a(href="#").m-btn Read More
and the js is esl following
(() => {
/***************************
* OWL CAROUSEL SETTINGS
****************************/
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:false
});
/***************************
* WOW animated
****************************/
const wow = new WOW();
/***************************
* SCROLL PAGE NAV
****************************/
$('.nav a').bind('click', function(e){
e.preventDefault();
let $anchor = $(this);
let offset = $('body').attr('data-offset');
$('html, body').animate({
scrollTop: $($anchor.attr('href')).offset().top - (offset - 1)
}, 1000);
});
var sections = $('section'),
nav = $('nav'),
nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
/***************************
* NAV STYKY
****************************/
$(".nav").sticky({ topSpacing : 0 });
})();