Develop Reference

How to place elements on a Particle JS background in Vue JS 3

I am using the vue 3 particles js library in my vue3 project and so far it has been working but I am having issues displaying elements over it as I noticed it hides the elements inside it. I wish to achieve something like this How can I be able to place this NASA image over the particles. Already checked the example in the docs but it uses vanilla JS and I am not sure of how to implement in vue.

You have two options:
If you want the particles full screen you can enable the full screen options with a lower z index like this:
{
"fullScreen": {
"enable": true,
"zIndex": -1 // -1 is behind the body, so if you have a background you have to use 0 or a different value
}
}
Or you can set a custom CSS targeting the particles id (eg. tsparticles) setting manually a lower z-index.
If particles are behind elements they won't interact when mouse is hover another element so I recommend setting interactivity.detectsOn to "window" value.
Setting this value makes particles unresponsive to mouse events directly since they are fired from the window itself so you can have particles on top and having the website still usable.
You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY

bxSlider Delayed Infinite Loop

My bxSlider horizontally spans 100% of the browser width - multiple (image) slides display across the viewport, with "moveSlides: 1" set in the options.
A total of 8 slides are being rotated. As I click the "next" arrow to progress through them, something odd is happening at the end. As the 8th slide initially enters the viewport from the right and I continue clicking, there aren't any images displaying to the right of it UNTIL it's about cycle out again through the left side, at which point slides #1-3 suddenly appear where they should in the sequence. From there, the cycle repeats, with the same scenario occurring once slide #8 enters the viewport again.
Basically, I want slide #1 and so forth to appear to the right of slide 8 as soon as they're supposed to show up in the viewport, without this lag. After inspecting the CSS, I'm pretty sure it's a matter of the viewport calculation being off (specifically, the "left" position of .bx-viewport).
How can this specific calculation (the wrapping of the slide lineup) in jquery.bxslider.js be modified? Or is there another approach I should take, one that wouldn't require tweaking the viewport calculations?
I have included the code and replicated the issue here: http://jsfiddle.net/astewes/S7L2n/1/
I am using bxSlider with the following options:
jQuery(document).ready(function($){
$('ul#homepage.bxslider').bxSlider({
controls: true,
displaySlideQty: 5,
pager: false,
startingSlide: 0,
moveSlideQty: 1,
infiniteLoop: true,
preloadImages: 'all',
adaptiveHeight: true,
captions: false
});
});
EDIT: I've updated the list of the options I'm using. I've been able to reduce the above-mentioned delay, but the slider still behaves strangely when cycling back around to image #1. displaySlideQty has proven useful in reducing the lag time, although I'm not sold on the idea of relying solely on it. Space between slides is also off (for portrait-sized images), but this is likely because I'm using a combination of portrait and landscape. I've tried dynamically changing widths of the portrait images, but the use of display: table and display: table-cell (to center everything) made that approach useless.

Controlling the animation

I am creating a whack-a-mole style game where a sum is given and numbers animate from the bottom of the container to the top. The aim of the game is to click the correct answer to the sum and collect as many correct answers as possible.
I have also added a couple of extra icons to make the game more fun. One of the icons is a flame which speeds up the animation for 5 seconds.
At the moment it makes all the icons move really fast all at once. Instead of this happening I want the flow to continue as usual, but at a faster pace.
This is what I have so far..
$(".character").click(clickThrottled(function () {
if ($(this).hasClass("heat")) {
$(this).effect("explode", 400);
$("#container").children().css('top', '400px').fadeIn(1000).animate({
'top': '-100px'
}, 3000).fadeOut(1000);
}
}));
Can someone show me where I am going wrong? Look at the demo and click the flame icon to get a better understanding of the problem.
Fiddle: http://jsfiddle.net/pUwKb/52/

Easing will make all the elements ease to the top at the same time, but in a stylish way (like they slow down at the end.)
What you actually need to do is keep a flag called 'isFlameOn' or 'speedModifier' would be better. When a flame icon is clicked, set 'speedModifier' to equal like 2 or 3, which will make the speed twice or three times as fast as normal.
Remove this:
$("#container").children().css('top', '400px').fadeIn(1000).animate({
'top': '-100px'
}, 3000).fadeOut(1000);
Because you will be changing the speed of objects individually.
Now go down to wherever you manage each icon (move them) and instead of saying: item[i].y -= item[i].speed;
Do item[i].y -= item[i].speed * speedModifier;
If you make them animate to get to the top, then you will need to keep track of each of those animate intervals and reset them. So if you create an item and then .animate it, you will need to remove that .animate effect and create a new one with the compensated speedModifier percent. You will have an easy day if you did it frame by frame instead :).
When you want the flame effect to run out, just set speedModifier back to 1. If you animated each item, you'll need to again remove the current .animate and replace it with a normal speed. Be sure to keep track of each item's random speed so that you can reset its speed back to the original speed after the effect wears off.

