From 8a4cbde350034caab3feca5ef48386ba5562ad22 Mon Sep 17 00:00:00 2001 From: "Milad.Mardakheh" Date: Sat, 18 Jan 2020 11:40:41 +0000 Subject: [PATCH 1/2] Particle Background Added the support-website's particle background to the app for coherent design. --- client/ipsosboard.css | 20 +++++++ client/ipsosboard.html | 3 +- .../IPSOS_support_website/.demo.html.icloud | Bin 157 -> 0 bytes .../background/particles.js | 54 +++++++++--------- public/IPSOS_support_website/support.html | 2 +- 5 files changed, 50 insertions(+), 29 deletions(-) delete mode 100755 public/IPSOS_support_website/.demo.html.icloud diff --git a/client/ipsosboard.css b/client/ipsosboard.css index efcca33..20f30b2 100644 --- a/client/ipsosboard.css +++ b/client/ipsosboard.css @@ -205,6 +205,26 @@ body { margin-left: 0px; float: left; } +.background { + position: fixed; + box-sizing: border-box; + height: 100%; + width: 100%; + top:0; + bottom:0; + left:0; + right:0; + z-index: 0; + } +iframe{ + position: fixed; + height: 100%; + width: 100%; + top:0; + bottom:0; + left:0; + right:0; +} /* table { diff --git a/client/ipsosboard.html b/client/ipsosboard.html index 2773151..767c375 100644 --- a/client/ipsosboard.html +++ b/client/ipsosboard.html @@ -4,8 +4,9 @@ - +
+
diff --git a/public/IPSOS_support_website/.demo.html.icloud b/public/IPSOS_support_website/.demo.html.icloud deleted file mode 100755 index fa1b0832257fdfddb5421070f0c5eed4f3fa51f3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 157 zcmYc)$jK}&F)+By$i&RT$`<1n92(@~mzbOComv?$AOPmNW#*&?XI4RkB;Z0psm1xF zMaiill?5QF$duIFe7%g4+#Es2kaz(Ztm=YN(@S#_i#YgY^u0pD8Nh&%5kfPtLunXQ F1^_#IDlPy3 diff --git a/public/IPSOS_support_website/background/particles.js b/public/IPSOS_support_website/background/particles.js index 325d834..ef85078 100755 --- a/public/IPSOS_support_website/background/particles.js +++ b/public/IPSOS_support_website/background/particles.js @@ -72,7 +72,7 @@ var pJS = function(tag_id, params){ width: 1 }, move: { - enable: true, + enable: false, speed: 2, direction: 'none', random: false, @@ -91,11 +91,11 @@ var pJS = function(tag_id, params){ detect_on: 'canvas', events: { onhover: { - enable: true, + enable: false, mode: 'grab' }, onclick: { - enable: true, + enable: false, mode: 'push' }, resize: true @@ -125,7 +125,7 @@ var pJS = function(tag_id, params){ }, mouse:{} }, - retina_detect: false, + retina_detect: true, fn: { interact: {}, modes: {}, @@ -157,9 +157,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; @@ -363,7 +363,7 @@ var pJS = function(tag_id, params){ this.vx_i = this.vx; this.vy_i = this.vy; - + /* if shape is image */ @@ -392,7 +392,7 @@ var pJS = function(tag_id, params){ } } - + }; @@ -402,7 +402,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; } @@ -491,9 +491,9 @@ var pJS = function(tag_id, params){ pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width; pJS.canvas.ctx.stroke(); } - + pJS.canvas.ctx.fill(); - + }; @@ -664,7 +664,7 @@ var pJS = function(tag_id, params){ pJS.tmp.count_svg = 0; pJS.fn.particlesEmpty(); pJS.fn.canvasClear(); - + /* restart */ pJS.fn.vendors.start(); @@ -684,14 +684,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.y); @@ -725,7 +725,7 @@ var pJS = function(tag_id, params){ p2.vy += ay; } - + } @@ -805,7 +805,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){ @@ -854,7 +854,7 @@ var pJS = function(tag_id, params){ if(pJS.interactivity.status == 'mouseleave'){ init(); } - + } /* on click event */ @@ -933,7 +933,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 @@ -946,7 +946,7 @@ var pJS = function(tag_id, params){ p.x = pos.x; p.y = pos.y; } - + } @@ -1001,7 +1001,7 @@ var pJS = function(tag_id, params){ // }else{ // process(); // } - + }else{ @@ -1009,7 +1009,7 @@ var pJS = function(tag_id, params){ p.vx = p.vx_i; p.vy = p.vy_i; - + } } @@ -1039,7 +1039,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.y); @@ -1155,7 +1155,7 @@ var pJS = function(tag_id, params){ } }); - + } @@ -1359,7 +1359,7 @@ var pJS = function(tag_id, params){ pJS.fn.vendors.init(); pJS.fn.vendors.draw(); } - + } }else{ @@ -1406,7 +1406,7 @@ var pJS = function(tag_id, params){ pJS.fn.vendors.eventsListeners(); pJS.fn.vendors.start(); - + }; @@ -1538,4 +1538,4 @@ window.particlesJS.load = function(tag_id, path_config_json, callback){ }; xhr.send(); -}; \ No newline at end of file +}; diff --git a/public/IPSOS_support_website/support.html b/public/IPSOS_support_website/support.html index 7a8602d..a3077e4 100755 --- a/public/IPSOS_support_website/support.html +++ b/public/IPSOS_support_website/support.html @@ -25,7 +25,7 @@
-
+