Throw Your Letters – A Fantastic Input Effect with JS & CSS

Today’s inspiration is coming from Maneesh Chiba, a multimedia designer from Johannesburg, South Africa. He likes to experiment with code and creates bold and eye-catchy designs.

Throw your letters is a lovely JS & CSS experiment that will transform an ordinary input field to an entertaining one. The idea is when you type in the input field, the same letters that you typed in start to jump and dance around the screen.

Some would argue if this effect is needed as it is distracting and not useful but I believe that such experiments (solutions) are quite enriching for the web experience and on certain projects such effects can be quite beneficial in children websites or ones where the user needs to focus on information that is typed.

Here is the effect itself. Type in to see it action. A copy of this snippet is available for download below.

See the Pen Throw your letters by Maneesh (@maneeshc) on CodePen.

Download Throw Your Letters Snippet


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *