Commit c18c1b44 authored by Vincent Garreau's avatar Vincent Garreau
Browse files

update parallax

parent 8266cb1e
......@@ -24,7 +24,7 @@ li{list-style:none}
/* ---- base ---- */
html,body{
html,body{
width:100%;
height:100%;
background:#111;
......
......@@ -13,7 +13,7 @@ particlesJS.load('particles-js', 'particles.json', function() {
/* Otherwise just put the config content (json): */
particlesJS('particles-js',
{
"particles": {
"number": {
......@@ -90,7 +90,7 @@ particlesJS('particles-js',
"mode": "repulse",
"parallax": {
"enable": true,
"force": 2,
"force": 60,
"smooth": 10
}
},
......
......@@ -163,9 +163,9 @@ var pJS = function(tag_id, params){
pJS.fn.retinaInit = function(){
if(pJS.retina_detect && window.devicePixelRatio > 1){
pJS.canvas.pxratio = window.devicePixelRatio;
pJS.canvas.pxratio = window.devicePixelRatio;
pJS.tmp.retina = true;
}
}
else{
pJS.canvas.pxratio = 1;
pJS.tmp.retina = false;
......@@ -373,7 +373,7 @@ var pJS = function(tag_id, params){
this.vx_i = this.vx;
this.vy_i = this.vy;
/* if shape is image */
......@@ -402,7 +402,7 @@ var pJS = function(tag_id, params){
}
}
};
......@@ -412,7 +412,7 @@ var pJS = function(tag_id, params){
var p = this;
if(p.radius_bubble != undefined){
var radius = p.radius_bubble;
var radius = p.radius_bubble;
}else{
var radius = p.radius;
}
......@@ -504,9 +504,9 @@ var pJS = function(tag_id, params){
pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width;
pJS.canvas.ctx.stroke();
}
pJS.canvas.ctx.fill();
};
......@@ -541,10 +541,10 @@ var pJS = function(tag_id, params){
/* parallax */
if(pJS.interactivity.mouse.pos_x && pJS.interactivity.events.onhover.parallax.enable){
/* smaller is the particle, longer is the offset distance */
var tmp_x = (pJS.interactivity.mouse.pos_x - (window.innerWidth / 2)) / (pJS.interactivity.events.onhover.parallax.force * p.radius);
var tmp_x = (pJS.interactivity.mouse.pos_x - (window.innerWidth / 2)) * (p.radius / pJS.interactivity.events.onhover.parallax.force);
p.offsetX += (tmp_x - p.offsetX) / pJS.interactivity.events.onhover.parallax.smooth; // Easing equation
var tmp_y = (pJS.interactivity.mouse.pos_y - (window.innerHeight / 2)) / (pJS.interactivity.events.onhover.parallax.force * p.radius);
var tmp_y = (pJS.interactivity.mouse.pos_y - (window.innerHeight / 2)) * (p.radius / pJS.interactivity.events.onhover.parallax.force);
p.offsetY += (tmp_y - p.offsetY) / pJS.interactivity.events.onhover.parallax.smooth; // Easing equation
}
......@@ -687,7 +687,7 @@ var pJS = function(tag_id, params){
pJS.tmp.count_svg = 0;
pJS.fn.particlesEmpty();
pJS.fn.canvasClear();
/* restart */
pJS.fn.vendors.start();
......@@ -707,14 +707,14 @@ var pJS = function(tag_id, params){
var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance;
if(opacity_line > 0){
if(opacity_line > 0){
/* style */
var color_line = pJS.particles.line_linked.color_rgb_line;
pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';
pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
//pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
/* path */
pJS.canvas.ctx.beginPath();
pJS.canvas.ctx.moveTo((p1.x + p1.offsetX), (p1.y + p1.offsetY));
......@@ -748,7 +748,7 @@ var pJS = function(tag_id, params){
p2.vy += ay;
}
}
......@@ -828,7 +828,7 @@ var pJS = function(tag_id, params){
if(dist_mouse <= pJS.interactivity.modes.bubble.distance){
if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){
/* size */
if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){
......@@ -877,7 +877,7 @@ var pJS = function(tag_id, params){
if(pJS.interactivity.status == 'mouseleave'){
init();
}
}
/* on click event */
......@@ -956,7 +956,7 @@ var pJS = function(tag_id, params){
repulseRadius = pJS.interactivity.modes.repulse.distance,
velocity = 100,
repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50);
var pos = {
x: p.x + normVec.x * repulseFactor,
y: p.y + normVec.y * repulseFactor
......@@ -969,7 +969,7 @@ var pJS = function(tag_id, params){
p.x = pos.x;
p.y = pos.y;
}
}
......@@ -1024,7 +1024,7 @@ var pJS = function(tag_id, params){
// }else{
// process();
// }
}else{
......@@ -1032,7 +1032,7 @@ var pJS = function(tag_id, params){
p.vx = p.vx_i;
p.vy = p.vy_i;
}
}
......@@ -1062,7 +1062,7 @@ var pJS = function(tag_id, params){
pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')';
pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
//pJS.canvas.ctx.lineCap = 'round'; /* performance issue */
/* path */
pJS.canvas.ctx.beginPath();
pJS.canvas.ctx.moveTo(p.x + p.offsetX, p.y + p.offsetY);
......@@ -1178,7 +1178,7 @@ var pJS = function(tag_id, params){
}
});
}
......@@ -1382,7 +1382,7 @@ var pJS = function(tag_id, params){
pJS.fn.vendors.init();
pJS.fn.vendors.draw();
}
}
}else{
......@@ -1429,7 +1429,7 @@ var pJS = function(tag_id, params){
pJS.fn.vendors.eventsListeners();
pJS.fn.vendors.start();
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment