Search the Community
Showing results for tags 'animação'.
Found 12 results
-
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.
-
Sejam bem vindos em uma serie de Cursos de FreeCAD! Curso em andamento, onde vamos abordar todas as funcões do FreeCAD na linguagem português Brasil. Segue abaixo o link de nossa PlayList no youtube, onde contém todas nossas aulas do curso: Aguardamos a presença de todos vcs, comentem e curtam nossos videos, isso ajuda nosso canal.
-
Já visualizei o efeito em alguns sites mas não consegui acha-lo ainda. Como faço para colocar o efeito que, conforme for descendo o site, o conteúdo vai aparecendo em forma de animação na pagina. Exemplo: https://meusitecontabil.com.br/ Onde o texto e as imagens vão aparecendo em forma de animação conforme vai rolando a pagina.
-
Eu vi um website esses dias com um efeito muito bacana, se trata deste aqui: https://cash.me/ Eu estou me referindo ao efeito de transição que acontece quando o usuário desce a barra de rolagem. A diminuição da opacidade do preto e a forma com que o novo container sobe, achei muito interessante, porém não estou conseguindo representar isto e nem sequer sei quais ferramentas utilizar. Alguém poderia me ajudar com isso?
-
Tudo bem galera, comecei a fazer animação a pouco tempo, e decidi criar um canal de animação no youtube, assim vou melhora-lo com o tempo mais queria ver se está bom, da uma passada lá e deixa seu comentário pra mim melhorar ele, https://goo.gl/Wu3HTs quero a opnião sincera de vocês ! vlw
-
Estou tentado fazer um código com jquery que irá ficar animando um div com imagem de fundo e com vários elementos, neste momento estou tentando apenas animar a troca das imagens isso ficará em forma de loop, de tempo em tempo troca a imagem. Meu HTML esta da seguinte forma: <html> <head> <!--Import Google Icon Font--> <link rel="stylesheet" href="ifrntv.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="ifrntv.js"></script> <div id="7" class="ifrntv" style="background-image: url("http://localhost:3000/uploads/notice/picture/7/13584198_1063879390367251_539341910_n.jpg"); background-repeat: no-repeat; background-size: 100%; left: -9999px; opacity: 0;"> <div class="time">20:30 10/10/2017</div> <div class="logo"></div> <div class="text-notice"> <p class="title-notice">Meu teste 2</p> <p>kajsajkjks kjssajSLAJSAKLSJ</p> </div> </div> <div id="6" class="ifrntv" style="background-image: url("http://localhost:3000/uploads/notice/picture/6/samanau_geral.png"); background-repeat: no-repeat; background-size: 100%; left: -9999px; opacity: 0;"> <div class="time">20:30 10/10/2017</div> <div class="logo"></div> <div class="text-notice"> <p class="title-notice">Exemplo de Imagem</p> <p>O exemplo deve aparecer corretamente</p> </div> </div> </body> <object id="3afbcac9-88b8-8a86-8a4b-588cc8b9949f" width="0" height="0" type="application/gas-events-cef"></object> </html> Meu CSS está assim: .ifrntv{ width: 100%; height: 100%; position: absolute; } .logo { float: right; margin-top: 30px; margin-right: 90px; width: 10%; content: url('ifrn.png'); opacity: 0; } .time { margin-top: 300px; margin-left: 80%; width: 15%; height: 20%; font-size: 30pt; text-align: center; background-color: white; opacity: 0.7; position: absolute; border: 2px solid; border-radius: 25px; border-color: white; opacity: 0; } .text-notice{ position: absolute; z-index: 2; margin: 34% 0% 0% 00%; left: -9999px; padding-left: 10%; width: 100% ; height: 35%; font-family: arial, sans-serif; font-size: 35pt; background-color: black; opacity: 0.7; } .text-notice .notice-title{ font-size: 30pt; font-family: arial, sans-serif; } .text-notice p{ opacity: 1 ; color: white; font-size: 20pt; padding-left: 5%; font-family: arial, sans-serif; } E o JavaScript assim: $(function(){ iniciar(); }) function iniciar(){ $('body').find('.ifrntv').each(function(){ $(this).animate({left:0,opacity:1.0},{duration:1000,queue:'true',complete:iniciar}); $(this).animate({left:-9999,opacity:0},{duration:4000,queue:'true',complete:iniciar}); //alert(element); }); console.log(iniciar); //iniciar(); setTimeout(iniciar,10000); } Debugando pelo Chrome o código é executado mas nada acontece, o mais proximo que consegui fazer foi a duas imagens ficar aparecendo juntas, mas o objetivo é aparecer uma, fica um tempo, depois aparece a outra e assim continua sem parar. Estou esquecendo de algo no código das animações?
-
Olá, Fiz uma pergunta há um tempo atrás (https://forum.imasters.com.br/topic/555992-menu-animado-apenas-css/) mas não foi de grande ajuda. Contudo inspirado nos artigos: 1 - http://callmenick.com/post/animating-css-only-hamburger-menu-icons 2 - https://www.htmllion.com/css3-toggle-switch-button.html Consegui elaborar o tal Menu animado apenas com html e css (e colocar um efeito de elástico que deixa essa animação tão peculiar), só que não consigo fazer ela funcionar no único navegador que me interessa que é o Firefox. Funcionou nos seguintes browsers nas versões: Google Chrome - 56.0.2924.87 Avast Safe Browser - 3.55.2393.527 Opera - 43.0.2442.1144 Opera Neon - 1.0.2459.0 Microsoft Edge - 38.14393.0.0 Internet Explorer - 11.576.14393.0 Mas apresenta mau funcionamento no Firefox - 51.0.1 A animação foi inspirada nesta: E o código é este: •index.html •style.css Alguém poderia me ajudar com o código ou dizer qual foi o erro que cometi que não fez que funcionasse cem por cento?
-
Qual o nome da animação desse site: http://pt.wix.com/ Quando rolar a página para baixo a segunda página aparece por baixo.
-
Programa para produção de videos para instagram e facebook
Patrick.pc posted a topic in Edição/Produção de Vídeos
Olá, Gostaria de saber qual programa posso usar para fazer montagens de vídeos para redes sociais, Instagram e Facebook?? Neste caso além de efeitos nas imagens, o uso também de textos e fremes nos vídeos! Aguardo contato! Obrigado -
Fala galera, blz? Estou começando a estudar jquery para fazer uma basica animação no site que estou criando para o meu pai. A animação envolve fade de imagens (fadeIn, fadeOut) e uma movimentação básica. segue um exemplo do que eu quero fazer: 1 - primeiraParte entra com fade e sai com fade; 2 - segundaParte entra primeiro a imagem central, depois imageEsquerda e imagem direita (nessa ordem, ambas em fade); 3 - imagemEsquerda e imagemDireita se movem para baixo da imagem central; 4 - Saide em fade da segundaParte; Então, quais as funções tenho que estudar primeiro já que eu quero entregar isso para o meu pai? Ajuda também me passando assuntos de outros tópicos sobre o que irei ter que utilizar para tal feito. Obs.: Tenho experiencia apenas em html e css. Desde já agradeço! <div id="primeiraParte"> <img src="../Imagens/logo.png"> </div> <div id="segundaParte"> <div class="imagemEsquerda"> <img src="../Icons/esquerda.png"> </div> <div class="imagemCentral"> <img src="../Imagens/project.png"> </div> <div class="imagemDireita"> <img src="../Icons/direita.png"> </div> </div>
-
Movimentar personagem do jogo pelo Flash (Animação)
NbVinex posted a topic in Flash, ActionScript e tecnologias Adobe
Hey galera! Então, estou fazendo meu primeiro game (em Flash) já criei o design do cenário e o personagem, porem estou tendo dificuldades em fazer a animação de andar, programei a movimentação, mas não consigo faze-lo "dar passos".. Se alguém puder me ajudar ficarei grato! -
Estou precisando de ajuda to criando um site e preciso fazer algumas animações nele preciso fazer uma animação tipo assim o texto começa em 0% ai vai mudando 1%, 5%, 80%, 94%... a outra animação é na borda pra simular que ela ta carregando,tipo ela vai virando um circulo completo quem souber fazer as animações me explica como faz por favor eu creio que a de mudar os números é com javascript
