Como simular o efeito de deslizar o dedo no Safari Mobile usando CSS
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.]
![Google testa nova interface de buscas, muito mais colorida [atualizado]](http://macmagazine.uol.com.br/wp-content/themes/arthemia-premium/scripts/timthumb.php?src=http://macmagazine.uol.com.br/wp-content/uploads/2009/11/25-google_visual01-550x358.png&w=80&h=80&zc=1&q=100)
Por isso que o Safari se tornou o meu Web Browser Favorito!
Não quero ser chato, mas não é mais fácil fazer esse efeito com Java? Fiz algo parecido uns 2 anos atrás usando uma framework bem conhecida, que eu não lembro o nome…
Java é pesado. CSS e JavaScript são bem levinhos. (ou pelo menos, beeem mais leve q usar Flash).
=]
* Sim, só que a framework utiliza toneladas de javascript para simular o efeito.
Não concordo que vá utilizar toneladas de javascript.
Além do que, é css. Não javascript.
E de qualquer forma, nada é mais pesado que flash. =P
Até hoje se usa muito javascript sim Celso. E, acredite, por enquanto Flash é muito mais leve que javascript para animações.
Coisa linda…
No meu iPhone ficou legal, mas aqui no Safari para Windows não funfou não!
“os recursos só funcionarão em iPhones, iPods touch e no Safari 3 para desktops, é claro.”
Tem certeza que funciona para desktop??
Opa bruno, sei que javascript é muito usado. Na verdade, hoje em dia é que está sendo muito usada e seu uso tá crescendo muito (digo isso pelo Ajax).
E sobre animações, discordo sobre o peso de animação Flash ser mais pesado. Conte isso que o iPhone não tem suporte a Flash (mas JS sim) por conta disso. (pelo menos é um dos motívos)
E sobre o lance do scroll ai é usando CSS e não JS. (se bem q vc pode chamar javascript nos eventos do CSS).
=]