O Ajaxian publicou recentemente uma dica de como fazer com que Web apps do iPhone utilizem um recurso que simula o efeito de deslizar os dedos (flicking), tal como em aplicativos nativos do gadget da Apple. O método é extremamente simples e utiliza uma técnica CSS compatível com o Safari Mobile.
Ocorre que o browser móvel da Apple já incorpora, em sua versão atual, alguma compatibilidade com a linguagem CSS3, incluindo seletores DOM avançados e suporte para animações e transições. Desta maneira, até que a mesma compatibilidade seja implementada em outros navegadores, os recursos só funcionarão em iPhones, iPods touch e no Safari 3 para desktops, é claro.
Observe como o vídeo acima só realiza ações a partir de um número x de pixels “deslizados”. Super bacana!
E aqui está o segredo:
.divSlide {
-webkit-animation-name: "slide-me-to-the-right";
-webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" {
from { left: 0px; }
to { left: 100px; }
}
Os programadores curiosos de plantão com certeza se divertirão descobrindo outras coisas interessantes pela documentação oficial de Web apps da Apple.
[Via: TUAW.]