Animation does not appear in Section

Asked

Viewed 50 times

0

Eae guys I’m making a website in bootstrap 4 and want to put an animation with Animate.css, as it is divided into classes I only put the class and ready however the effect happens soon when loading the page and would like the effect to appear when the user lowers the scroll and load the specific Section for effect. the class name of the effect is 'bounceInLeft' and before put Animated then ' Animated bounceInLeft' . I CAN DO IT IN THE SECTION WHERE YOU HAVE CONTAINER,.

<!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>
javascript jquery css twitter-bootstrap

  • From what I understand you want the animation only to run when the Scroll reaches a certain correct element? Because if you put the face class the animation will happen before the user makes the scroll up to the element that is further down on the page is this?

  • Dude you can solve this easily without using a line of Javascript. Has a library called WOW.js, it is used together with Animate, the Animate is only CSS the wow is JS, with the wow you determine the duration of the animation and when the animation should happen, everything in the html tag that wants the effect. The link to the library is this https://mynameismatthieu.com/WOW/

No answers

Browser other questions tagged javascript jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.