анимированное меню: использовать холст или javascript?

Question

анимированное меню: использовать холст или javascript?

0

Я должен анимировать ссылки в главном меню (О нас, контакты и т.д.), Которые имеют определенную графику (я использую привязку с классом фонового изображения). Мне интересно, если canvas - лучший способ анимировать определенный div (мое меню). Я просто хочу переместить его на 100 пикселей вверх/вниз после нажатия. Например: я нажимаю "Проекты", мой якорь (с моим изображением) перемещается на 100 пикселей вниз. Когда я нажимаю "О нас", ссылка "Проекты" перемещается вверх (в исходной позиции), а "О нас" перемещается вниз на 100 пикселей.

Правильно ли это холст? Я также мог использовать css3 переходы/анимацию, но IE9 не поддерживается. Я хочу, чтобы IE9 мог правильно отображать мой сайт.

Должен ли я использовать холст или какой-то javascript-плагин для этого? (Я мог бы также использовать простой javascript с относительным/абсолютным позиционированием, который меняет верхние пиксели, но мне не нравится результат). То, что я использовал с простым javascript, было следующим:

Мое меню:

 <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>

Мой CSS:

 a.projects 
 {
     width: 184px;
     height: 32px;
     background: url('css-images/projects.png') no-repeat;
         position: absolute;
 }
#menu
{
    position:relative;
}

Мой 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);
         }
     }
 }

Harmonia 07 окт. 2013, в 13:16

Источник

1

какие браузеры вы действительно хотите поддерживать? Если поддержка IE не так важна, вы можете использовать анимацию CSS3, поскольку она будет более плавной, чем изменение значений верхнего пикселя CSS.
Abhidev 07 окт. 2013, в 10:25
0

эй, вы можете использовать css3 на вашем сайте, перейдите по этой ссылке tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html
I am L 07 окт. 2013, в 10:30

Теги:

javascript

html

css

html5

canvas

2 ответа

0

Heres Пример о том, как это сделать

Javascript:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
    //BOX 1
    $('#b1').click(function(){
        $('#box1').animate(
        {
            height:'300px'
        });

        $('#box2').animate(
        {
            height:'10px'
        });

        $('#box3').animate(
        {
            height:'10px'
        });

    });

    //BOX 2
    $('#b2').click(function(){
        $('#box1').animate(
        {
            height:'10px'
        });

        $('#box2').animate(
        {
            height:'300px'
        });

        $('#box3').animate(
        {
            height:'10px'
        });

    });

    //BOX 3
    $('#b3').click(function(){
        $('#box1').animate(
        {
            height:'10px'
        });

        $('#box2').animate(
        {
            height:'10px'
        });

        $('#box3').animate(
        {
            height:'300px'
        });

    });


});

</script>

CSS:

    <style>
#box1 {
height:10px;
width:25%;
background-color:red;
float:left;
margin-right:2%;    
}

#box2 {
    height:10px;
width:25%;
background-color:green;
margin-right:2%;
float:left;
}

#box3 {
    height:10px;
width:25%;
background-color:blue;
margin-right:2%;
float:left;
}
</style>

HTML:

<a href="#"id="b1"><div id="box1"></div></a>
<a href="#" id="b2"><div id="box2"></div></a>
<a href="#" id="b3"><div id="box3"></div></a>

Dev_x7xClownx7x 07 окт. 2013, в 16:48

Ещё вопросы

какие браузеры вы действительно хотите поддерживать? Если поддержка IE не так важна, вы можете использовать анимацию CSS3, поскольку она будет более плавной, чем изменение значений верхнего пикселя CSS.
эй, вы можете использовать css3 на вашем сайте, перейдите по этой ссылке tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html

Ryan Williams · Accepted Answer · 2013-10-07T08-35-00.000Z

Перейдите с помощью функции jQuery animate() если требуется поддержка широкого браузера. Если нет, используйте переходы CSS3.

Если вас не волнует, как именно ваши анимации выглядят так долго, как они примерно эквивалентны, вы можете использовать Modernizr для доставки анимаций CSS3 в браузеры, которые их поддерживают, и анимацию jQuery для тех, кто этого не делает.

Не стоит ничего, что функция jQuery animate() могла изначально предоставлять анимации CSS3 для подходящих браузеров, но разработчики jQuery еще не реализовали это. Вероятно, это связано с тем, что браузеры все еще реализуют переходы CSS3 с разной степенью успеха, тогда как jQuery ориентирован на то, чтобы поддерживать согласованность.

Холст на самом деле не подходит для использования ИМО из-за его абстракции от ваших семантических элементов.

Спасибо, я использовал анимацию. Я этого не знал.