Как я могу создавать интерактивные анимации без Flash? [закрыто]

Я считаю, что все это можно сделать с помощью анимации SVG SMIL. Непосредственным недостатком этого является то, что в настоящее время он не поддерживается ни одной версией Internet Explorer, поэтому это довольно непрактичное решение. ^[1]

Вот базовый пример вращающегося изображения SVG (позаимствовано из Википедии ):

Эффекты при наведении курсора можно добавить с помощью JavaScript.

В зависимости от того, какие браузеры вам нужно поддерживать, вы можете использовать css3. Небольшой образец http://jsfiddle.net/4Vz63/1/ Я только что погуглил «непрерывное вращение css3». Возможно, вы можете использовать 2 разных анимированных GIF-файла для каждой шестерни и использовать их для фона небольших элементов? Таким образом, вы можете управлять событиями moseover и mouseout (используйте светлее для одного и темнее для другого). Возможно, вам придется использовать js для управления остальными элементами — строками и текстовыми элементами.

Звучит как что-то, что вы могли бы сделать между несколькими изображениями, гифками для любой из вращающихся шестеренок и css. Как не анимация css3, а старый код, который работает во всех браузерах.

Самый простой способ — использовать javascript или jquery, но для этого вам нужно понимать javascript.

Что касается вашего другого вопроса с примером jfiddle, попробуйте добавить:

onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity=20"

к тегу div.

Если эта библиотека raphael недоступна, вы все равно можете использовать этот метод, например, с анимированным gif:

Поместите гифку на страницу, а затем наложите элементы div с большим радиусом закругления, чтобы создать круглые полупрозрачные области, расположенные поверх гифки, а затем всплывающий текст в виде отдельного скрытого элемента div, возможно, с отрицательными абсолютными координатами. Когда вы наводите указатель мыши на определенный div, вы уменьшаете непрозрачность, а затем перемещаете правильное текстовое поле и устанавливаете видимость текстового div на «видимый».

Хотя это может упростить ситуацию, если GIF представляет собой один элемент, вероятно, будет более консервативно для пропускной способности размещать каждую шестеренку по отдельности. В этом случае вы помещаете каждый gif в div и регулируете непрозрачность с помощью наведения.

Также обратите внимание, что для отдельной шестерни вам не нужно анимировать полное вращение на 360%: для вращения по часовой стрелке вам нужно анимировать только так, чтобы зуб слева от зубца на 12 часов попал на 12 часов. часовая позиция.

Лично мне нравится ощущение анимации на стороне клиента, но следите за проблемами с поддержкой браузера и особенно с процессорным временем обработки. Это основная навигация или, по крайней мере, посадочный возраст, поэтому протестируйте ее на более старом компьютере.