Making Magic with WebSockets and CSS3

Hélio Dolores
Jan 10, 2017 · 5 min read
Image for post
Image for post

Bringing the Magic Back with … a Shopping App? Seriously?

Just a few months ago, a few colleagues and I participated in a hackathon. The goal was to reinvent the way people shop for clothing.

Image for post
Image for post

Unveiling the Magic Trick

I’m going to show you how we did this. And I’ll be using a very appropriate, classic magician’s tool: a deck of playing cards:

Real-time Communication with WebSockets

The internet we know was mainly built using the HTTP protocol, which relies on a simple request-response paradigm. This means that a typical web application won’t receive any information it did not explicitly request.

Optical Illusions with CSS3

We can make animations smooth as butter with CSS3 by following the best practices. For this simple trick and illusion, both devices have the same animation effect, but they are moving in opposite directions.

Going the Extra Mile

After everything’s up and running, it’s time to do some tweaking. The video showed the cards appearing to drop on the table from the bottom. By animating a reduction of size (scale) and using a shadow, it’s possible to get this more realistic effect.

OutSystems Engineering

An Engineering blog written by engineers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store