Streaming live at 10am (PST)

Background hover effect


#1

Hello all,

Trying to get an effect like this - https://yalantis.com/

Any advice?


#2

I myself believe that this is a tricky effect to achieve in Webflow. However I do also think it is doable. I’m thinking you could lay out a set of div blocks in a desired shape and give them an interaction where, if you hover over them, they will move a certain distance (ex: x 600 px, y-300). I would worry about keeping the interactions to a minimum to prevent lag on slower computers. Maybe I’ll try and create a demo if I have time. Good luck, Ayush!

Edit: I’ve made a little demo that follows a similar effect. Getting the motion of the particles on Yalantis’ website was difficult to portray but this demo is a start. recreated-in.webflow.io/yalantis-effect-demo


#3

Hey @EthanApalis Thank you so much - you made my day. This is exactly what I was looking for. You think you can give me an access to this page in webflow designer to have a quick look.

In any case, thanks again - much appreciated :clap:t2: I’ll get some work done.


#4

Hi aymittal,

It looks like that site is using ParticleSlider (found at particleslider dot com), which I believe is JavaScript.


#5

@aymittal thank you, I’m glad it helps. Here is my read-only link for you to check out: https://preview.webflow.com/preview/recreated-in?preview=70bce4501a7c05b869fdfd908469b001 (note: you may have to do some digging around the editor… I have several other pages in the project)

It may also help to check out @lblampman’s suggestion. Yalantis is using ParticleSlider itself. I recently saw a Webflow designer utilize ParticleSlider at http://socialeyesburgtest.webflow.io/. It’s worth noting that using PSlider requires custom code and a few other actions outside of the Webflow Designer. Happy designing! :wink:

Edit: NextParticle may also be what you are looking for.


#6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.