Эффект сканера радара с использованием jquery

304
15 апреля 2017, 23:13

Я пытаюсь найти возможное решение, как создать эффект сканера радара, используя jquery и css.

По существу, полупрозрачный треугольник будет вращаться вокруг средней точки div.
Это возможно с jquery или я должен прибегнуть к другим средствам?
Я предпочитаю не использовать анимированные gif-файлы.

Answer 1

$(function() { 
 
  var $rad = $('#rad'), 
      $obj = $('.obj'), 
      deg = 0, 
      rad = $rad.width() / 2; 
 
  $obj.each(function(){ 
    var pos = $(this).data(), 
        getAtan = Math.atan2(pos.x-rad, pos.y-rad), 
        getDeg = (-getAtan/(Math.PI/180) + 180) | 0; 
    // Read/set positions and store degree 
    $(this).css({left:pos.x, top:pos.y}).attr('data-atDeg', getDeg); 
  }); 
 
  (function rotate() {       
    $rad.css({transform: 'rotate('+ deg +'deg)'}); // Radar rotation 
    $('[data-atDeg='+deg+']').stop().fadeTo(0,1).fadeTo(1700,0.2); // Animate dot at deg 
 
    deg = ++deg % 360;      // Increment and reset to 0 at 360 
    setTimeout(rotate, 25); // LOOP 
  })(); 
 
});
#radar{ 
  position:relative; 
  overflow:hidden; 
  width:321px; height:321px; 
  background:#222 url(http://i.stack.imgur.com/vY6Tl.png); 
  border-radius: 50%; 
} 
#rad{ 
  position:absolute; 
  width:321px; 
  height:321px; background:url(http://i.stack.imgur.com/fbgUD.png); 
} 
.obj{ 
  background:#cf5; 
  position:absolute; 
  border-radius: 50%; 
  width:4px; height:4px; margin:-2px; 
  box-shadow:0 0 10px 5px rgba(100,255,0,0.5); 
  opacity:0.2; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="radar"> 
    <div id="rad"></div> 
    <div class="obj" data-x="120" data-y="65"></div> 
    <div class="obj" data-x="140" data-y="185"></div> 
    <div class="obj" data-x="220" data-y="35"></div> 
    <div class="obj" data-x="120" data-y="235"></div> 
  </div>

Основной ротационный контур:

HTML:

<div id="radar">
    <div id="rad"></div>
</div>    

CSS:

#radar{
  position:relative;
  width:321px;
  height:321px;
  background:#222 url(http://i.stack.imgur.com/vY6Tl.png);
  border-radius:320px;
}
#rad{
  position:absolute;
  width:321px;
  height:321px; background:url(http://i.stack.imgur.com/fbgUD.png);
}    

jQuery:

$(function() {
    var $rad = $('#rad'),
        d = 0;
    (function rotate() {    
        $rad.css({ transform: 'rotate('+ d +'deg)'}); // apply CSS3
        setTimeout(function() {
            ++d;         // next degree
            rotate();    // recall function
        }, 25);          // every 25ms
    })();                // 1st start
});   

Перевод ответа: Radar scanner effect using jquery @Roko C. Buljan

READ ALSO
Оставить hover у ссылки по которой открыли под-меню

Оставить hover у ссылки по которой открыли под-меню

ЗдравствуйтеЕсть меню, в нем ссылки

215
Загрузка css-файла в кэш

Загрузка css-файла в кэш

Сделал сайт с помощью bootstrapНа компьютере все работает идеально

179
spree footer image path ошибка

spree footer image path ошибка

Добрый деньНачал использовать spree,к горю или к сожалению

177
Как создать эффект пульсации при клике - `Material Design`

Как создать эффект пульсации при клике - `Material Design`

Я новичок в CSS-анимации, и стараюсь в течение последних часов, чтобы анимация заработалаПытаюсь понять код Material Design, но пока не могу заставить...

314