Look at the different easings provided by jQuery UI, they should solve your problem. To use them just set property easing of animate (if you need more advanced ones you should also include jQuery UI).
For further customization you can use the step callback of animate.

weird jQuery UI Slider behavior

I'm developing a simple one page website and I'm integrating the jQuery UI Slider. The website I'm integrating it in is : Website.
It seems like I'm having a little problem with the slider. If you look closely at the slider when navigating with the left and right arrow ( or the left and right keyboard keys ) you will notice that when going backward, before the last step, the min range jumps ahead the handle with a few pixels ( the background image ).
And also the animate property attached to the handle it doesn't work when using the mouse cursor to move the handle, per say the handle is in position 0 and you click on the last position, normally it should animate to the last position but it jumps there.
Could someone tell me how to fix these bugs ? I tried working on the CSS for the first problem but it doesn't seem to be because of that.

"min range jumps ahead the handle" - I've reduced the bug here: http://jsfiddle.net/jefferyto/Gd5dn/
This is a bug in jQuery.animate() when animating non-pixel values; Slider uses percentages. Before animating, jQuery converts the element's starting value (in pixels) into the end value's units, and assigns this non-px starting value to the element (lines 8601-8605 in jQuery 1.7.2 (unminified)).
The calculation is flawed for small end values (like 0%), and so the range's starting width is larger than what it should be.
I've opened a pull request with a fix; the same fix can be applied to the current stable version of jQuery.
Update: You can find a plugin that fixes this bug (for jQuery 1.7.2) here: http://jsfiddle.net/jefferyto/zbkQX/
Copy from (at the top)
// Start jQuery.animate() fix
to (before the test code)
// End jQuery.animate() fix
It should work if you paste this code into your plugins.js.
"it should animate to the last position but it jumps there" - this is because the Slider and jPages plugins are connected with circular callbacks.
When the user clicks on the slider, Slider triggers a slide event then animates the handle and range. The slide event handler calls jPages to change to the new page. jPages calls its assigned callback function, which passes the current page number back to Slider. Slider sets its value and starts to animate the handle/range.
After the slide event, Slider goes back to animating the handle and range (which is actually the second time it is animating). Slider calls .stop(1, 1) on the elements before animating, which causes the first animation to stop and jump immediately to its end value. (The second .animate() does nothing since the elements are already in the correct position.)
(I hope that made sense :-) )
I suggest adding logic in the jPages callback to call Slider with the new page number only if the trigger isn't originally from Slider.
Update: I think you'll need to update both callbacks:
For Slider:
slide: function(event, ui) {
if (!self.paging) {
self.paging = true;
$(self.shop_navigation_class).jPages(ui.value);
self.paging = false;
}
}
For jPages:
callback: function(pages) {
var data = {
current_page: pages.current,
total_pages: pages.count
}
self.set_local_storage_data(self.data_key, JSON.stringify(data));
if (!self.paging) {
self.paging = true;
$(self.shop_slider_class).slider("value", pages.current);
self.paging = false;
}
}
Please let me know if this works for you.

The simplest answer is probably to just not use jQueryUI's slider.
Having looked at your code it looks like you're easily competent enough at JS and CSS to replicate its appearance and core behaviour yourself, and make it work exactly how you want it to.

need help understanding this code in book "jquery in action"

This code in the book jQuery in action, on page 156.
I don't understand this part:
{opacity:'toggle'}
Can toggle be an opacity value?
$.fn.fadeToggle = function(speed){
return this.animate({opacity:'toggle'},speed);
};

From the documentation:
In addition to numeric values, each
property can take the strings 'show',
'hide', and 'toggle'. These shortcuts
allow for custom hiding and showing
animations that take into account the
display type of the element.
Using toggle will animate the opacity of the element at the speed you specify -- hiding it if it's visible, showing it if it's hidden.

The toggle is a short-cut string that toggles between the show/hide state of the element.
From http://api.jquery.com/animate/
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.

jQuery doc:
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element." Source
So yes, it can be a value.

Toggle, toggles between show and hide. From the same book:
In addition to specific values, we can also specify one of the strings hide, show, or
toggle; jQuery will compute the end value as appropriate to the specification of
the string. Using hide for the opacity property, for example, will result in the
opacity of an element being reduced to 0. Using any of these special strings has
the added effect of automatically revealing or removing the element from the display
(like the hide() and show() commands).
Did you notice when we introduced the core animations that there was no
toggling command for the fade effects? That’s easily solved using animate() and
toggle as follows

To help you maybe get around the English problem, here is a page that has a couple of demos right next to the code. Click once and it fades or slides. Click again and it returns to its original state.

If it's opaque it becomes transparent.
If it's transparent it becomes opaque.