• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 333
  • Last Modified:

Html5 animation

Hi,
I attached in my sample model image..How to create a animation in html5 this model..?.
Please anybody help, and send step by step guide..?

card.jpg
0
codeoxygen
Asked:
codeoxygen
1 Solution
 
NrisimhaCommented:

Well, you have to explain better your question - do you want to have a video in your web page or as is on the JPG image applied rollover effect.

For video in HTML 5 you have next code:

<body>
<video class="rimg" controls="true" width="720" height="576" autoplay="true">
  <source src="yourvideo.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
</body>

Of course it is for video with MP4 extension. You have to put width and height of your own video because my values width="720" height="576" are for one of my video.

And this video have a name yourvideo.mp4. But, you can choose another name and rename to cards.mp4 or something else.

The command autoplay="true" enable that video will start immediately when your web page will be  shown in an browser. If you want to start it manually you can set autoplay="false".

And finally command controls="true" means that your video will be shown in player with buttons for start, pause, volume etc.

But, if you want to have a rollover than you have to put two images that you want to show.

regards

Nrisimha
0
 
ZadoCommented:
If you think about some interactivity, you need to use html5 transitions and animations, here's very interesting article:
http://css3.bradshawenterprises.com/

You may read this as well: http://www.html5rocks.com/en/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now