Develop Reference

react-particles-js: Can't set a background and width

I have this installed react-particles-js, everything works fine as I see, but now I have created some custom design, and assigned it to the Particle via it params, just like this:
<Particles
params={{
particles: {
number: { value: 35, density: { enable: true, value_area: 800 } },
color: {
value: [
'BB4D10',
'#820E42',
'#BD740F',
'#248592',
'#5F4DAF',
'#8BA00F',
],
},
shape: {
type: 'circle',
stroke: { width: 0, color: '#000000' },
polygon: { nb_sides: 3 },
image: { src: 'img/github.svg', width: 100, height: 100 },
},
opacity: {
value: 1.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 9,
random: true,
anim: {
enable: false,
speed: 43.15684315684316,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: true,
distance: 100.82952832645452,
color: '#ffffff',
opacity: 1.4,
width: 1,
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 },
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: { enable: true, mode: 'bubble' },
onclick: { enable: false, mode: 'push' },
resize: true,
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: {
distance: 109.63042366068159,
size: 13,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 },
},
},
retina_detect: true,
}}
style={styling}
/>
After that, I'm trying to add a background color to make it look correctly, but as I can see the styling which I try to pass to the particle it just doesn't work, at least the position applies.
const styling = {
backgroundColor: '#2a2e31',
position: 'absolute',
width: '10%',
};

There are several ways to control the styling:
You can provide a className prop for canvas wrapper, and width prop for the width of canvas:
<Particles
...
style={styling}
width="10%"
className="particles-wrapper"
/>
And, write the CSS:
.particles-wrapper {
background-color: #2a2e31;
height: 100%;
width: 10%; // You may need this or may not depending on your requirement
}
Or, you can add a new div which would wrap the <Particles .. /> and set styling for this div as by default canvas is transparent.
Or, you can use canvasClassName prop and set the style for this class.
Here is a snapshot after using the 1st method from above:
The reason that we need to pass width, height separately is, as seen in source code, those present in props.style is being overwritten like this:
style={{
...this.props.style,
width,
height
}}

The easiest way to set a background to the particles is using the background option.
<Particles params={{
background: {
color: "#000"
},
/* all other options you set */
}} />
This will set a background to the canvas. If you need a transparent one use #ajeet-shah answer.

How to fix this? GSAP animation for Page transition work perfectly only the first time

I`m using barba.js with Gsap.
The idea is to have a transition from the home page and the about page with a centered logo animation, very simple. I click on my button, the transition comes in, the logo scale from 0 to 1, and go down fading, great!
The first animation works as it should but when I clicked again the scale factor is now missing, unfortunately.
How can I fix this to make it work? have a look at my code pen project:
https://codepen.io/cat999/project/editor/AEeEdg
Here my JS
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to("#svg-1", {
duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2,
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3,
});
tl.set(".loading-screen", { left: "-100%", });
tl.set("#svg-1", { opacity: 1, y: 0 });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(2000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});

jQuery animation in order delay

Hey all I am trying to call out animations in order. Currently the code below seems to call them all out at the same time even with the delay function (which doesn't seem to be working at all...)
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })
What all would I need to do in order to have the execute one at a time?

If you want the animations to happen sequentially you should nest each animation in the complete callback of the prior:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' });
})
})
})
.animate reference: http://api.jquery.com/animate/

You either need to send the next one as a callback, or use incremental delays.
Callbacks:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
});
});
});
});
Incremental delays:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice2").delay(2700).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(4900).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(7100).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })

$(".overlayChoice1").animate({ top: '-15px' }, 1700, "easeOutElastic", function() {
// Animation overlayChoice1 complete.
$(".overlayChoice2").animate({ top: '-45px' }, 1700, "easeOutElastic", function() {
// Animation overlayChoice2 complete.
.....
} })
});

Personally, I'd use a much more DRY implementation that doesn't repeat so much code and triggers the next animation based on the completion callback of the previous one:
function runAnimations() {
var cntr = 1, top = -15;
function next() {
if (cntr <= 4) {
$(".overlayChoice" + cntr).delay(500)
.animate({top:top+'px'}, {duration:1700, easing:'easeOutElastic'}, next);
++cntr;
top -= 30;
}
}
next();
}

How to assign attributes or functions to objects added after DOm ready with jquery

I am working in some personal project it is like the front-end of a chat. So i have my users and i have a JSON with the list of online and offline users. When the website firs load I also load plugins for custom scroll and make elements draggable with jquery ui. what i would like to know is if there is a way to make the new elements added to the body (chat windows) automatically be scrollable and have this custom scroll bar every time I add them. So far what I do es something like :
$(document).on("ready", functions);
function functions() {
$("#contacts-container").slimScroll({
height: '220',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false
});
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
$("#online .user-name").on("click", checkUser);
};
function checkUser(){
console.log("clicked");
var user = $(this).html();
$.getJSON("js/options.json", function(json){
var itemsLength = json.chat.OnlineContacts.length;
for ( var i = 0; i < itemsLength; i++) {
var jsonUserName = json.chat.OnlineContacts[i].name;
var jsonUserStatus = json.chat.OnlineContacts[i].status;
var jsonUserAvatar = json.chat.OnlineContacts[i].picture;
if(user == jsonUserName){
displayChatWindow(jsonUserName, jsonUserStatus, jsonUserAvatar);
}
};
});
}
function displayChatWindow(user, status, avatar){
console.log(avatar);
var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar});
$("body").prepend(template);
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
$(".friend-window").draggable({handler: ".header"});
}
On the DisplayChatWindow I append the template wich is s div representing the chat window, but i also have to re add the slimScroll function and the draggabla function, but i would like them to automatically have it once i append it, I am learning Java Script so I don't know if using an object i can achieve this or if there is another way, basically what i have done here it the most i know how to do so far, i will appreciate if you guys can help me :)

This should work I believe.
$(document).on("ready", function() {
functions();
$(document).bind('DOMNodeInserted', function() {
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
});
});

raphael + mapSvg fadeout

I need some help,I'm using mapSVG in this code that creates a map of my country, where every region has its own path, with its own id, so this is what I want:
When I click on a region, I need it to fade out(1000 ms) together with the whole map of the country,and then I need a delay of for example 500ms, after which only the region on which I clicked fades in (1000 ms).
And I need this to work for every region respectively.
<div id="italy" style="margin-left:135px;margin-right:135px;">
<!-- Here comes map code-->
<script type="text/javascript">
$('#italy').mapSvg({
source: 'maps/italy.svg',
colors: {
base: "#E1F1F1",
stroke: "#646464",
hover: "#548eac",
selected: "#548eac",
disabled: "#ffffff",
},
tooltipsMode: 'custom',
popover : {width: 300, height: 300},
cursor: 'pointer',
zoom: false,
pan: false,
responsive: true,
width: 900,
height: 600,
responsive: true,
zoomButtons: {'show': false,
},
regions : {
'Sicilia' : {tooltip: 'This is Sicilia'},
},
onClick : function(e,m){
this.animate({opacity: 0}, 1000 );
}
});
</script>
</div>

I'm developer of mapSVG :) Try this:
onClick: function (e, m) {
var rmap = m.getData().RMap;
var region = this;
var fadeBack = function () {region.animate({opacity: 1}, 500);};
rmap.animate({opacity: 0}, 500, fadeBack);
}