Skip to content

airtonlimajr/animationcard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Animation card project, developed in HTML5 ,CSS3 and Vanilla JavaScript.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published