Jump to content
jackrs

Como colocar estrutura de animate / effects de transição no appendto

Recommended Posts

Obrigado, porém eu utilizei de estruturas simples com cores para fazer o exemplo ficar mais claro.

 

A ideia é mudar divs de lugares numa estrutura próxima disso ( 4 blocos e alguns escondidos que vão trocar de lugar naquela estrutura ), e a ideia é que a troca delas entre si tenham uma transição mais "suave" não tão bruta.

 

próximo do exemplo que segue abaixo:

 

https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html

 

 

 

Share this post


Link to post
Share on other sites

Hmmm... esse exercício é bom, ein...

 

Vamos pensar em um único caso, só duas imagens, uma em cima da outra esmaecendo e aparecendo "em cima" da outra... como poderiamos fazer...?

 

Imagino uma div com duas imagens dentro posicionadas absolutamente.... uma em cima da outra... com a mais em cima, partindo de transparência total, indo para 100% de opacidade... Pensei em uma estrutura como esta...

 

<div class="image-box">
  <img src="https://picsum.photos/id/1008/200/200" alt="" />
  <img src="https://picsum.photos/id/1012/200/200" alt="" />
</div>

E fazer a mágia da animação com CSS... aglo assim...

 

.image-box {
  position: relative; /* as imagens vão se basear na posição deste elemento para saber sua referencia no plano X, Y */
  width: 200px;
  height: 200px;
  display: inline-block; /* só para deixar uma do lado da outra */
}

.images-box > img {
  width: 200px;
  height: 200px;
}

