Начинающему программисту может показаться сложным анимировать элементы на веб-странице, но на самом деле это проще, чем вы думаете! Ниже я приведу два метода, с которыми я столкнулся, работая над забавным аркадным проектом в рамках Coding Bootcamp Колумбийского университета. Благодаря им ваша страница переместится в мгновение ока!
Если вы не решаетесь написать собственную анимацию с нуля только с помощью CSS или JavaScript, Animate.css — отличная библиотека, которую можно использовать вместо этого. У них есть хороший выбор анимаций на выбор, и добавить их так же просто, как ввести CDN на свой сайт и добавить классы к вашему элементу. Вот пример страницы, на которой с помощью Animate оживили наш Magic 8 Ball:
https://sefenydiaz.github.io/test-arcade/magic8page.html
Импортированная ссылка CDN:
Затем на самом элементе мы добавили соответствующие классы. В нашем случае я использовал прослушиватель событий Javascript для вызова функции, которая затем добавляла их для анимации элемента:
В этом случае мы хотели сделать анимацию повторяемой, чтобы пользователь мог снова щелкнуть по волшебному шару с цифрой 8, чтобы получить анимацию, поэтому мы просто добавили в скрипт раздел для прослушивания окончания анимации. При повторном щелчке функция будет вызываться снова, добавляя классы обратно и вызывая анимацию еще раз. Простой!
2. Анимация CSS (с некоторой помощью Javascript)
Если вы не хотите использовать предварительно созданную библиотеку, CSS содержит встроенные свойства, которые могут помочь анимировать вашу страницу, усиленную небольшим количеством простого Javascript. Мы использовали полезный учебник с Youtube здесь, чтобы создать свою собственную версию игры Google с ошибкой 404 Dino Jump. Я настоятельно рекомендую просмотреть видео полностью, чтобы понять все компоненты, но главное, на что следует обратить внимание, — это ключевые кадры, которые могут указывать элементу перемещаться на определенное расстояние по странице:
Мы также использовали комбинацию CSS и Javascript один-два удара, чтобы воссоздать игру в понг, которая была щедро объяснена в другом учебнике на Youtube от Web Dev Simplified. Для этого требовалось запрограммировать компьютерного противника, чтобы он следовал за движущимся мячом, а также прослушивал ввод мыши пользователя по оси Y на странице, чтобы определить местоположение ракетки игрока. Я также настоятельно рекомендую просмотреть это видео полностью, чтобы понять все компоненты, поскольку оно немного сложнее с точки зрения Javascript, чем наши предыдущие анимации, но дало отличную интерактивную игру.
Вот оно! Анимация рядом! До этого проекта мы не анимировали никаких элементов в нашей работе, поэтому, если мы смогли это сделать, то и вы, безусловно, сможете. Удачной анимации!
