Skip to content

Latest commit

 

History

History
80 lines (44 loc) · 2.48 KB

README.md

File metadata and controls

80 lines (44 loc) · 2.48 KB

3D ANIMATION CARD

Este projeto foi desenvolvido utilizando as ferramentas HTML5, CSS3 e Vanilla JavaScript.

Índice

Visão geral

O desafio

No desafio, eu deveria criar movimento no JavaScript, definindo as constantes, os eventos e as funções a fim de mover os elementos presentes no HTML e no CSS, e criar uma animação em 3D.

Screenshot

Página estática gerada com HTML e CSS:

Página com uma imagem de um tênis Adidas branco

Animação realizada a partir do JavaScript:

Página com uma imagem de um tênis Adidas branco em movimento circulares

Meu processo

Construído com

  • HTML5
  • CSS3
  • VANILLA-JAVASCRIPT

O que eu aprendi ...

Criar este projeto foi um exercício predominantemente de JavaScript, onde trabalhei conceitos importantes da linguagem, como constantes, eventos, funções e serviu para fixar melhor conceitos como a imutabilidade de uma const(ela não pode ser alterada ou retribuída).

Exemplos de comandos JS :

const card = document.querySelector('.card');
const sneaker = document.querySelector('.sneaker img');
description.style.transform = 'translateZ(150px)';

Desenvolvimento continuado

O JavaScript é uma ferramenta poderosa do Font-end, capaz de realizar grandes projetos, porém para isto ser possível, é necessário o domínio da linguagem e como ela é extremamente versátil, o seu aprendizado deve ser encarado como uma jornada de médio para longo prazo, e mesmo assim, poderá acontecer de você nunca dominar a ferramenta em sua totalidade.

Recursos úteis

  • JavaScript MDN-Doc. -A documentação disponível na página, é bem completa e ajuda com dúvidas mais pontuais.
  • Vídeo com tutorial - Último recurso, utilizado para testar e descobrir porque determinadas falhas ainda aconteciam.

Airton Lima Jr