WebGL Fluid Simulation mouse effect implementation on website - javascript

Anyone has idea how to implement this: https://paveldogreat.github.io/WebGL-Fluid-Simulation/
to get mouse interaction like on this website https://advanced.team/ ?
I have been able to set up the same style through configuration, but I have now lost days on searching for how to get canvas beneath the website content like theirs or how even effect shows beneath every element...

Related

How to create a image slide show with scroll function?

I Want to create a slideshow of different images for a project with HTML, JS, and CSS. I want to create a scroll function that will move the image slides from left to right based on the movement of the mouse scroll.
If this sounds confusing this link shows exactly what I'm trying to do but due to my lack of experience, I have no idea how to accomplish this. Any ideas would help.
link: https://robbiecrenshaw.com/ about the halfway mark
thank you
(I'm a beginner in programming)
The animations used on this site are called scroll-based animations, where the animation progress is controlled directly by the scroll position.
They are implemented by listening to the scroll event that is fired when a user scrolls and updating the styles of certain elements dynamically based on the scroll position.
You can create scroll animations from scratch using JavaScript or implement them using a library like GSAP ScrollTrigger (which is what this specific site uses).
I created a demo similar to the effect you're looking for here: https://codepen.io/nickcil/pen/yLVEZPa
This example uses ScrollMagic to track the scroll position and update the transform property of an element to make the squares move left as you scroll down the page.

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

Curve image on scroll

I was looking at a website Firstborn website and it's not the first time I've seen this effect, i wonder how it works.
When you scroll down the page, you can see the images "curve" on top and bottom. I know I'm supposed to present some code, but I don't have any clue on how to create this type of curve on scroll effect!
Does anyone have ideas about how to make this effect is javascript? (Not the glitch, only the curvy image)?

Webcam MotionDetection hidden Canvas

Im trying to make a pausescreen for a kiosk system. And want the ability to sens when someone is in front of the screen.
I used most of the code from github -js-motion-detection
I dont want to display the webcam output on the screen,
When using Z-index motion is only detected in the areas that are visible to the user. And hide on the canvas elements gets overridden
How can i hide the videofeed and still use the motion detection ?
Code here

javascript masonry divs are resised with ccs and are overlapping each other, how can I get them to move out of the way?

But the key thing is I want them to do it in that tidy animated way, how do I get it to responsively move?
also what do I serch when I want an animation for when they appear, prefeerably a callback for their appearance so I can control that animation wuth transitions.
Lastly if I was to flick through a huge list of them on a phone how would I get the page to detect a fast flick to scroll down? Im creating an app for children between 3 and 6 for a uni project and when its flicked fast I want it to go "WHEEEEEEEEEEEEEE"
Any ideas as to how do able that is?
appreciate your time, thanks.

Categories