2017-06-05 9 views
-2

これらのパーティクルを画面の下部で停止したり、スクリーンの下に永久に落ちないようにしたいとします。コードは、スクリーンの底部に集められたすべての粒子を沈降させることを必要とする。下のデモを実行して、「パーティクル」テキストをクリックしてください。粒子が生成されると、粒子は底部に集められなければならない。パーティクルが画面の下部に永久に落ちないようにするにはどうすればいいですか?

//-------------------------------- For Squares------------- 
 

 
var d = document, $d = $(d), 
 
    w = window, $w = $(w), 
 
    wWidth = $w.width(), wHeight = $w.height(), 
 
    credit = $('.credit > a'), 
 
    particles = $('.particles'), 
 
    particleCount = 0, 
 
    maxTime = 10, 
 
    sizes = [ 
 
     75 
 
    ], 
 
    colors = [ 
 
     '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', 
 
     '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', 
 
     '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', 
 
     '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777' 
 
    ], 
 
    
 
    mouseX = $w.width()/2, mouseY = $w.height()/2; 
 

 
function updateParticleCount() { 
 
    $('.particle-count > .number').text(particleCount); 
 
}; 
 

 
$w 
 
.on('resize' , function() { 
 
    wWidth = $w.width(); 
 
    wHeight = $w.height(); 
 
}); 
 

 
$("p") 
 
.on('mousemove touchmove' , function (event) { 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
    mouseX = event.clientX; 
 
    mouseY = event.clientY; 
 
    if(!!event.originalEvent.touches) { 
 
    mouseX = event.originalEvent.touches[0].clientX; 
 
    mouseY = event.originalEvent.touches[0].clientY; 
 
    } 
 
}) 
 
.on('mousedown touchstart' , function(event) { 
 
    if(event.target === credit.get(0)){ 
 
    return; 
 
    } 
 
    mouseX = event.clientX; 
 
    mouseY = event.clientY; 
 
    if(!!event.originalEvent.touches) { 
 
    mouseX = event.originalEvent.touches[0].clientX; 
 
    mouseY = event.originalEvent.touches[0].clientY; 
 
    } 
 

 
var counter = 0; 
 

 
    var timer = setInterval(function() { 
 
    if (counter < maxTime) { 
 
     createParticle(event); 
 
    } else { 
 
     clearInterval(timer); 
 
     counter = 0; 
 
    } 
 
    counter++; 
 
    
 
    }, 1000/20); 
 
    
 
    $("p"). 
 
    on('mouseup mouseleave touchend touchcancel touchleave', function() { 
 
    clearInterval(timer); 
 
    }); 
 
}); 
 

 

 
function createParticle (event) { 
 
    var particle = $('<div class="particle">' + getSymbol() + '</div>'), 
 
     size = sizes[Math.floor(Math.random() * sizes.length)], 
 
     color = colors[Math.floor(Math.random() * colors.length)], 
 
     negative = size/2, 
 
     speedHorz = Math.random() * 10, 
 
     speedUp = Math.random() * 25, 
 
     spinVal = 360 * Math.random(), 
 
     spinSpeed = ((12 * Math.random())) * (Math.random() <=.5 ? -1 : 1), 
 
     otime, 
 
     time = otime = (1 + (.5 * Math.random())) * 1000, 
 
     top = (mouseY - negative), 
 
     left = (mouseX - negative), 
 
     direction = Math.random() <=.5 ? -1 : 1 , 
 
     life = 10; 
 
    
 
    particle 
 
    .css({ 
 
    height: size + 'px', 
 
    width: size + 'px', 
 
    top: top + 'px', 
 
    left: left + 'px', 
 
    background: color, 
 
    transform: 'rotate(' + spinVal + 'deg)', 
 
    webkitTransform: 'rotate(' + spinVal + 'deg)' 
 
    }) 
 
    .appendTo(particles); 
 
    particleCount++; 
 
    updateParticleCount(); 
 
    
 
    var particleTimer = setInterval(function() { 
 
    time = time - life; 
 
    left = left - (speedHorz * direction); 
 
    top = top - speedUp; 
 
    speedUp = Math.min(size, speedUp - 1); 
 
    spinVal = spinVal + spinSpeed; 
 
    
 
    
 
    particle 
 
    .css({ 
 
     height: size + 'px', 
 
     width: size + 'px', 
 
     top: top + 'px', 
 
     left: left + 'px', 
 
     opacity: ((time/otime)/2) + 1.0, 
 
     transform: 'rotate(' + spinVal + 'deg)', 
 
     webkitTransform: 'rotate(' + spinVal + 'deg)' 
 
    }); 
 
    
 
    if(time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size) { 
 
     particle.remove(); 
 
     particleCount--; 
 
     updateParticleCount(); 
 
     clearInterval(particleTimer); 
 
    } 
 
    }, 1000/50); 
 
} 
 

 

 

 

 

 
//-------------------------------- For Circles------------- 
 

 
var d = document, $d = $(d), 
 
    w = window, $w = $(w), 
 
    wWidth = $w.width(), wHeight = $w.height(), 
 
    credit = $('.credit > a'), 
 
    particles2 = $('.particles2'), 
 
    particle2Count = 0, 
 
    maxTime = 10, 
 
    sizes = [ 
 
     75 
 
    ], 
 
    colors = [ 
 
     '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', 
 
     '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', 
 
     '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', 
 
     '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777' 
 
    ], 
 
    
 
    mouseX = $w.width()/2, mouseY = $w.height()/2; 
 

 
