Задать вопрос
@SeRGaN_87
javascript

Как создать скрипт, изменяющий scale?

Доброго времени суток, пытаюсь сделать сайт-открытку с поздравлениями, в него будет входить множество анимаций, как например плавное увеличение и уменьшение облаков, вращение солнца изменение заднего фона ...
Вопрос: Как сделать скрипт, меняющий свойство scale, на 1/2 (на половину) от текущего значения каждого из облачков (у класса cloud разный скейл), что бы добиться плавной анимации увеличения и уменьшения этих самых облачков, спасибо !!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style-index.css">
    <title>Happy Birth Day!!!</title>
</head>
<body>
    <section class="main-block">
        <div class="main-block--elemets">
            <div class="sun">
                <img src="img/icons/sun.png" alt="">
            </div>
           <div class="clouds">
                <div class="cloud"><img src="img/icons/cloud-2.png" alt=""></div>
                <div class="cloud"><img src="img/icons/cloud-2.png" alt=""></div>
                <div class="cloud"><img src="img/icons/cloud-2.png" alt=""></div>
                <div class="cloud"><img src="img/icons/cloud-2.png" alt=""></div>
                <div class="cloud"><img src="img/icons/cloud-2.png" alt=""></div>
                <div class="cloud"><img src="img/icons/cloud-1.png" alt=""></div>
                <div class="cloud"><img src="img/icons/cloud-1.png" alt=""></div>
                <div class="cloud"><img src="img/icons/cloud-1.png" alt=""></div>
           </div>
        </div>
    </section>
    <script>
        document.querySelector(".sun").classList.add("active");
        document.querySelector(".clouds").classList.add("active");
    </script>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: aqua;
}

.main-block {
    background: 
        radial-gradient(circle at 0 0,  orange, transparent 60% ),
        linear-gradient(rgb(111, 179, 243) 85%, rgb(15, 15, 15));
}
.main-block--elemets {
    width: 100%;
    height: 120vh;
}
.sun {
    position: absolute;
    top: -40px;
    left: -40px;
    scale: 2;
}
.sun img {
    width: 100%;
    height: 100%;
    animation: rotation 6s linear 0.5s infinite ;
}
.active img {
    transform: rotate(360deg);
}
@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
  
.clouds {
    position: relative;
}
.cloud {
    position: absolute;
    transition: 1s ease-out 0.5s;
}
.clouds :nth-child(1) {
    top: 90px;
    right: 20px;
}
.active :nth-child(1) {
    right: -60px;
}

.clouds :nth-child(2) {
    top: 180px;
    left: 28px;
    scale: 2;
    z-index: 2;
}
.active :nth-child(2) {
    left: -90px;
}
.clouds :nth-child(3) {
    top: 380px;
    left: 20px;
    scale: 1.5;
    z-index: 2;
}
.active :nth-child(3) {
    left: -90px;
}
.clouds :nth-child(4) {
    top: 250px;
    right: 80px;
    scale: 3;
    opacity: .7;
}
.active :nth-child(4) {
    opacity: .3;
}
.clouds :nth-child(5) {
    top: 520px;
    left: 120px;
    scale: 3;
    opacity: .7;
}
.active :nth-child(5) {
    opacity: .3;
}
.clouds :nth-child(6) {
    top: 440px;
    right: 20px;
    scale: 1.5;
}
.active :nth-child(6) {
    right: -60px;
}
.clouds :nth-child(7) {
    top: 700px;
    right: 20px;
    scale: 2;
}
.active :nth-child(7) {
    right: -60px;
}
.clouds :nth-child(8) {
    top: 670px;
    left: 20px;
    scale: 3;
}
.active :nth-child(8) {
    left: -80px;
}
  • Вопрос задан
  • 62 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
RAX7
@RAX7
Вынеси значение scale в переменную:
.clouds:nth-child(2) {
    --scale: 2;
    top: 180px;
    left: 28px;
    z-index: 2;
}

.cloud {
    animation: scale 3s infinite alternate;
}

@keyframes scale {
    from {
      transform: scale(var(--scale));
    }
    to {
      transform: scale(calc(var(--scale) / 2));
    }
}


P.S. не использую раздельные свойства для трансформаций, они еще плохо поддерживаются https://caniuse.com/mdn-css_properties_scale
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Починить плагин по расчету стоимости доставки для сайта
07 февр. 2025, в 09:32
1500 руб./за проект
Разработка Телеграм Бота
07 февр. 2025, в 09:19
200000 руб./за проект
WebApp для деловых-знакомств в Telegram
07 февр. 2025, в 07:05
100000 руб./за проект
Ещё заказы