O melhor pedaço da Maçã.

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.

Publicidade
[youtube]http://www.youtube.com/watch?v=wQYOnlae3QQ[/youtube]

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!

Publicidade

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.]

Ver comentários do post

Compartilhe este artigo
URL compartilhável
Post Ant.

Ex-diretora jurídica da Apple firma acordo em escândalo de anos atrás

Próx. Post

MacMagazine na PhotoImageBrazil 2008

Posts Relacionados