function updateParticle2Count() { 
 
    $('.particle2-count > .number').text(particle2Count); 
 
}; 
 

 
$w 
 
.on('resize' , function() { 
 
    wWidth = $w.width(); 
 
    wHeight = $w.height(); 
 
}); 
 

 
$("p") 
 
.on('mousemove touchmove' , function (event) { 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
    mouseX = event.clientX; 
 
    mouseY = event.clientY; 
 
    if(!!event.originalEvent.touches) { 
 
    mouseX = event.originalEvent.touches[0].clientX; 
 
    mouseY = event.originalEvent.touches[0].clientY; 
 
    } 
 
}) 
 
.on('mousedown touchstart' , function(event) { 
 
    if(event.target === credit.get(0)){ 
 
    return; 
 
    } 
 
    mouseX = event.clientX; 
 
    mouseY = event.clientY; 
 
    if(!!event.originalEvent.touches) { 
 
    mouseX = event.originalEvent.touches[0].clientX; 
 
    mouseY = event.originalEvent.touches[0].clientY; 
 
    } 
 

 
    var counter = 0; 
 

 
    var timer = setInterval(function() { 
 
    if (counter < maxTime) { 
 
     createParticle2(event); 
 
    } else { 
 
     clearInterval(timer); 
 
     counter = 0; 
 
    } 
 
    counter++; 
 
    
 
    }, 1000/20); 
 
    
 
    $("p"). 
 
    on('mouseup mouseleave touchend touchcancel touchleave', function() { 
 
    clearInterval(timer); 
 
    }); 
 
}); 
 

 

 
function createParticle2 (event) { 
 
    var particle2 = $('<div class="particle2">' + getSymbol() + '</div>'), 
 
     size = sizes[Math.floor(Math.random() * sizes.length)], 
 
     color = colors[Math.floor(Math.random() * colors.length)], 
 
     negative = size/2, 
 
     speedHorz = Math.random() * 10, 
 
     speedUp = Math.random() * 25, 
 
     spinVal = 360 * Math.random(), 
 
     spinSpeed = ((12 * Math.random())) * (Math.random() <=.5 ? -1 : 1), 
 
     otime, 
 
     time = otime = (1 + (.5 * Math.random())) * 1000, 
 
     top = (mouseY - negative), 
 
     left = (mouseX - negative), 
 
     direction = Math.random() <=.5 ? -1 : 1 , 
 
     life = 10; 
 
    
 
    particle2 
 
    .css({ 
 
    height: size + 'px', 
 
    width: size + 'px', 
 
    top: top + 'px', 
 
    left: left + 'px', 
 
    background: color, 
 
    transform: 'rotate(' + spinVal + 'deg)', 
 
    webkitTransform: 'rotate(' + spinVal + 'deg)' 
 
    }) 
 
    .appendTo(particles2); 
 
    particle2Count++; 
 
    updateParticle2Count(); 
 
    
 
    var particle2Timer = setInterval(function() { 
 
    time = time - life; 
 
    left = left - (speedHorz * direction); 
 
    top = top - speedUp; 
 
    speedUp = Math.min(size, speedUp - 1); 
 
    spinVal = spinVal + spinSpeed; 
 
    
 
    
 
    particle2 
 
    .css({ 
 
     height: size + 'px', 
 
     width: size + 'px', 
 
     top: top + 'px', 
 
     left: left + 'px', 
 
     opacity: ((time/otime)/2) + 1.0, 
 
     transform: 'rotate(' + spinVal + 'deg)', 
 
     webkitTransform: 'rotate(' + spinVal + 'deg)' 
 
    }); 
 
    
 
    if(time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size) { 
 
     particle2.remove(); 
 
     particle2Count--; 
 
     updateParticle2Count(); 
 
     clearInterval(particle2Timer); 
 
    } 
 
    }, 1000/50); 
 
} 
 