@keyframes reveal { /* nossa animação, aqui vai o nome de referencia */
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.image-box > img + img { /* uma imagem que apareça depois de outra imagem... */
  position: absolute; /* posição absoluta, ou seja, fica "voando" sobre os
                         outros elementos, sua posição se baseia naquele position
                         relative lá em cima */
  top: 0;
  left: 0;
  
  animation: reveal 5s ease 5s 1 normal forwards;
  opacity: 0; /* precisa informar o valor inicial pra não ficar pulando... */
}

É... até que ficou bom... https://codepen.io/dgmike/pen/ZNrNvO?editors=1100

 

Agora, vamos colocar um javascript pra ficar legal... a animação leva em torno de 10s, 5s de espera e 5s de animação de fato (veja a referência do atributo animation). Então... vamos fazer com que o script remova a primeira imagem e adicione uma nova imagem depois, dando inicio a um novo ciclio.... que tal fazer isso em 15 segundos?

 

function changeImage() {
  setTimeout(function () {
    var boxes = document.querySelectorAll('.image-box');
    var box = Array.from(boxes).sort(function(){ return (.5 - Math.random()); })[0]; // pega um aleatório

    if (box.querySelectorAll('img').length > 1) { // se só tiver 1 imagem, a gente não remove ela
      var firstImage = box.querySelector('img');
      firstImage.parentNode.removeChild(firstImage); // remove a anterior
    }
    
    var img = document.createElement('img');
    // abaixo, geramos uma imagem aleatória
    img.src = 'https://picsum.photos/id/' + parseInt(Math.random() * 1000) + '/200/200';
    img.alt = '';
    
    box.appendChild(img); // e por fim, colocamos a imagem na box
    
    changeImage(); // e chamamos de novo, só pra não acabar nunca....
    
  }, 15000); // 15 segundos...
}


changeImage(); // o inicio é no fim...

Bom, já coloquei pra escolher uma caixa aleatória... mas acho que dá pra melhorar como colocar o tempo de 15 segundos aleatório entre 15 e 20... escolher mais de uma imagem por vez... bom, agora é contigo...

 

Ah, segue a versão até agora.... https://codepen.io/dgmike/pen/KLQLBd?editors=1011

 

Qualquer coisa, grita!

 

---

 

Referencias

https://www.w3schools.com/cssref/css3_pr_animation.asp

Share this post


Link to post
Share on other sites

Obrigado.

 

Tenho meio que um limitador na estrura, que no caso é mostrar 4 dessas divs e dps ir mostrando as demais cadastradas numa estrutura, então vou listar todas e depois ir "misturando" elas.

 

 vou avaliar como vai ser o funcionando de X em X tempo fazer algo proximo de hide() numa div e visible() nessa outra com ajax e utilizando de transitions/fades para ficar melhor visualmente, porem obrigado.

 

Mas a minha ideia era ter algo próximo do exemplo abaixo, porém com muito menos codigo.

 

https://github.com/codrops/AnimatedResponsiveImageGrid

Share this post


Link to post
Share on other sites

Tentei implementar com animate(), fade(), porém mesmo assim não obtive sucesso.

 

Será que somente com essa estrutura de mostrar 4 e esconder 4 div com informações diferentes futuramente, consigo realizar esse shuffle entre as divs com animação de fadein/fadeout aleatoria?

 

https://jsfiddle.net/h2av6nct/

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 Carcleo
      Tenho um botão, que pega a primeira li da ul e joga ela para a ultima posição ininterruptamente e assim eu faço um efeito de slideshow.
       
      HTML:
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> CSS:
      * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 200px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; justify-content: center; width: 500px; height: 150px; margin: 10px; } .slider > ul > li:hover { cursor: crosshair; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: 0.2; } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } .animacao { animation-duration: 4s; animation-name: identifier; } @keyframes identifier { 0% { right: 0; } 50% { right: 50%;} 75% { right: 75%; } 100% { right: 100%; } } JQUERY:
      function intervalo () { $(".slider > #next").click (); } var interval = setInterval(intervalo,4000); $(".slider > ul > li") .mouseover(function(){ clearInterval(interval); }) .mouseout(function(){ interval = setInterval(intervalo,4000); }) .addClass("animacao"); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); Tudo funciona bem.
      Mas estou tentando adicionar um efeito de transição tipo quando as lis mudarem de posição, elas correrem da direita para a esquerda em vez de aparecerem abruptamente.
       
      Será que tem como?
       
       
    • By Carcleo
      Estou tentando criar um slideshow mas personalizado sem depender de biblioteca de terceiros (salvo, jQuery);
       
      O objetivo é:
       
      A) O slide rodar interminavelmente.
      B) Ao passar o mouse no slide, ele deve parar;
      C) Ao deixar o slide, ele deve continuar rodando de onde parou!
      D) AQUI ESTÁ O PROBLEMA => Ao passar o mouse novamente o interval deve parar. Mas não está parando,
      function intervalo () { $(".slider > #next").click (); } interval = setInterval(intervalo,4000); $(".slider > ul > li").mouseover(function(){ clearInterval(interval); }).mouseout(function(){ interval = setInterval(intervalo,4000); }); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $('slider ul li:last-of-type').remove(); // remove a última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $('.slider ul li:first-of-type').remove(); // remove a primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 150px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; width: 500px; height: 150px; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: .2 } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> O que estará errado!?
    • By weltonmatos
      Estou instalando na plataforma Tray uma Pop Up de saída que surge quando o usuário leva o cursor pra barra de navegação. A pop aparece. O que não funciona é o botão fechar.
       
      function stick_close() { $('.stick_container').fadeOut(function() { $(this).remove(); }); $('.stick_block_layer').fadeOut(function() { $(this).remove(); }); $.removeData( document.body, "stick_var" ); } $.stick_close = function() { stick_close(); } <div id="modal-newsletter" style="display:none;" class="stick_popup"> <div class="stick_close" onclick="$.stick_close()">X</div> <div class="stick_content"> <h1>Teste</h1> </div> </div>  
    • By granderodeo
      Tenho a página pedidos.php, que recebe todos os pedidos que foram feitos no site nessa página tem informações com ID do pedido, ID do usuário, Endereço etc. Fiz um botão `Produtos` para que quando o ADM clique, abra uma modal vinda de outra página `modalbox.php`, com os produtos pedidos referentes aquele pedido. Por exemplo Pedido nº 833 ao lado dele terá um botão `Produtos` e quero que quando abrir a modal venha somente os produtos pedidos pelo 833. Com o código que tenho até o momento a modal abre, mas não mostra os produtos.
       
      pedidos.php
      <!-------------------------------- PEDIDOS -------------------------> <div class="table-responsive mt-2"> <table class="table table-bordered table-striped text-center"> <thead> <tr> <td colspan="9"> <h4 class="text-center text-info m-0">Pedidos realizados</h4> </td> </tr> <tr> <th class="text-center">ID do pedido</th> <th class="text-center">Nome do cliente</th> <th class="text-center">E-mail</th> <th class="text-center">Endereço</th> <th class="text-center">Número da casa</th> <th class="text-center">Valor</th> <th class="text-center">ID cliente</th> <th class="text-center">Situação</th> <th class="text-center">Produtos</th> </tr> </thead> <tbody> <?php require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders"); $stmt->execute(); $result = $stmt->get_result(); while($row = $result->fetch_assoc()): ?> <tr> <td> <?= $row['order_id'] ?></td> <!-- ID do pedido --> <td> <?= $row['order_name'] ?></td> </td> <td><?= $row['order_email'] ?> </td> <td> <?= $row['order_endereco'] ?> </td> <td> <?= $row['order_numero'] ?> </td> <td>R$<?= $row['valor_total'] ?></td> <td><?= $row['id_usuario'] ?> </td> <!---- BOTÃO PARA ABRIR MODAL COM OS PRODUTOS ----> <td> <a class="btn btn-danger pull-right" data-toggle="modal" href="#myModal" id="modellink" data-client="<?= $row['order_id'] ?>">Produtos</a> <div class="modal-container"></div> <!----FIM BOTÃO PARA ABRIR MODAL COM OS PRODUTOS ----> </tr> <?php endwhile; ?> </tbody> </table> </div> <!----- JQUERY PARA ABRIR MODAL -----> <script type="text/javascript"> $(document).ready(function(){ var order_id = $(this).attr("data-client"); var url = "modalbox.php?order_id=" + order_id; $_post(url,{ order_id = order_id, }, jQuery('#modellink').click(function(e) { $('.modal-container').load(url,function(result){ $('#myModal').modal({show:true}); }); }); }); </script>  
      modalbox.php
      <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="table-responsive mt-2"> <table class="table table-bordered table-striped text-center"> <thead> <tr> <td colspan="8"> <h4 class="text-center text-info m-0">Produtos dos pedidos</h4> </td> </tr> <tr> <th>ID do pedido</th> <th>ID cliente</th> <th>ID produto</th> <th>Quantidade</th> </tr> </thead> <tbody> <?php extract($order_id); if (isset($_GET['order_id'])) { $order_id = $_GET['order_id']; } else { die("ERRO: ID não definido."); } require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders_items WHERE order_id = '$order_id'"); $stmt->execute(); $result = $stmt->get_result(); while($row = $result->fetch_assoc()): ?> <tr> <td> <?= $row['order_id'] ?> </td> <td> <?= $row['id_usuario'] ?></td> </td> <td> <?= $row['product_id'] ?> </td> <td> <?= $row['quantity'] ?> </td> <!------- FIM ITEM REMOVER DO CARRINHO -------> </tr> <?php endwhile; ?> </tbody> </table> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div>  

    • By Good
      Boa noite,
      gostaria de saber como vocês fariam um sistema de delivery.
       
      Pensei em 3 soluções:
      1. Cadastrar as faixas de CEP que haverá sistema de entregas;
      2. Criar uma área delimitadora no google e exportar em KML para fazer a validação se o endereço do cliente está dentro do raio;
      3. Criar um raio de entregacom ponto fixo do estabelecimento, por exemplo, o estabelecimento só vai poder atender em um raio de até 10km.
       
      Qual método o ifood e outros gigantes trabalham? Existe algum código pronto para que eu possa dar uma olhada?
       
      Aguardo um contato, obrigado!
×

Important Information

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