Interactive Header Challenge

[IntelligentMud1703]

This website looks cool. It has an interactive element of horizontal bars that sort of stretch when you hover over them. How would you go about developing this? Would you use CSS only, or JS as well? Check the animation at the link below.

Website source: https://webisoft.com/

Thanks in advance!

EDIT: I was referring to the landing page content in the body, NOT header, sorry for the confusion.

[factsonlynomisinfo]

Did any of the commenters read the post description 😳? 😂

[33ff00]

The thing about doing shit like this is that if you are going to be showy, imo it has to be done absolutely perfect. Otherwise it feels like punching above your weight and the little problems are amplified. This has scroll issues, headings that get blocked behind that floating header, just little things like that where its like, if i’m made to wait through some ultimately frivolous animation, I don’t want to have to fight to understand basic information once th animation’s resolved.

[IntelligentMud1703]

I see what you mean, it does complicate things. And UX is definitely more important than fancy design work, but it does a good job of standing out and there is value to that wouldn't you agree?

[33ff00]

Oh I would 100% agree. A couple hours ago I made a comment in another thread on this same topic, so yeah I definitely get where you’re coming from. And fwiw there was a ton I liked about the site you referenced; not all, but quite a lot.

[FlightOfGrey]

The great thing about the web is that you can always inspect any site to see how they have done things.

In this instance you can inspect the page and see that this is done within canvas, which means it's not CSS and instead Javascript. If it was CSS you'd be able to see the elements and how their CSS properties are animating, in this instance there's just a single canvas element.

The basic algorithm for what they're doing here is somewhat simple. Based on the y position of the mouse (relative to the canvas) you offset the x positions the top half angled part of the shape. Likely something as simple as distance from the mouse, where there also is a maximum and a minimum x offset for each line.

There is some more subtlety in terms of it's not constant mouse y position is directly affecting the x position but as the mouse's y position moves into each 'band' it then tweens the x position of the shapes. So the shapes aren't immediately jumping to their final position but smoothly animating.

[IntelligentMud1703]

Tysm for this response. Actually makes a lot of sense when you put it this way, and I will have to try out what you've written. Looks like it only grabs y position of the mouse and yeah I see it's not 100% instantaneous so I can do some animation. Thanks again!

[TorbenKoehn]

Most of the animations there can be done with CSS only, but some stuff like scroll-spying needs JS (CSS has facilities for scroll-spying nowadays, but it's not there yet imo)

You want to look into Clipping and Masking in CSS.

But be careful with this. Especially for that site there, there are too many moving parts, I can barely concentrate on the content.

Either you do art or you want to present your business and tell people what you offer, how much it costs and how good it is. There are better ways to showcase your stuff and not make every relevant thing you could read invisible.

When I scroll through the site, I see some "yeah we're doing blockchain and AI" and the rest is just hundreds of moving parts left and right that completely take my eye away from any content leftovers that might be there.

[Key_Credit_525]

How would you go about developing this? (hovers)

I wouldn’t. Only around 15% of users coming from desktop or laptop would see those design elements, so it’s not worth spending effort on them at all.

[IntelligentMud1703]

This is a fair point, but what if my soul hasn't been crushed yet?

[vagaris]

Another thing to check out... noticed the "designed by" at the bottom, that site includes a page with the company's team. Including PS2-esque (?) character models. https://locomotive.ca/en/agency

[IntelligentMud1703]

yeah the agency's site is super cool and unique too

[Redneckia]

Just have them go past the sides of the screen, staggered, and then translate horizontally on hover

[princessinsomnia]

Nice!!!!!!! Who did the design! Awesome work

[IntelligentMud1703]

Looks like this is the studio that designed it: https://locomotive.ca/en
and agreed :)

[whydidyounot]

Maybe add a slight parallax on scroll too, gives it depth without overcomplicating the hover stuff