Animation does not appear in section

0

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>
    
asked by anonymous 29.08.2018 / 09:37

0 answers