Как сделать пульсирующий баннер

ForumXenforoArizonaSergey

Только чтение
Сообщения
23
Реакции
0
Баллы
298
Как сделать пульсирующий баннер в оранжевым цвете, синем и т.д
 
Вот так например: модифицированный пример, лайв-онлайн тест jsfiddle.net/p5yyyhce/14/embedded/result/

Код на всякий случай:
HTML:
<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Effects - Animate demo</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
      .toggler {
        width: 500px;
        height: 200px;
        position: relative;
      }

      #button {
        padding: .5em 1em;
        text-decoration: none;
      }

      #effect {
        width: 500px;
        height: 170px;
        padding: 0.4em;
        position: relative;
        background: #fff;
      }

      #effect h3 {
        margin: 0;
        padding: 0.4em;
        text-align: center;
      }

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(function() {
        $("#button").on("click", function() {
          setInterval(function() {
            var back = ["#ff0000", "blue", "gray"];
            var rand = back[Math.floor(Math.random() * back.length)];
            $("#effect").animate({
              backgroundColor: rand,
              color: "#fff",
            }, 1000);
          }, 1000);


        });
      });

    </script>
  </head>

  <body>

    <div class="toggler">
      <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Animate</h3>
        <p>
          Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
        </p>
      </div>
    </div>

    <button id="button" class="ui-state-default ui-corner-all">start</button>


  </body>

</html>
 
Последнее редактирование:
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу