Любые советы для хороших руководств или дискуссий по анимации веб-страниц? [закрыто]

Простой эффект, который мне в конечном итоге нужен, таков:

  • загрузить изображение в центр веб-страницы
  • сделать так, чтобы изображение скользило влево
  • затем начните загружать другой текст и изображения вокруг него

Меня не волнует, сколько отдельных веб-страниц потребуется для этого или сколько отдельных изображений, но я хотел бы знать, какие у меня есть варианты. Я больше программист, чем графический дизайнер, поэтому, возможно, я ищу, используя неправильные технические термины. Может быть, «анимация» — слишком громкий термин для такого простого эффекта, но «слайд» имеет в этом контексте другие значения, и между этими двумя вещами я изо всех сил пытаюсь найти четкий путь к четкому ответу. В конечном итоге я хотел бы понять такие вещи, как:

  • Можно ли выполнить указанную выше задачу с одним изображением на одной странице в формате HTML без использования скриптов?
  • Поддерживает ли HTML только «статические» элементы, которые появляются на экране и никогда не меняют своего положения? Если это так, то опирается ли вся анимация либо на наличие (статических) элементов с динамическим содержимым, либо на многократно загружаемые/визуализируемые статические элементы, создающие видимость движения?
  • Насколько широко браузеры поддерживают различные варианты анимации?

Итак, как предполагает исходный вопрос, возможно, учебник был бы хорош. Я тоже пока не нашел достойного!

Я не понимаю, как это вопрос графического дизайна, когда вы ищете решение для кодирования (Ну, есть вспышка.... но...). Я проголосовал, чтобы закрыть это.

Ответы (2)

Для решения «чистого HTML» вам нужно взглянуть на анимацию CSS3: http://www.w3schools.com/css3/css3_animations.asp

Однако, если вы ищете кроссбраузерную совместимость, это не тот путь. Как вы можете видеть на этой странице, IE еще не поддерживает это.

Я бы использовал javascript для более удобного кросс-браузерного решения. Хорошей библиотекой для использования может быть jqueryui: http://jqueryui.com

IE10 на самом деле поддерживает совсем немного. msdn.microsoft.com/en-us/library/ie/hh673530(v=vs.85).aspx Самое замечательное в CSS-анимации то, что она изящно деградирует и может быть ускорена с помощью графического процессора (в отличие от jQuery). Но я согласен, если вы хотите поддерживать все, CSS может быть не лучшим вариантом.
Сколько людей отключили javascript из-за угрозы безопасности? Есть ли меньшее из зол?
@omatai Вы можете использовать: css3, jquery (или другую библиотеку javascript) или flash. У всех есть какая-то слабость. CSS3 = нет кросс-браузерной поддержки (и нет функции щелчка, или в любом случае есть хорошая поддержка браузера). jQuery (и js в целом) = это кросс-браузерный метод. Насколько я знаю, процент людей, отключивших js, довольно низок. Не говоря уже о том, что вы можете написать js так, чтобы, если у человека он отключен, он возвращался к более простому интерфейсу/функциональности. flash = довольно тяжелый, хорошая поддержка браузеров, за исключением некоторых планшетов, а именно ios.
Хорошим примером плагина jquery, который имеет хороший запасной вариант, является Lightbox. Обычно вы получаете модальное окно, которое выдвигается на место и имеет удобную навигацию и т. д. и т. д. Если javascript отключен, вы все равно можете щелкать ссылки на изображения, которые открываются, как любые обычные html-ссылки на изображения.
@Joonas Что вы подразумеваете под «функцией без щелчка»?
@MarcEdwards Я имел в виду псевдокласс, который что-то делает при нажатии на элемент. Хотя я полагаю, что если вы используете анимацию css3, вы могли бы также использовать :target...
Итак... Да, полностью игнорируйте то, что я говорю, что css3 не имеет функции щелчка. :)
Если вы собираетесь пойти по пути анимации CSS3, Adobe Edge Animate может помочь вам в создании этих анимаций, и это бесплатно! И это идет со встроенными обучающими программами!

Чтобы конкретно охватить эти моменты:

Можно ли выполнить указанную выше задачу с одним изображением на одной странице в формате HTML без использования скриптов?

Вы могли бы просто подделать его с помощью одного большого анимированного GIF-файла, встроенного в страницу HTML, но это не было бы элегантным решением. Это действительно нуждается в сценариях и CSS.

Поддерживает ли HTML только «статические» элементы, которые появляются на экране и никогда не меняют своего положения?

Строго говоря, да. Однако HTML-страница может также включать встроенный код CSS и Javascript, который может добавлять анимацию; было бы более распространенным иметь большую часть CSS и Javscript в отдельных файлах.

Если это так, то опирается ли вся анимация либо на наличие (статических) элементов с динамическим содержимым, либо на многократно загружаемые/визуализируемые статические элементы, создающие видимость движения?

Больше статических элементов (содержащих изображения, блоки текста или пустых для начала) с движением или их содержимым, загружаемым скриптами.

Но я бы определенно предложил использовать HTML + CSS для статического позиционирования элементов, прежде чем рассматривать какие-либо сценарии или анимацию.

Любые советы для хороших руководств или дискуссий по анимации веб-страниц? [закрыто]
СпросиСетьПолитика конфиденциальности1y, 0v