Блог

Я хотел бы создать движущиеся разделы на веб-странице — другими словами, области содержимого (с текстом, изображениями и другим произвольным контентом), которые перемещаются по странице при нажатии кнопки.

Каждый DIV должен перемещаться на определенное количество пикселей, а затем на определенное количество пикселей.

Будет несколько DIVS, которые должны перемещаться независимо друг от друга и иметь определенный z-порядок (т. Е. «Более высокие» DIVs смогут перемещаться «поверх» «более низких» DIVs, закрывая их).

Я читал о том, как сделать это в jQuery с помощью функции «анимировать», но это, по-видимому, медленно и может использовать много процессора, поскольку приводит к частому повторному рендерингу страницы.

Кто-нибудь знает какие-либо другие способы сделать это, например, HTML5 или какие-либо новые захватывающие технологии? Может быть, чистый JavaScript? 🙂

Спасибо за ваш совет!

Луиза

собирался предложить .animate, но вы говорите, что это медленно. Интересно, где ты это взял? Возможно, это было несколько крупных выпусков назад, особенно для IE, но я давно не видел проблемы. Я предлагаю, попробуйте сами.

Вы могли бы использовать переходы css3. Но они работают только в современных браузерах.
Но перемещение пары divs с помощью jquery не должно вызывать проблем с точки зрения производительности.

Это обязательно должны быть теги? Если вы сильно полагаетесь на анимацию, вам следует внимательнее присмотреться к canvas, который является частью HTML5

Поскольку анимация происходит на стороне клиента, то независимо от того, какое решение вы выберете, оно будет зависеть от возможностей обработки клиента. Я не знаю ни о каких функциях CSS и / или HTML5, которые делают это (Энди упоминает CSS3), но это ограничит вас только современными браузерами.

Я думаю, что наиболее широким выбором будет JavaScript. Вы можете либо создать свой собственный, либо использовать jQuery (или какой-либо другой фреймворк JavaScript). Команда jQuery очень усердно работает над оптимизацией своего кода, поэтому я подозреваю, что вы, вероятно, не получите большого улучшения, запустив свой собственный.

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

Извините, я не могу дать однозначный ответ «да / нет», «это то, что вы должны сделать», но я надеюсь, что это даст вам некоторую информацию.

В общем, я заметил, что переходы / преобразования с использованием css3 более плавные, чем при использовании jquery .animate. Это не значит, что .animate не подходит для большинства ситуаций.

Вы можете создать все это только с помощью CSS3, если используете анимацию ключевых кадров, как в http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations /

Но большинство браузеров этого не поддерживают. Поэтому я бы предложил своего рода компромисс, если вы должны использовать методы css3. Технически вы можете выполнить следующее:

1) создайте три css-класса с тремя разными позициями для вашего div (начало, промежуточное и конечное), используя позиционирование abs и различные значения left amp; top.

2) добавьте transition: top 3s linear, left 3s linear; или что угодно в div для начала, в первом классе с остальными свойствами для внешнего вида.

3) используйте javascript для динамического добавления второго класса, чтобы он переходил ко второму набору координат

4) используйте js, чтобы отслеживать, когда координаты равны второму состоянию, а затем добавьте третий класс, переводя его в третью позицию. Или просто используйте таймер для добавления третьего класса.

Вам нужно будет внести некоторые изменения в css, чтобы убедиться, что последний примененный класс переопределяет все остальное. Чтобы убедиться, что вы правильно определили специфику, вы можете написать классы как base {}, base.second {} and .base.second.third {} или что-то в этом роде (там нет каламбура …)

Даже в этом случае его будут поддерживать только более новые версии большинства браузеров, что означает, что большая часть вашей аудитории его не получит. Попробуйте jquery, вы можете быть удивлены.