0
Ceci est le code que je teste =>
J'ai suivi tout mais ne peux pas faire de résultat comme aperçu, tout fonctionne bien mais les boules de couleur ne sont pas visibles je pense pls m'aider où je suis le code réel? Je frappe ma tête encore et encore et tryng mais pas d'utilisation! p.s. j'ai essayé dans le violon local et js aussi, ne fonctionne pas non plus ->https://jsfiddle.net/mhLjps6q/ ici estPourquoi les boules de couleur ne sont pas visibles lorsque vous cliquez sur la souris?
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
sizes = [
15, 20, 25, 35, 45
],
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();
});
$d
.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 timer = setInterval(function() {
$d
.one('mouseup mouseleave touchend touchcancel touchleave', function() {
clearInterval(timer);
})
createParticle(event);
}, 1000/60)
});
function createParticle (event) {
var particle = $('<div class="particle"/>'),
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 = ((36 * 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) + .25,
\t transform: 'rotate(' + spinVal + 'deg)',
\t webkitTransform: 'rotate(' + spinVal + 'deg)'
});
if(time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size) {
particle.remove();
\t \t particleCount--;
updateParticleCount();
clearInterval(particleTimer);
}
}, 1000/50);
}html, body {
background: #fff;
width: 100%;
height: 100%;
overflow: hidden;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: 'PT Sans', sans-serif;
}
.title {
font-size: 10vw;
font-weight: 700;
text-align: center;
margin-top: 15%;
color: #444;
}
.subtitle {
font-size: 4vw;
color: #777;
font-weight: normal;
text-align: center;
margin-top: 0;
}
.credit {
position: absolute;
bottom: 5px;
width: 100%;
display: block;
text-align: center;
color: #777;
}
.credit > a {
color: #777;
}
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
border-radius: 100%;
background: transparent;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.particles > .particle.smaller {
width: 5px;
height: 5px;
}
.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;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h1 class='title'>PARTICLES!</h1>
<h4 class='subtitle'>Click/Touch Anywhere</h4>
<div class='particle-count'>
<span class='number'>0</span>
Particles
</div>
<span class='credit'>
Created by
<a href='https://twitter.com/Shawn_Sauce' target='_blank'>Shawn G.</a>
</span>
<div class='particles'></div>`
vos boules de couleur sont visibles dans mes navigateurs (Mozilla et chrome). :) –
Fonctionne bien pour moi – Gerard
fonctionne sur SO, ne fonctionne pas sur JSFiddle – Shtut