Jump to content

Search the Community

Showing results for tags 'transition'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Web Development
    • HTML e CSS
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets and other environments
    • WordPress
    • Mobile
    • Agile
    • Desenvolvimento de Games
    • Banco de Dados
    • Design and UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • iMasters's pub

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 10 results

  1. Estou com uma tarefa aqui e não estou conseguindo criar uma lógica para adicionar uma transição entre os elementos. Segue da seguinte forma: Tenho uma caixa central que irá abrigar 3 ou mais caixas. Cada caixa filha tem exatamente as mesmas dimensões da paixa mãe. Ao executar a função a caixa que está ao centro move-se para esquerda e a da direita também assumindo a posição da caixa anterior. Quando por exemplo antes de chegar a última filha, a primeira que se moveu toma o lugar da ultima assim tornando-se uma espécie de loop infinito. Ou seja depois da última filha a primeira toma o lugar dela para que a atual última possa se mover ao centro. Exemplo: / [1] / [2] - [3] "clicou em avançar torna essa sequência" [1] / [2] / [3] Até aqui tudo bem, bastando eu clonar a primeira caixa atual, remover-la então logo em seguida adicionar a cópia no final. Porém aqui que entra a questão pois teria que adicionar uma animação de transição, de forma que que as caixas movam-se lentamente para esquerda. Aqui está o esboço de teste: HTML: CSS: Javascript: Eu pensei em recursos como marginLeft e translateX, mas em ambos casos sempre terei o problema que se eu mover negativamente as caixas, ao remover qualquer uma que é o caso da primeira ir para último, todas as demais caixas vão ficar fora da caixa central. Quem tiver alguma ideia como adicionar essa transição de movimento, ficaria grato com a ajuda.
  2. Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda. Codigo js window.onscroll = function(){ var top = window.pageXOffset || document.documentElement.scrollTop var barra = document.querySelector(".barra"); if(top > 900){ barra.style.display = 'flex'; //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso. barra.classList.add('transition'); }else{ barra.style.display = 'none'; } } Codigo css .barra{ width: 100%; height: 70px; background-color: #090b13; display: none; justify-content: space-between; position: fixed; opacity: 0; } .transition{ transition: 1s; opacity: 0.7; } codigo HTML <div class="barra" > <img src="assets/images/logo-nopad.svg" alt=""> <button class="botao-assinatura-header">Assine Agora</button> </div>
  3. FabianoSouza

    Transition Height não funciona em UL

    Estou tentando fazer algo simples: redimensionar a altura de uma UL, usando classList.toggle (javascript). Percebo que, se no CSS eu tentar aplicar o estilo em cascata, não faz efeito na UL só por estar dentro de uma DIV. Se no CSS eu colocar: .cnt-filtro-body ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden; transition: height 0.5s; background-color:#FF0; display:block; pra estilizar somente ULs que estejam dentro da DIV que tem a classe chamada cnt-filtro-body, a coisa não funciona. Só funciona se partir direto da ul, assim: ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden; transition: height 0.5s; background-color:#FF0; display:block; Vejam o código. <!DOCTYPE html> <html> <head> <style> .cnt-filtro-body{position:relative; height:50px; width:100%; } .secao-toggle{height:160px; display:block; float:left; position:relative;} ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden; transition: height 0.5s; background-color:#FF0; display:block; } </style> </head> <body> <button onclick="myFunction()">Clique aqui</button> <div class="cnt-filtro-body"> <ul id="myDIV"> This is a DIV element. </ul> </div> <script> function myFunction() { var element = document.getElementById("myDIV"); element.classList.toggle("secao-toggle"); } </script> </body> </html> Minha necessidade é: estilizar apenas UL que estejam dentro da DIV que esteja usando a classe cnt-filtro-body
  4. Gostaria de saber como consigo colocar um animate/effect de transição mais "suave" na troca das divs do código anexo. https://jsfiddle.net/h2av6nct/
  5. Carlos Web Soluções Web

    Simples CSS Button Div transition

    Olá, pessoal, boa tarde !! Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !! Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando: <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor ! Obrigado !!
  6. Bom dia pessoal, sou novo no Imasters e na parte de desenvolvimento em geral e estou com uma dúvida bem simples, não julguem kkk Criei esse slider descrito logo abaixo e não consigo fazer a troca de imagens automática. Por exemplo, a cada 3 segundos a imagem fazer um fade out e entrar outra com fade in básico, ou mesmo deslizar pro lado. A animação não tem tanta importancia. O que queria mesmo era fazer com que funcione o código pra automatizar a troca de imagens. Alguem poderia por favor me dar uma luz? Tentei algumas coisas aqui mas não consegui :/ Segue o slider: <div class="div-slider"> <ul class="slides-front"> <input type="radio" name="radio-btn" id="img-1" checked=""> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-1.png"> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-2.png"> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3"> <li class="slide-container"> <div class="slide"> <img src="http://10.0.2.220/draftfile.php/961/user/draft/587036133/slider-front-3.png"> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> </li> </ul> </div> E o CSS do mesmo: /*------------------- SLIDER FRONT PAGE - NOVIDADES ----------------------*/ @import url(https://fonts.googleapis.com/css?family=Varela+Round); .div-slider{ width: auto; height: 400px; text-align: center; } .slides-front { padding: 0; width: 980px; height: 370px; display: block; margin: auto; position: relative; } .slides-front * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides-front input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 980px; height: 370px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out 0.1s; } .slide img { width: 100%; height: 100%; } .nav label { width: 150px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out 0.1s; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: relative; text-align: center; } .nav-dots .nav-dot { top: 375px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, { background: rgba(0, 0, 0, 0.8); } Acho que é isso (: Qualquer ajuda é bem vinda. Valeeeeu
  7. Eae pessoal tudo bem ? Seguinte estou aprendendo CSS, e fiz um menu um pouco animado. Ao passar a mouse sobre um Li ela mostra seus componentes com uma animação e delays diferentes. Meu problema é o seguinte, quando eu tiro o Mouse, os delays ainda acontecem deixando assim uma animação bem "Feia". Eu queria que ao tirar o mouse os itens voltassem ao mesmo tempo sem delay alguém pode me ajudar ? ( mais uma pergunta, estou aprendendo CSS3 e logo logo começo estudar JavaScript sabem me dizer se conseguria fazer animações como essa utilizando JavaScript mais facilmente ? ) Obrigado pela atenção o código esta abaixo <!doctype html> <html> <head> <meta charset="utf-8"> <title>Menu deslizante</title> <style> .container{ height: 500px; width: 200px; padding: 0px; overflow: hidden; } .menu{ width: 200px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; color:whitesmoke; font-size: 13pt; } .menu ul{ list-style: none; position: relative; padding: 0px; } .menu ul ul { padding: 0; position:absolute; transform: translateX(200px); } .menu ul li:hover ul{ position: relative; transition:2s; } .menu ul li:nth-child(1){ transition:0.25s; } .menu ul li:hover ul li:nth-child(1){ transform: translateX(-190px); } .menu ul li:nth-child(2){ transition:0.25s; transition-delay: 0.25s; } .menu ul li:hover ul li:nth-child(2){ transform: translateX(-190px); } .menu ul li:nth-child(3){ transition:0.25s; transition-delay: 0.5s; } .menu ul li:hover ul li:nth-child(3){ transform: translateX(-190px); } .menu li{ padding: 15px; cursor: pointer; background-color: rgba(188,27,30,1.00); border-bottom: rgba(229,79,82,1.00) solid 1px; } </style> </head> <body> <div class="container"> <nav class="menu"> <ul> <li>Home</li> <li>Galeria</li> <li>Shop <ul> <li>Cell Cases</li> <li>Notebook Acessories</li> <li>To your House</li> </ul> </li> <li>Contacts</li> <li>About us</li> </ul> </nav> </div> </body> </html>
  8. Olá, eu estava desenvolvendo um projeto para a escola e queria fazer meio que um efeito de transição entre as páginas para quando forem selecionados os conteúdos, encontrei uma biblioteca que fazia umas transições legais e a baixei. Entretanto fui fazer algumas adaptações para o que eu queria, onde quando saísse a primeira, eu selecionasse o tipo de dado da segunda, mas, eu não consigo fazer isso, o menu não aparece. Segue a biblioteca e o meu código <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A Collection of Page Transitions with CSS Animations" /> <meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" /> <meta name="author" content="Codrops" /> <link rel="stylesheet" type="text/css" href="transition/css/default.css" /> <link rel="stylesheet" type="text/css" href="transition/css/multilevelmenu.css" /> <link rel="stylesheet" type="text/css" href="transition/css/component.css" /> <link rel="stylesheet" type="text/css" href="transition/css/animations.css" /> <script src="transition/js/modernizr.custom.js"></script> </head> <body> <!-- /triggers --> <div id="pt-main" class="pt-perspective"> <div class="pt-page pt-page-1"><h1>Gerenciar</h1> <ul class="dl-menu"> <li data-animation="25"><a>aaaa</a></li> </ul> <div class="pt-triggers"> <div id="dl-menu" class="dl-menuwrapper"> <button class="dl-trigger">Selecione o comando</button> <ul class="dl-menu"> <li data-animation="36"> <a href="#">Listar</a> </li> <li data-animation="36"> <a href="#">Alterar</a> </li> <li data-animation="36"> <a href="#">Deletar</a> </li> </ul> </div> </div> </div> <div class="pt-page pt-page-2"><h1><span>Selecione</span></h1> <div class="pt-triggers "> <div id="dl-menu" class="dl-menuwrapper"> <button class="dl-trigger">Selecione tipo de dado</button> <ul class="dl-menu"> <li data-animation="36"> <a href="#">Fornecedor</a> </li> <li data-animation="36"> <a href="#">Produto</a> </li> <li data-animation="36"> <a href="#">CLiente</a> </li> <li data-animation="36"> <a href="#">Administrador</a> </li> </ul> </div> </div> </div> <div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div> <div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div> <div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div> <div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div> </div> <div class="pt-message"> <p>Your browser does not support CSS animations.</p> </div> <script src="js/jquery-3.1.1.min.js"></script> <script src="transition/js/jquery.dlmenu.js"></script> <script src="transition/js/pagetransitions.js"></script> </body> </html> PageTransitions-master.rar
  9. Olá, Estou tentando fazer um efeito onde uma div sobe suavemente. Até consegui fazê-la subir, porém não com o efeito que gostaria. O efeito que gostaria de aplicar é o mesmo encontrado nos quatro blocos dispostos horizontalmente no site http://www.ambev.com.br/ , logo na página inicial. Alguém poderia me ajudar? Segue meu código até então: CSS: <style> #servico1{ background-color: green; height:300px; width:200px; overflow:hidden; } #efeito1{ position:relative; width:100%; height:300px; top:-150px; background-color: #030303; opacity:0.5; cursor:pointer; } #efeito1:hover{ top:-300px; transition: all .1s linear; } </style> HTML: <div id="servico1"> <img src="imagens/drone.jpg" alt="imagem" /> <div id="efeito1"> <h1>AEROFOTOGAMETRIA</h1> <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para... </p> </div> </div> Pensei em usar a propriedade animate() do jQuery, porém não mudou muita coisa.
  10. Iskandar

    Vue/jQuery Transition/Animation

    Boa noite pessoal, minha dúvida é bem simples. Queria saber como uso transitions/animations no Vue, sem precisar do v-if. Se é que é possível. Em minha aplicação utilizo Vue com o Bootstrap e queria utilizar as animações nos menus Dropdown, tipo clica no botão e o dropdown aparece com alguma animação, em seguida ele some com outra animação. Alguém sabe como? Agradeço.
×

Important Information

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