Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2013, 16:58
Аспирант
Отправить личное сообщение для _axl Посмотреть профиль Найти все сообщения от _axl
 
Регистрация: 21.07.2009
Сообщений: 39

Анимация больших изображений
Пытаюсь сделать слайдер больших фотографий (примерно 1000х600пкс), через animate меняю свойство left. В Chrome все работает идеально, в Safari почти тоже, но в Фаере, Опере, ИЕ видны лаги. Что можно сделать, чтобы улучшить анимацию?

Что пробовал:
Делать картинки бекграундом у див и двигать див(интересно, что если див сделать по высоте 150пкс и скрыть overflow:hidden то лаги все равно есть).
Присваивать position: relative, absolute
Disaplay: inline-block
Добавил jquery.animate-enhanced который заменяет нативную jquery анимацию на css3 трансформации.
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2013, 17:15
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

многое зависит от железа, движка браузера
если это возможно, делай css анимации (говорят быстрее)
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2013, 17:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Вроде как cyber занимался этим вопросом, масштабируя карту,

2. Вроде решается через установку одной картинки background(оm) в несколько узких div, -в каждом последующим картинка сдвинута на ширину div
В Типичной большой картинке рендицо по строкам, в дивах же по столбцам

3. Канвас

Последний раз редактировалось Deff, 12.02.2013 в 17:52.
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2013, 17:49
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Deff, у меня проблема была не много в другом, у меня везде идеально работало кроме хрома, там был один баг, при одновременно использование двух css свойств оно тормозило(щас уже не вспомню каких), в итоге я использовал js анимацию получилось не идеально, но более менее..
_axl, выложить код может по копаюсь(если время будет).

П.с я давно нечего не писал на js, щас приходиться заниматься другим языком.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 12.02.2013 в 17:54.
Ответить с цитированием
  #5 (permalink)  
Старый 12.02.2013, 19:45
Аспирант
Отправить личное сообщение для _axl Посмотреть профиль Найти все сообщения от _axl
 
Регистрация: 21.07.2009
Сообщений: 39

Вроде получилось решить установкой jQuery.fx.interval=1 и ускорением анимации. В Опере правда вроде все равно чуть подтупливает, но посчитаю это компенсацией, за то, что обошолся без flash
Ответить с цитированием
  #6 (permalink)  
Старый 12.02.2013, 20:00
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

анимировать нормально этот тихий ужас вряд ли получится

попробуйте для начала проанимировать с использованием CSS3 Animations, при этом анимируя не свойство left, а свойство transform:translate(...)

анимации должны проигрываться с использованием графического ускорителя, что очень сильно влияет на плавность анимации (положительно).

сама картинка может стать размытой на момент перемещения.


Как другой вариант, можно использовать
Сообщение от Deff
3. Канвас
для сжатия изображения в более мелком разрешении, и анимировать уже его.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery-gp-gallery.js - разное отображение подгружаемых изображений frutality jQuery 1 09.09.2012 18:15
Повременная смена изображений jozev Элементы интерфейса 2 01.08.2011 18:43
Прокрутка изображений gen552 Элементы интерфейса 6 01.04.2011 13:11
Скролл мини изображений I-Trap Элементы интерфейса 1 25.11.2009 22:03
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20