jQuery Random Particles Overlay on Element? - javascript

I'm wondering is it possible to achieve following effect via jQuery http://www.youtube.com/watch?v=Zlb6o_R_WoI
So particles overlay image, are random fade in and out etc? I've looked for plugins or experiments, but wasn't able to find anything closely similar.
Another question that appears is how big of an impact would such effect have in a browser? e.g if there are 8 images each has particle effect, however only one particle effect is displayed at a time others are hidden, lets say with Display None.

Here's a little something to get you started on HTML5 animation and changing the opacity over time (fade in/fade out). You can mess around with getting the random movement and stuff going, and feel free to ask me questions if you can't figure out what I did.
http://jsfiddle.net/eW6BB/

Related

Using react-spring Parallax, how can I increase an image width as the user scrolls?

I am making a basic webpage on React with two Parallax Layers with images, the first layer image is a drawing of a room, and the second layer image is a drawing of a doorway, with a transparent cutout where the door is. I plan on doing a bunch of parallax scrolling in the future for this site, and want to use the react-spring package since it has many features I'm keen on using.
As the user scrolls down, I want to zoom and increase the width of the doorway image (yellow box) from the center point, till it is no longer visible and gives way to the room illustration, instead of it scrolling up and disappearing. Essentially, an illusion of entering a room through a door.
Here is the jist of my code on codesandbox, if you scroll you can see some of the react-spring Parallax in effect. I have spent about 12 hours looking for an answer on how to increase the width of the doorframe image (yellow box) as I scroll, and have had no working results. I'm running out of things to Google - I've tried methods with Javascript, where I give the CSS style a variable, Jquery that tracks scroll distance, using Spring native to, and pure CSS and still can't seem to find a solution compatible for the react-spring package.
https://codesandbox.io/embed/practical-sea-2tecb?fontsize=14&hidenavigation=1&theme=dark
Since I am trying to use React and the react-spring library, I think I've made this issue complicated. But, as I develop more of the site, I want to be able to use the features on react-spring. Any guidance would be so, so helpful.
Thanks

CSS Text Fade In/Out to Different Text

Basically, on a website I want to display a number of elements in the same space one after the other with a fade effect to transition between them; this would be used to display quotes from customers on a website. I've achieved this before using images and using CSS effects to fade in/out from the first to the last and it looked good, the only issue is the fact that obviously images have sizing issues when it comes to making the site responsive, and the images take up unnecessary space on the server and effect loading times, depending on how many are used. My question is simple to ask if anyone knows of a more efficient way of creating a similar effect that can use plain text instead of images? Possibly by hiding all text bar one line within an element and then fading to the next line? Preferably using only CSS but js answers are welcome too. Thanks in advance!
Also, a website using images for the effect I want to achieve: http://portsmouthtap.co.uk/

Making Slide Show by CSS3 Animation

Have a look at this picture:
http://oi43.tinypic.com/5cdm5g.jpg
This is my idea to design an slide show, which each slide can be a div tag and congaing some text or image and the small behind slide is the next one which is a bit transparent and when the user press the space bar or click somewhere the top slide fades out and the next one moves to forward and replaces, then another slide replace as the next one.
I know it is possible by JS, but what about CSS3? I know I have to put code here, but I have just started and do not know where to start. It would be great if some one help me and gives me some hints.
The best resource I have found for CSS3 questions is http://css-tricks.com/
This is another good resource and is updated regularly by the owner. http://css3.bradshawenterprises.com
It will be some advanced CSS3 techniques you'll be using such as transitions, transforms etc..
Good luck

How to make a div update the content with a sliding effect (animation similar to flash)?

Could you please tell me how this photo animation effect is achieved - see the pictures that slide seamlessly to the left every say 3 seconds (the pictures just below the BIGSTOCKPHOTO logo).. Site- www.bigstockphoto.com
I have noted this effect being used in many other sites.. And none of them seem to employ flash for making this. Please let me know whether this is just JS or whether its purely a CSS based effect, and probably a place where i can read on how to make this.
Thanks.
here you go..
example:
http://cssglobe.com/lab/easyslider1.7/01.html
info:
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Change z-index of div with fade effect on mouse over

I have 4 images stacked on top of each other, see below:
I'm trying to achieve two things:
When the mouse is over an image that is in the background, that
image should come to the foreground with a fading effect. There is
also different text below each image, that text should come to the
foreground. (no fading needed there)
The result should be like this:
Every 10-15 seconds (without user input), the next image on the right should fade in
automatically.
Technically, I thought about putting each image and text into a separate div, and playing with the z-order. The fading effect could maybe be achieved using jquery, but I've not used that before, unfortunately.
Any example code, specific help or pointers is greatly appreciated.
Thanks!
Although it's impossible to control the fade of an element through his z-index
we can always trick what our eyes see.
DEMO GALLERY
To achieve that we can do:
Insert into our gallery a DIV element that will grab the src attribute of the current image and set it as his background image
hide the current image, position the DIV on this image .position()
fade our DIV in/out
reset image visibility
Let me know if you have some issues, I can comment my code to make clearer the steps I used.
Happy coding
Take a look at this plugin. Just explore it, this has got 100s of different effects which you might like to use in your case.
http://jquery.malsup.com/cycle/browser.html

Categories