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.]
Marco Prestes
14/08/2008 às 22:01
Por isso que o Safari se tornou o meu Web Browser Favorito!
Usando odecoroth
14/08/2008 às 22:14
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…
Usando oCelso Dantas
14/08/2008 às 23:23
Java é pesado. CSS e JavaScript são bem levinhos. (ou pelo menos, beeem mais leve q usar Flash).
=]
Usando oBruno Soares
14/08/2008 às 23:26
* Sim, só que a framework utiliza toneladas de javascript para simular o efeito.
Usando oCelso Dantas
14/08/2008 às 23:40
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
Usando oBruno Soares
15/08/2008 às 08:43
Até hoje se usa muito javascript sim Celso. E, acredite, por enquanto Flash é muito mais leve que javascript para animações.
Usando oGustavo
15/08/2008 às 08:56
Coisa linda…
Usando oMarcelo
15/08/2008 às 13:43
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??
Usando oCelso Dantas
15/08/2008 às 22:36
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).
=]
Usando o