Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2023, 06:09
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Переписать анимацию из CSS в JS
Приветствую!
Написал анимацию для элементов в одном блоке.
Но на компьютерах со слабым процессором, анимация CSS загружает процессор на 100%.
Ходят слухи, что анимация на JS не такая прожорливая и меньше нагружает процессор.
Возможно, что анимацию нужно написать на другом языке, а не на JS.
На сайте используется PHP8, jQuery, JS, Bootstrap-5.

Вот код блока с анимацией:
<style>
@keyframes anima1{50% {transform:translateY(-5px) scale(1.05)}0% {transform:translateY(0) scale(1)}}
@keyframes anima2{25% {transform:translateY(-5px) scale(1.1) rotate(-5deg)}75% {transform:translateY(-5px) scale(1.1) rotate(5deg)}0% {transform:translateY(0) scale(1) rotate(0)}}
@keyframes anima3 {25% {transform:translateY(-5px)}75% {transform:translateY(5px)}0% {transform:translateY(0)}}
@keyframes anima4 {50% {margin-top:-5px}0% {margin-top:0}}
.sb-illustration-1 .sb-cirkle-1{animation:anima3 3s ease-in-out 1s infinite;}
.sb-illustration-1 .sb-cirkle-2{animation:anima1 2s ease-in-out 3s infinite;}
.sb-illustration-1 .sb-cirkle-3{animation:anima1 3s ease-in-out infinite;}
.sb-illustration-1 .sb-cirkle-4{animation:anima1 3s ease-in-out 4s infinite;}
.sb-illustration-1 .sb-cirkle-5{animation:anima3 3s ease-in-out 1.5s infinite;}
.sb-illustration-1 .sb-pik-1{animation:anima2 3s ease-in-out 2s infinite;}
.sb-illustration-1 .sb-pik-2{animation:anima2 3s ease-in-out 1s infinite;}
.sb-illustration-1 .sb-pik-3{animation:anima2 3s ease-in-out infinite;}
.sb-illustration-1 .sb-pik-4{animation:anima2 4s ease-in-out 3s infinite;}
</style>
<div class="col-lg-6">
	<div class="sb-illustration-1">
		<img class="sb-girl" src="/hands.webp">
		<div class="sb-cirkle-1"></div>
		<div class="sb-cirkle-2"></div>
		<div class="sb-cirkle-3"></div>
		<div class="sb-cirkle-4"></div>
		<div class="sb-cirkle-5"></div>
		<img class="sb-pik-1" src="/mms-icon.svg">
		<img class="sb-pik-2" src="/sms-icon.svg">
		<img class="sb-pik-3" src="/whatsapp-icon.svg">
        <img class="sb-pik-4" src="/phone-icon.png">
	</div>
</div>


Задание:
Переписать анимацию с языка CSS на другой язык, чтобы минимально нагружала процессор и была кроссбраузерная.
Если анимация на JS будет лучший выбор, то значить переписать анимацию на JS.

Предлагаю к оплате 500 руб., но исполнитель сам может предложить свою цену.
Оплата после выполнения задания на банковскую карту банка в РФ или на кошелек Юмани.

Ссылку на страницу HTML дам исполнителю, если нужно.

Последний раз редактировалось Vaska, 15.04.2023 в 09:27.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
События (js) и media запросы (css) TommyWork Events/DOM/Window 1 19.09.2017 19:26
Парсер css на js bio Общие вопросы Javascript 3 19.05.2014 13:18
Ищу jquery, js, html, css спеца. AlexBell Работа 41 23.11.2012 08:20
JS + CSS Под загрузка фонового изображения XboxPro Элементы интерфейса 0 14.11.2012 11:16
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44