function getSymbol() { 
 
    var symbols = "12X34Y5Z+x=-%"; 
 
    return symbols.charAt(Math.floor(Math.random() * symbols.length)); 
 
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300'); 
 
.particle-count { 
 
    display: block; 
 
    text-align: center; 
 
    margin: 25px 0; 
 
} 
 

 
.particles > .particle { 
 
    background: #000; 
 
    border-radius: 20%; 
 
    position: absolute; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
} 
 

 
.particles > .particle.small { 
 
    width: 10px; 
 
    height: 10px; 
 
} 
 
.particles > .particle.normal { 
 
    width: 15px; 
 
    height: 15px; 
 
} 
 
.particles > .particle.big { 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.particles > .particle.bigger { 
 
    width: 25px; 
 
    height: 25px; 
 
} 
 

 
.particles { 
 
    background: #000; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    background-repeat: no-repeat; 
 
    font-family: 'Roboto Slab', serif; 
 
    font-size: 48px; 
 
    text-align: center; 
 
} 
 

 
/**-----------------------------------------------------------------**/ 
 
.particle2-count { 
 
    display: block; 
 
    text-align: center; 
 
    margin: 25px 0; 
 
} 
 

 
.particles2 > .particle2 { 
 
    background: #000; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
} 
 

 
.particles2 > .particle2.small { 
 
    width: 10px; 
 
    height: 10px; 
 
} 
 
.particles2 > .particle2.normal { 
 
    width: 15px; 
 
    height: 15px; 
 
} 
 
.particles2 > .particle2.big { 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.particles2 > .particle2.bigger { 
 
    width: 25px; 
 
    height: 25px; 
 
} 
 

 
.particles2 { 
 
    background: #000; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    background-repeat: no-repeat; 
 
    font-family: 'Roboto Slab', serif; 
 
    font-size: 48px; 
 
    text-align: center; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<html> 
 
<body> 
 
    <p>Click for particles</p> 
 
    <div class="particles"> 
 
    </div> 
 
    <div class="particles2"> 
 
    </div> 
 
</body> 
 
</html>

私はあなたたちは簡単にこの 感謝を修正することができます願っています!

+3

あまりにも多くのコード。あなたが問題に直面しているコードの必要な&簡単なスニペットを投稿してください。 https://stackoverflow.com/help/mcve –

+0

デモを実行すると、私が直面している問題を理解できます。 –

+1

私は、この質問をあまり具体的でないコードに変えて、他のユーザーにも適用できると思います。 「ビューポートの下部でアニメーションを停止する方法」のようなもの。モデレーター*が質問を編集することはできますが、それは多くのことを求めています。編集して読みやすく、解答しやすくしてください。 –

答えて

2

フレームの下部に達したときに何か「バウンス」するには、パーティクルの速度を逆転させる場合は、画面の下にあるかどうかを確認してください。 1つを選択し、その高さを画面の下部に設定します。これは、スタッターに役立ちます。例えば:

if (top + size > wHeight) { 
    speedUp = -0.7 * speedUp; // rebounds with 0.7 times the velocity 
    top = wHeight - size; 
} 

JSFiddle example.

この情報がお役に立てば幸い!

+0

それは私が探していたものです!ありがとう! –

+0

バウンスを止めたときに表示させることはできますか? –

関連する問題