Designer News
Where the design community meets.
↵
A website dedicated to a website deconstructions. New post every week, you're in charge.
over 9 years ago from Petr Tichy, Front-end web developer
Jesse Dobbelaere, over 9 years ago
Interesting website! I live nearby but I've never heard of them. I can't answer your questions, but I do know that I've seen those animations on Codrops:
- The red box mouse hover thingy is inspired by this codrops demo
- The detail page of a case loads with a stretching box effect. I think they got it from this codrops demo (lazy stretch).
It's weird that they used video on the homepage. I've seen some cool animations with canvas, like on this one-page website. They use PNGVideo which seems like a better solution than using animated gif.
Taylor Van Orden, over 9 years ago
I knew I had seen that demo'd somewhere. It looks better on this site though - the solid color has so much more impact.
That red loading / progress bar is from [http://tympanus.net/Development/CreativeLoadingEffects/](codrops) as well. I mean, it's been done a ton of places since Youtube implemented it. Looks like we know where that team spends most of their time. :D
I've been sorting through this front-end code / design on and off for an hour now. It's not perfect but man...it does some cool stuff!
http://vintageproductions.eu/
Still on my list of unanswered questions:
How did they do that animation on the homepage? (A: it's a video - not a gif or css3/js animation)
Why did they chose video over gif? Can you even make gifs that long / high quality? I think you can? Maybe not? Could you hypothetically do that as a CSS3 animation?
How did they get the color of the video on the homepage to perfectly match the web background? Red is an insanely fickle color, especially when moving from different programs. Print / digital / video / compression / conversion to mp4 / webm etc.
Is there an A/B test on click rate for the case studies? If so, is the click rate down at all due to the highly entertaining red box that follows your cursor?