Hey guys, I'm doing a site in bootstrap 4 and I want to put an animation with animate.css, how it's divided into classes, I just put the class and that's it, but the effect happens when you load the page and I want the effect to appear when the user lower the scroll and load the section specifies the effect. the class name of the effect is 'bounceInLeft' and before it puts animated then 'animated bounceInLeft' .N I CAN GET IN THE SECTION WHERE CONTAINER HAS, ROW COUNTERS IN CASE WITH THE SMALL ICONS THE 4 TEXTS WITH H1 WANTED THE EFFECT IN THAT. p>
<!DOCTYPE html>
<html>
<head>
<title>Titulo.</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="viewport" content="width=device-width", initial-scale=1>
<link rel="stylesheet" href="css/all-animation.min.css" type="text/css">
<link rel="stylesheet" href="css/animate.css" type="text/css">
<link rel="shortcut icon" href="caminhodoarquivo/favicon.ico">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-
hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
</head>
<body>
<div class="mynavbar">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a href="indexpadrao.html" class="navbar-brand">
<img src="images/logo.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#conteudoNavbarSuportado" aria-
controls="conteudoNavbarSuportado" aria-expanded="false" aria-
label="Alterna navegação">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="conteudoNavbarSuportado">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="plans.html" class="nav-link text-white">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-white">Sobre</a>
</li>
<li class="nav-item pr-2">
<a href="#" class="nav-link text-white">Portifolio</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-
light">Contato</button>
</li>
</ul>
</div>
</nav>
<div class="principal2">
<h1 class="display-1">Meu Nome é Matheus Luiz.</h1>
<hr>
<h3 class="display-1">Sejam Bem-Vindos e conheçam um pouco do meu
trabalho.</h3>
<button type="button" class="btn btn-outline-dark btn-lg display-1"
style="padding-left:30px;padding-right: 30px;font-size:1.8rem">Saiba
mais</button>
</div>
</div>
<section>
<div class="container">
<div class="text-center">
<h3 class="display-4 text-primary">O que eu faço?</h3>
<p class="h6 pb-5">Veja um pouco mais do que eu faço para tornar os
sites ainda mais completos para os padrões do mercado.</p>
</div>
<div class="row counters" style="line-height: 28px;">
<div class="col-xl-3 col-lg-6 col-md-6 text-center animated
bounceInLeft">
<div class="single_service">
<div class="ico mb-4"><i class="fab fa-searchengin"></i></div>
<h2>Search Engine Optimization</h2>
<p style="color:#4c4c4c;">Cansado de não ter visitas? Seu site
no top dos buscadores mais utilizados no mercado como Google e Bing.</p>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 text-center animated
bounceInLeft">
<div class="single_service">
<div class="ico mb-4"><i class="fas fa-mobile-alt"></i></div>
<h2>Design Responsivo</h2>
<p style="color:#4c4c4c;">Sites que se adaptam as diferentes
resoluções de tela e trazem uma ótima experiencia com o usúario e site.
</p>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 text-center">
<section class="animated bounceInRight">
<div class="single_service">
<div class="ico mb-4"><i class="fas fa-heart"></i></div>
<h2>Feito com amor e carinho</h2>
<p style="color:#4c4c4c;">Meus sites são feitos pela paixão de
programar e ver resultados incríveis na tela que podem mudar o rumo de
empresas.</p>
</div>
</section>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 text-center animated
bounceInRight">
<div class="single_service">
<div class="ico mb-4"><i class="fas fa-users"></i></div>
<h2>Sempre a seu favor</h2>
<p style="color:#4c4c4c;">Tenho técnicas avançadas com meus
clientes para atingir exatamente o que os mesmos querem.</p>
</div>
</div>
</div>
</div>
</section>
<section class="container">
<h1 class="display-4 text-center mt-5 mb-4">Minha habilidades</h1>
<div class="progress mb-4">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" style="width: 95%" aria-valuenow="10" aria-valuemin="0"
aria-valuemax="100"><h3 class="text-center">HTML5</h3></div>
</div>
<div class="progress mb-4">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-
dark"
role="progressbar" style="width: 94%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"><h3 class="text-center">CSS3</h3></div>
</div>
<div class="progress mb-4">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-
success" role="progressbar" style="width: 100%" aria-valuenow="50" aria-
valuemin="0" aria-valuemax="100"><h3 class="text-center">RESPONSIVO</h3>
</div>
</div>
<div class="progress mb-4">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-
warning" role="progressbar" style="width: 95%" aria-valuenow="75" aria-
valuemin="0" aria-valuemax="100"><h3 class="text-center">BOOTSTRAP 4</h3>
</div>
</div>
<div class="progress mb-4">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-
danger" role="progressbar" style="width: 90%" aria-valuenow="100" aria-
valuemin="0" aria-valuemax="100"><h3 class="text-center">JAVASCRIPT</h3>
</div>
</div>
</section>
<section class="container">
</section>
<!-- Primeiro o jsquery -->
<!-- Segundo o Popper min -->
<!-- Terceiro o Bootstrap js -->
<script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/our.js"></script>
<script>
$(window).scroll(function(){
$('nav').toggleClass('scrolled',$(this).scrollTop() > 500);
});
tentei fazer isso aqui , COM NAV FOI PERFEITAMENTE O EFEITO QUE EU QUERIA
MAS N CONSIGO FAZER FICA NA SECTION ONDE TEM CONTAINER,ROW COUNTERS NO CASO
$(window).scroll(function(){
$('row counters').toggleClass('animated bounceInLeft',$(this).scrollTop()
> 700);
});
</script>
</body>
</html>