Jump to content
rafael.amc

Div oculta atrapalhando no tempo de animação

Recommended Posts

Olá, pessoal. 

Estou fazendo um site com animações em js e css. Em uma das sessões desse site, tenho uma div que aparece só na versão de desktop e outra que aparece só na versão celular com os mesmos conteúdos e ambas são animadas (bloquei a div através do css). 

As animações são do tipo fadein ao rolar que já vieram no template e que estavam funcionando perfeitamente na versão original. Mas agora, na versão do celular, quando eu dou refresh na sessão (só no refresh, ao rolar está normal) as animações estão atrasadas, demoram mais para aparecer do que as outras partes da página que usam as mesmas animações, e percebi que isso acontecia porque ele estava esperando abrir as animações da div de desktop mesmo ela não aparecendo na versão do celular.

Alguém tem alguma dica do que devo fazer?

 

Obs.: precisei usar div em versões separadas para celular e pc porque a organização do conteúdo nas plataformas é muito diferente.   

Share this post


Link to post
Share on other sites

Tenho uma dica sim você expos o problema mas não relatou o que foi feito! agora já sabe pq não teve muitas respostas.

 

E o que foi feito para que o elemento renderizado no desktop, não apareça na versão mobile?

foi usado media-querie no css ou foi feito alguma lógica?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By thailangodoy
      Boa tarde amigos,
       
      Quero copiar o efeito hover, que aparece na foto de perfil do login, o qual consiste em uma borda externa, que não influencia no tamanho.
       
      Tentei atribuiu o box-sizing:border-box; // ele diminui a imagem e traz a borda para dentro.
       


    • By lumbarque_Oficial
      Tô a procura de uma equipe para participar 
       
      Sou programador, spriter ou músico
       
      meu nome é Gabriel , tenho 18 anos e já participei de uns grupo pequenos
       
      Sei de tudo um pouco mas a área que eu tô mais querendo botar a mão na massa atualmente é programação
       
      ~ alguém? ~
    • By leandro123456789
      <div id="direito">
             
             <?php 
                      
                 $link = filter_input(INPUT_GET, 'link');
                 
                 $pag[1] = "../admin/home.php";
                 $pag[2] = "../admin/classes/Lista.php";
                 
              
              
                 if(!empty($link)){
                     
                     if(file_exists($pag[$link]))
                        
                      {
                         include $pag[$link];
                      
                      }
                        
                      else
                      { 
                         
                          include "home.php";
                      
                      }
                     
                 }else{
                     include "home.php";
                 }
              
              ?>
             
          </div>
       
       
      Estou tentando colocar a paginação do meu banco em $ pag [2] na minha página: ../admin/classes/Lista.php tem o seguinte código de paginação:

      <? php
          
          include_once ("../ admin / classes / ClassConexao.php");
          
          
          // verifique a página atual se informado no URL, caso contrário, ela será atribuída como 1ª página
          $ pagina = (isset ($ _ GET ['link = 2']))? $ _GET ['link = 2']: 1;
       
          // seleciona todos os itens da tabela
          $ cmd = "selecione * da categoria";
          $ produtos = mysqli_query ($ conn, $ cmd);
          
          // conta o total de itens
          $ total = mysqli_num_rows ($ produtos);
       
          // seta o número de itens por página, neste caso, 2 itens
          $ registros = 2;
       
          // calcula o número de páginas arredondando o resultado
          $ numPaginas = teto ($ total / $ registros);
       
          // variável para calcular o início da visualização com base na página atual
          $ inicio = ($ registros * $ pagina) - $ registros;
       
          // seleciona itens por página
          $ cmd = "selecione * da categoria limite $ inicio, $ registros";
          $ produtos = mysqli_query ($ conn, $ cmd);
          $ total = mysqli_num_rows ($ produtos);
           
          // exibe produtos selecionados
          while ($ produto = mysqli_fetch_array ($ produtos)) {
              echo $ produto ['id_categoria']. "-";
              echo $ produto ['categoria']. "-";
              echo $ produto ['ativo_categoria']. "<br />";
          }

      // Não sei como consertar esta parte para mostrar a paginação nesse $ pag [2] = "../admin/classes/Lista.php";
           
          // exibe paginação
          para ($ i = 1; $ i <$ numPaginas + 1; $ i ++) {
              
             echo "<a href='?pagina=$i'>". $ i. "</a>";
          }
                  
      ?>
      Meu menu fica assim:

      <div id = "sessao"> Categoria </div>
         <ul>
             
            
             <li> <a href="index.php?link=3"> Cadastro </a> </li>
             <li> <a href="index.php?link=2"> Listar / Editar </a> </li>
         
        </ul>
    • By Camilavip
      Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé
      Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css
       
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> </head> <body> <!-- CSS DO FLIP --> <style> .flip-container:hover .flipper{ transform: rotateY(180deg); /* se quiser uma animação na vertical, troque por rotateX(180deg) */ } .flipper{ width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .front, .back{ position: absolute; width: 100%; height: 100%; } .back{ transform: rotateY(180deg); } </style> <center> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" /> </div> <div class="back"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" /> </div> </div> </div> <!-- AQUI COMEÇA O RODAPÉ --> <!-- CSS DO RODAPÉ --> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; color: #d9d9d9; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .content1{ position: relative; margin: 130px auto; text-align: center; padding: 0 20px; } .content1 .text{ font-size: 2.5rem; font-weight: 600; color: #202020; } .content1 .p{ font-size: 2.1875rem; font-weight: 600; color: #202020; } footer{ position: fixed; bottom: 0px; width: 100%; background: #111; } .main-content{ display: flex; } .main-content .box{ flex-basis: 50%; padding: 10px 20px; } .box h2{ font-size: 1.125rem; font-weight: 600; text-transform: uppercase; } .box .content{ margin: 20px 0 0 0; position: relative; } .box .content:before{ position: absolute; content: ''; top: -10px; height: 2px; width: 100%; background: #1a1a1a; } .box .content:after{ position: absolute; content: ''; height: 2px; width: 15%; background: #f12020; top: -10px; } .left .content p{ text-align: justify; } .left .content .social{ margin: 20px 0 0 0; } .left .content .social a{ padding: 0 2px; } .left .content .social a span{ height: 40px; width: 40px; background: #1a1a1a; line-height: 40px; text-align: center; font-size: 18px; border-radius: 5px; transition: 0.3s; } .left .content .social a span:hover{ background: #f12020; } .center .content .fas{ font-size: 1.4375rem; background: #1a1a1a; height: 45px; width: 45px; line-height: 45px; text-align: center; border-radius: 50%; transition: 0.3s; cursor: pointer; } .center .content .fas:hover{ background: #f12020; } .center .content .text{ font-size: 1.0625rem; font-weight: 500; padding-left: 10px; } .center .content .phone{ margin: 15px 0; } .right form .text{ font-size: 1.0625rem; margin-bottom: 2px; color: #656565; } .right form .msg{ margin-top: 10px; } .right form input, .right form .msgForm{ width: 100%; font-size: 1.0625rem; background: #151515; padding-left: 10px; border: 1px solid #222222; } .right form input:focus, .right form .msgForm:focus{ outline-color: #3498db; } .right form input{ height: 35px; } .right form .btn{ margin-top: 10px; } .right form .btn button{ height: 40px; width: 100%; border: none; outline: none; background: #f12020; font-size: 1.0625rem; font-weight: 500; cursor: pointer; transition: .3s; } .right form .btn button:hover{ background: #000; } .bottom center{ padding: 5px; font-size: 0.9375rem; background: #151515; } .bottom center span{ color: #656565; } .bottom center a{ color: #f12020; text-decoration: none; } .bottom center a:hover{ text-decoration: underline; } @media screen and (max-width: 900px) { footer{ position: relative; bottom: 0px; } .main-content{ flex-wrap: wrap; flex-direction: column; } .main-content .box{ margin: 5px 0; } } </style> <div class="content1"> <div class="text"> Fully Responsive Footer Section</div> <div class="p"> HTML and CSS (Flexbox)</div> </div> <footer> <div class="main-content"> <div class="left box"> <h2> About us</h2> <div class="content"> <p> CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p> <div class="social"> <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a> <a href="#"><span class="fab fa-twitter"></span></a> <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a> <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a> </div> </div> </div> <div class="center box"> <h2> Address</h2> <div class="content"> <div class="place"> <span class="fas fa-map-marker-alt"></span> <span class="text">Birendranagar, Surkhet</span> </div> <div class="phone"> <span class="fas fa-phone-alt"></span> <span class="text">+089-765432100</span> </div> <div class="email"> <span class="fas fa-envelope"></span> <span class="text">abc@example.com</span> </div> </div> </div> <div class="right box"> <h2> Contact us</h2> <div class="content"> <form action="#"> <div class="email"> <div class="text"> Email *</div> <input type="email" required> </div> <div class="msg"> <div class="text"> Message *</div> <!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea --> <changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea --> <br /> <div class="btn"> <button type="submit">Send</button> </div> <div class="bottom"> <center> <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span> <span class="far fa-copyright"></span> 2020 All rights reserved. </center> </div> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.