I must animate my main menu links ( About us, contact, etc) which have specific graphics (I am using anchor with a background image class). I'm wondering if canvas is the best way to animate a specific div (my menu). I just want to move it 100px upward/downwards after being clicked. For example: I click "Projects", my anchor (with my image) is moved 100 pixels down. When I click "About Us", the "Projects" link is moved up (at it's original position), and "About us" is moved down 100px.
Is canvas the right way to do it? I could also use css3 transitions/animate but IE9 is not supported. I want IE9 to be able to render my site correctly.
Shall I use canvas or some kind of javascript plugin for this? ( I could also use plain javascript with relative/absolute positioning that keeps changing top pixels, but I don't like the result of it). What I used with plain javascript was this:
My menu:
<div id="menu">
<ul class="nav">
<li><a href="#" class="projects" id="projects" onclick="move()"></a>
</li>
<li><a href="#" class="aboutus"></a>
</li>
<li><a href="#" class="contact"></a>
</li>
</ul>
My CSS:
a.projects
{
width: 184px;
height: 32px;
background: url('css-images/projects.png') no-repeat;
position: absolute;
}
#menu
{
position:relative;
}
My javascript:
function move(){
var proj = document.getElementById("projects");
var count = 0;
var id = setInterval(loop, 30);
function loop(){
proj.style.top = count + "px";
var max = 100;
count+=10;
if(count >= max){
clearInterval(id);
}
}
}
Go with jQuery's animate() function if broad browser support is required. If not, use CSS3 transitions.
If you're not concerned about how exactly your animations look so long as they're roughly equivalent, you could leverage Modernizr to deliver CSS3 animations to browsers that support them and jQuery animations to those that don't.
It's worth nothing that jQuery's animate() function could natively deliver CSS3 animations to eligible browsers, but jQuery's developers haven't yet implemented this. This is likely because browsers still implement CSS3 transitions with varying degrees of success, whereas jQuery is geared towards keeping things consistent.
Canvas isn't really appropriate for the use case IMO due to its abstraction from your semantic elements.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments