Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by nfs
nfs
35,526 Points

How is the animation in http://veiliux.com/ made like that?

You see when I hover over the triangles, they interact.. how is it done like that? not only that, as I scroll down, how is that blue line moving from one end to the other end? One more question, for such an amazing website like that, why is the connection with this site not secure?

izzy goldman
izzy goldman
12,542 Points

you can always see under the hood what they are using. in the chrome developer tools mac = command shift C seems like thy are using multiple animation.css files

1 Answer

Jon Mirow
Jon Mirow
9,864 Points
Jon Mirow
Jon Mirow
9,864 Points

Hi there, as Izzy says, the Triangles are being animated by CSS, as you say the animations are triggered on :hover.

The blue bar appears just to be a div fixed to the top of the viewport with another div inside it. That div is having it's width constantly updated by the amount you've scrolled down the page Their implimentation is pretty advanced, but you should be able to recreate something similar with jQuery's scrollTop() function to get the current scroll position.