Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.03.2021, 13:14
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

Эффект увеличения картинки
<div class="led2" style="background: black; width: 40px; height: 16px "></div>
<button class="show-image" type="button" id="clickGreen"></button>


Здравствуйте. Подскажите как сделать эффект увеличения div, а после этого уменьшения div при нажатии на button. Это должно выглядеть как будто блок- это пульсар, который при нажатии на button надулся, а после сдулся до своего первоначального размера.

Последний раз редактировалось sssema96, 14.03.2021 в 15:35.
Ответить с цитированием
  #2 (permalink)  
Старый 14.03.2021, 15:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sssema96,
https://developer.mozilla.org/en-US/...nction/scale()
Ответить с цитированием
  #3 (permalink)  
Старый 14.03.2021, 16:28
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

рони,
Спасибо, а как при этом сделать это увлечение анимированным?
Ответить с цитированием
  #4 (permalink)  
Старый 14.03.2021, 16:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sssema96,
https://developer.mozilla.org/en-US/...CSS/transition
Ответить с цитированием
  #5 (permalink)  
Старый 14.03.2021, 17:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sssema96,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .led2 {
            background-color: black;
            width: 40px;
            height: 16px;
            transition: 1s;
        }

        .active {
            transform: scale(2);
        }
    </style>
    <script>
        document.addEventListener("click", ({ target }) => {
            target = target.closest(".show-image");
            if (target) {
                document.querySelector(".led2").classList.toggle("active")
            }
        })
    </script>
</head>

<body>
    <div class="led2"></div>
    <button class="show-image" type="button" id="clickGreen">Click me</button>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 14.03.2021, 18:18
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

рони,
Спасибо, только хотелось что бы по клику кнопки блок увеличился с анимацией и назад вернулся в исходное состояние уже без клика по кнопке. И ещё замечена проблема что данный скрипт почему-то влияет на работу
.led2:hover

Последний раз редактировалось sssema96, 14.03.2021 в 18:25.
Ответить с цитированием
  #7 (permalink)  
Старый 14.03.2021, 18:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sssema96,
а про css почитать по ссылкам выше?
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .led2 {
            background-color: black;
            width: 40px;
            height: 16px;
            
        }

        .active {
           animation: 5s big;
        }
  @keyframes big {

    50% {
        transform: scale(3);
    }
}

    </style>
    <script>
        document.addEventListener("click", ({ target }) => {
            target = target.closest(".show-image");
            if (target) {
                let div = document.querySelector(".led2");
                div.classList.remove("active");
                document.documentElement.clientHeight;
                div.classList.add("active")
            }
        })
    </script>
</head>

<body>
    <div class="led2"></div>
    <button class="show-image" type="button" id="clickGreen">Click me</button>
</body>

</html>

Последний раз редактировалось рони, 14.03.2021 в 18:35.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Эффект живой картинки в слайдере на jQuery LLIypuk jQuery 3 30.03.2017 19:24
Эффект анимации для фоновой картинки в слайдере alexscus Общие вопросы Javascript 13 17.01.2017 11:56
Простейший просмотрщик картинки с подгрузкой оригинала и эффектом увеличения Ilya_Ru Элементы интерфейса 0 03.11.2016 13:08
Эффект увеличения всего сайта sss2019 Общие вопросы Javascript 6 03.11.2014 16:24
Эффект переворачивания картинки при наведении Tchort Элементы интерфейса 0 30.10.2011 14:47