Aprenda neste vídeo como mais sobre o LayerJS e Crie Animações, Slides e Transições em HTML Puro
Na introdução desta incrível biblioteca e framework JavaScript demonstramos como criar um Slider com vários conteúdos de um jeito bem simples, fácil e rápido.
O LayerJS é uma solução completa para quem precisa criar páginas interativas e com recursos avançados de animação.
A ideia é que você possa trabalhar apenas com uma biblioteca JavaScript para desenvolver todos os elementos da página, inclusive menus e sliders.
Com um pouco mais de paciência é possível utilizar o LayerJS como um framework completo, deixando todas as animações por conta dele, o que irá deixar seus arquivos muito mais leves.
Criando sua primeira transição animada no LayerJS
No vídeo demonstramos como criar vários slides de conteúdo, mas este exemplo pode ser melhorado e até utilizado como base para outras ideias.
Este é o código do vídeo:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://keycdn.layerjs.org/libs/layerjs/layerjs-0.6.1.min.js"></script>
<link href="https://keycdn.layerjs.org/libs/layerjs/layerjs-0.6.1.css" type="text/css" rel="stylesheet" />
<style>
html, body { height: 100%; }
body { padding: 0; margin: 0; }
[lj-type="stage"] {
width: 100%;
max-width: 800px;
height: 400px;
margin: auto;
}
</style>
</head>
<body>
<div lj-type="stage">
<div lj-type="layer">
<div lj-type="frame" id="frame1">
Meu conteúdo vai aqui
</div>
<div lj-type="frame" id="frame2">
Seu conteúdo
</div>
<div lj-type="frame" id="frame3">
Frame 3 amigo Teker!
</div>
</div>
</div>
<a href="#frame1">Frame 1</a>
<a href="#frame2">Frame 2</a>
<a href="#frame3">Frame 3</a>
</body>
</html>Agora é com você, Teker! Não esqueça de conferir todos os dias nossos conteúdos e seguir o TekZoom nas redes sociais para receber nossas novidades em primeira mão.
Hostgator – Hospedagem Compartilhada Profissional
Na Hostgator você encontra planos e serviços para hospedar o seu projeto Web de forma profissional e com suporte local, em português, para tirar todas as suas dúvidas.
Todos os conteúdos do TekZoom podem ser hospedados na Hostgator em seus planos compartilhados ou em servidores Dedicados ou até mesmo em VPSs com recursos personalizados.
Os planos de hospedagem partem de R$7,19 e qualquer pessoa pode ter o seu projeto Web online publicado em minutos. Aproveite, tem PROMOÇÃO NO AR COM 50% DE DESCONTO.
Você também pode hospedar seu site WordPress na Hostagor. Planos a partir de R$9,90 mensais!
Clique aqui para saber mais e assinar um dos planos disponíveis na Hostgator. Pode assinar tranquilo, o TekZoom recomenda.
