Sobre a direção de animações
Encontrei este pequeno artigo de Paul Lewis e me lembrou da importância de animações adequadas na IU. É quase como dirigir um filme, cada quadro tem que ser colocado ali …
Continuar lendoanimations
Efeito de pêndulo simples usando animações CSS3.
Esta é minha primeira animação CSS3 absoluta! Estou muito animado com as possibilidades e com certeza vou ler alguns dos livros recomendados sobre o assunto. Aqui está um efeito de …
Continuar lendoCSS Keyframe Animations
yellowone.animate { -webkit-animation-name: yellow_one;-webkit-animation-duration: 13s;-webkit-animation-timing-function: ease;-webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;animation-name: yellow_one;animation-duration: 13s;animation-timing-function: ease;animation-iteration-count: infinite; animation-direction: normal;animation-delay: 0;animation-play-state: running;animation-fill-mode: forwards; } @ -webkit-keyframes yellow_one { 0% { left:185px; top:-15px;}6.6% …
Continuar lendoUma Barra de Navegação Funky
Algum tempo atrás, acho que deparei com algo desse tipo, mas nunca mais vi. Então, hoje decidi fazer uma demonstração da minha ideia. Envolve apenas uma barra de navegação e …
Continuar lendoRolagem suave sem jQuery
Acho que a maioria das pessoas se contenta em apenas usar jQuery para esses tipos de tarefas. Apesar disso, ainda acho que isso pode ser útil. O que essa função …
Continuar lendoTransição CSS e retorno de chamada de animação em JS
Transições: $(“#someSelector”).bind(“transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd”, function(){ … }); Animações: $(“#someSelector”).bind(“animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd”, function(){ … });
Continuar lendoProblema de translate3d no Samsung Galaxy S3 (webkit)
Se você era como eu e por algum motivo as animações traduzidas em 3D não se sobrepunham ou se sobrepunham como pretendido, depois de alguma pesquisa, encontrei sua resposta! Primeiro …
Continuar lendoAngularJS: Animações de rolagem
Introdução Todo mundo já viu animações baseadas em rolagem, certo? Você sabe, aqueles em que você começa a rolar para baixo na página da web e as animações começam a …
Continuar lendoAnimações de mudança de layout (altura deslizante)
visão global Uma animação que vejo muito é o slide para abrir. Normalmente, são os layouts reais de uma visualização que está sendo alterada. No entanto, se você apenas alterar …
Continuar lendoComo usar transições CSS para altura e largura de 0 px para automático
Cenário 1 Você tem um elemento que deseja expandir height: 0para qualquer que seja sua altura natural. Você prefere usar CSS, mas todos sabem que você não pode fazer a …
Continuar lendo