Jump to content
Raitoniisa

Como fazer efeito de deslize de um pop up ou div em javascript?

Recommended Posts

Olá estou fazendo uma rede social e preciso fazer uma especie de pop up ou div escondida, que abra o formulário de cadastro e que  venha deslizando da esquerda para direita, quando eu clicar no "cadastrar". O que seria melhor eu fazer também, criar um botão e mudar as propriedades dele para deixa-lo ancorado no local ou crio um label e coloco uma especie de oneClick ?

OBS: sou iniciante em javascript rsrs.

Share this post


Link to post
Share on other sites

Dar para fazer com jquery e css3.

 

Bem crie um div - pai ela comterá todo o disign e posição de quando a janela estiver ativa. Aplicando-se então uma propriedade display: none você a ocultará.

 

Usamos então a jQuery seja por um evento qualquer acione um comando: $('.pai').addClass('efeito');

Então crie o div efeito, ela poderá conter qualquer propriedade CSS que a div pai também vai possuir incluindo propriedades de efeitos css3, lembrando de passar um display block.

 

Veja um exemplo:

Spoiler

<script type="text/javascript">
    $(document).ready(function () {
        $('.mostrar').click(function () {
            $('.pai').addClass('efeito');
        });
    });
</script>
<style>
    .pai {
        height: 400px;
        width: 400px;
        margin-left: 400px;
        background-color: #ff0000;
        display: none;
    }
    .efeito {
        display: block;
        position: relative;
        animation: animacao .6s
    }
    @keyframes animacao {
        from{
            left: -400px;
            opacity: 0
        } to {
            left: 0;
            opacity: 1
        }
    }
</style>
<button class="mostrar">ATIVAR</button>

<div class="pai"></div>

 

 

Share this post


Link to post
Share on other sites

Segue um exemplo com o efeito Toggle do jquery.

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle(1000);
    });
});
</script>
</head>
<body>

<button>Toggle between hiding and showing the paragraphs</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>

 

Seria legal dar uma olhada nesses efeitos tbm. jQuery Effect Methods

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 klasss
      Olá a todos, 

      Tenho aqui um erro parvo não estou a ver como resolver . 

      Na minha View tenho um botão que será para fazer a aprovação de documentos , que abre uma modal para fazer a confirmação : 
      O problema é que quis fazer a mesma coisa para rejeitar. 
       
      <a href="{{route('despesas.modal', $item)}}" ><i class="fas fa-check text-info mr-1"></i></a> <a href="{{route('despesas.modal2', $item)}}" ><i class="fas fa-ban text-danger mr-1"></i></a> <?php if(@$id != ""){ echo "<script>$('#modalaceitar').modal('show');</script>"; } ?> <?php if(@$id != ""){ echo "<script>$('#modalrejeitar').modal('show');</script>"; } ?> Será que consigo validar por exemplo criando um ID nos dois botões?  
       
      Obrigado!
    • By viniciusfroner
      Bom dia, quero fazer um botão onde ao der o click pelo pc leve a uma página de contato para o whatsapp e pelo celular leve o número de contato a discagem direta.
      Procurei em alguns lugares mas o método de implementação que encontrei dependeria de codigos javascript que pra mim ainda são muito complexos, como por exemplo:
       
      function detectar_mobile() { var check = false; //wrapper no check (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } <a href="" class="get-started-btn scrollto">Ligue para nós</a>  
    • By Marceloely
      Eu gostaria de saber como fazer para preencher automaticamente(pré populado) uma página de pagamentos a partir dos dados inseridos em uma página anterior pelo plugin do contact form 7 do wordpress
       
      Os campos até são preenchidos, mas não com a informação inserido no formulário mas sim com a id mesmo que coloquei na URL
        
      <label> Seu nome
          [text nome id:nome class:nome] </label>
      <label> Seu DDD
      [tel DDD id:DDD class:DDD]</label>
      <label> Seu Celular
      [tel celular id:celular class:celular]</label>
      <label> Seu e-mail
      </label>
      <label> Assunto
          [text* your-subject] </label>
      <label> Sua mensagem (opcional)
          [textarea your-message] </label>
      [submit "Enviar"]
      <script>
       document.addEventListener('wpcf7mailsent', function (Event) {
         location = 'https://pay.hotmart.com/A48773288I?ap=5181&name=id:nome&phoneac=id:ddd&phonenumber=id:celular&email=id:email';
       }, false);
      </script>
    • By Marceloely
      Em alguns países, campanhas de publicidade com objetivo de mensagem no instagram são proibidas, tendo isso em vista gostaria de saber se é possível criar um link onde o usuário caia direto no inbox de outra pessoa no instagram? Como se fosse aqueles links do que cai na conversa do whatsapp.
    • By rafa-martin
      Pessoal, boa noite. 
       
      Estou tendo problemas ao passar um  parâmetro do tipo cursor no java no momento que chamo uma proc no oracle. 
       
      Tenho uma procedure que o parâmetro é um cursor. 
       
      create or replace minhaproce(p_result OUT SYS_REFCURSOR)
       
      begin
        open p_result for select * from tabela;
      end;
       
      Até aqui beleza. 
       
      quando chamo no java não está aceitando o tipo cursor.
       
      @Query(value = "{call minhaproce(?)}", nativeQuery = true)
      Collection<Coche> minhaproce(@Param("p_result") OracleTypes.CURSOR) 
       
      não é aceita. mesmo eu colocando como collection Collection<Coche> listaProcedure(@Param("p_result") List<Coche> p_result2), também não aceita. Agora seu eu fizer o select direto com abaixo retorna. 
       
      @Query(value = "SELECT * FROM tabela", nativeQuery = true)
      Collection<Coche> minhaproce();
       
      Por que funciona fazendo o select direto e não funciona pela procedure? Não acho nada na internet alguma coisa parecida.
×

Important Information

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