CODEWITHSUNDEEP
javascripthtmlcssanimationinteractive
seasons986
seasons986

Reputation: 17

How to animate a webpage (HTML/JS) without losing scalability?

I'm trying to make my webpage more interactive by making a small town-like map, with different buildings that are clickable and lead to different pages on my site, but I'm having a lot of difficulty animating the webpage with just HTML/JS and also making it stay the same even after resizing the window.

This is my test site right now, for clarity: https://people.ucsc.edu/~anlin/test# (I am currently just switching between a png of the map and a gif of the buildings moving when the mouse is hovering)

How can I accomplish this, and should I be using something other than plain html/js to do this?

Thanks!

Upvotes: 0

Views: 61

Answers (2)

JGallardo
JGallardo

Reputation: 11373

You can use an <svg> , which is a "scalable vector graphic"

Here is almost an exact example of what you described

enter image description here

https://codepen.io/dudleystorey/pen/ltpmv

Upvotes: 0

Orlandster
Orlandster

Reputation: 4858

Probably svg would help you out. You can do awesome interactive stuff with svg. Meanwhile, you can also use css to create great animations. It really depends on what you need.

Check this out: https://medium.freecodecamp.org/a-guide-to-svg-on-web-c5932dadca03

Some examples: https://codepen.io/search/pens/?q=svg%20animations&limit=all&order=popularity&depth=everything&show_forks=false

Upvotes: 1

Related Questions