Jump to content
  • 0

Производительность при вращении изображений HTML


msfive
 Share

Question

Всем привет.

Недавно столкнулся с задачей реализовать анимацию блока в HTML.

Блок должен растягиваться на весь экран и даже немного больше, чтобы при повороте не было видно краёв блока.

В блоке должно быть изображение, которое весит около 1.5 Мб и имеет разрешение приблизительно 2500х1800.

Я пробовал 2 способа.

1-й - размещал абсолютный блок 120х120 % и устанавливал background-size в cover.

Таким образом при анимации увеличения блока фоновое изображение растягивалось.

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

2-й - некрасивый. Вставлял изображение в img.

Но проблема не ушла, которая заключается в следующем.

В IE 9, как ни странно, всё работает здорово, т.е. анимация происходит плавно.

В остальных же браузерах анимация состоит порой всего из 2-х кадров, т.е. там всё здорово виснет.

Думаю, должно быть какое-то решение этой проблемы.

Если есть у кого-то какие-либо идеи или уже готовое что-то, прошу помочь.

Заранее всем спасибо.

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy