私のスクリプトは理由がないと思われる値を変更します

私は、マウスの座標にバブルを発生させるスクリプトを作成しています。これは、いくつかの理由のために、気泡の一部が右側に配置されていない、などのランダムな不透明度のようないくつかのことを算出し、非常に基本的なスクリプト、ランダムな大きさ、今私のスクリプトは理由がないと思われる値を変更します

var transform = (function() { // This piece is to test whether transform should be prefixed or not 
 
    var testEl = document.createElement('div') 
 
    if (testEl.style.transform == null) { 
 
    var vendors = ['Webkit', 'Moz', 'ms'] 
 
    for (var vendor in vendors) { 
 
     if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { 
 
     return vendors[vendor] + 'Transform' 
 
     } 
 
    } 
 
    } 
 
    return 'transform' 
 
})() 
 

 
var bubbles = {} 
 
bubbles.chance = 0.08 // Chance for a bubble to spawn at mousemove 
 
bubbles.delay = 50  // Should minimally be 10, otherwise the circles can't transition from small to big 
 
bubbles.duration = 800 
 
bubbles.minScale = 0.2 // The scale of the bubbles will be anywhere between 0.2 and 1 of the default size defined by the CSS 
 
bubbles.minOpacity = 0.4 
 
bubbles.maxOpacity = 0.7 
 

 
document.getElementById('bubbles').addEventListener('mousemove', function (e) { 
 
    if (Math.random() < bubbles.chance) { 
 
    var $el = document.createElement('div') 
 
    var size = Math.random() * (1 - bubbles.minScale) + bubbles.minScale 
 
    var transition = Math.round(bubbles.duration * 0.9) 
 

 
    $el.style.transition = transition + 'ms ease-in-out' 
 
    $el.style.top = e.offsetY + 'px' // Seems to undergo a modulo for some periods of time 
 
    $el.style.left = e.offsetX + 'px' // This one too 
 
    $el.style[transform] = 'translate(-50%, -50%) scale(0)' 
 
    $el.style.opacity = Math.random() * (bubbles.maxOpacity - bubbles.minOpacity) + bubbles.minOpacity 
 

 
    window.setTimeout(function() { 
 
     $el.style[transform] = 'translate(-50%, -50%) scale(' + size + ')' 
 
     window.setTimeout(function() { 
 
     $el.style[transform] = 'translate(-50%, -50%) scale(0)' 
 
     window.setTimeout(function() { 
 
      $el.parentNode.removeChild($el) 
 
     }, transition) 
 
     }, transition + bubbles.duration) 
 
    }, bubbles.delay) 
 

 
    document.getElementById('bubbles').appendChild($el) 
 
    } 
 
})

html, body{height:100%}body{margin:0;background-color:#17C} 
 

 
#bubbles{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
#bubbles > div{ 
 
    position: absolute; 
 
    width: 12vw; 
 
    height: 12vw; 
 
    border-radius: 50%; 
 
    background-color: #FFF; 
 
}

<div id="bubbles"></div>

です座標。スクリプトは文字通り、新しいバブルを生成するたびにe.offsetXとe.offsetYを取ることになっていますが、値にモジュロを適用するように見えることがあります。

私はモジュロのいくつかの種類が適用されると考えている理由は、水平線で移動するだけで、すべての移動した泡も水平線を形成するためです。垂直についても同じです。

スクリプトはバニラのJavaScriptで、エラーが発生しているようだ作品はここにある：また、注意すべき

$el.style.top = e.offsetY + 'px' 
$el.style.left = e.offsetX + 'px'

一つ奇妙なことに、変位がちょうど一度に一つのバブルのために発生していないということですしかし、短時間内にすべての気泡について。

バグはすべての主要なブラウザで発生します。

すべての入力が高く評価されています。

出典

2016-09-16 Gust van de Wal

なぜそれが起こっているのか分かります。青い背景の代わりにバブルの上にマウスを移動した場合、バブルはoffsetXとYの参照として使用されます。フルページアプリの場合は、代わりにe.clientXとe.clientYを使用できます。それ以外の場合は、イベントが発生した場合にのみ#bubblesにリッスンする必要があります。

出典

2016-09-16 17:56:36

良い観測... – Rayon

「ポインタイベント：なし;」をバブルに追加することがトリックでした！ –

@Josephまさに私がCodePenを入れた後にタイプしようとしていたことです – Illdapt