having or characterized by peculiar or unexpected traits or aspects.
quirky-ux injects your boring website with some character and glitter.
Browse through the example gallery to get inspired and take what you like.
quirky-ux is written in pure JavaScript and has no dependencies.
Why
?
Why would you make a website totally unprofessional with these gimmicks you ask?
While organizing UX Day Graz 2017
I had an opportunity to attend the talk of Vitaly Friedman
(examples of successful quirky websites begin at 17:00).
I really liked the part where he points out the lack of character in most
modern websites. He continues to show that websites with a lots of character
which break best practice guidelines and design rules are able to capture
audience better and produce better results (turnover, traffic, user retention, etc.).
This stuck with me so I decided to put all of my ideas for quirky websites
in a reusable package. Enter quirky-ux.
·
typewriter ⌨️
Typewriter component will make the elements marked with .rewrite editable.
Whenever a user changes this content, the typewriter will correct it back
while making the typewriter clicky sounds. A paragraph bellow is marked with
.rewrite class, try to delete or change one of it's words and watch the
typewriter in action.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a euismod sapien.
Praesent feugiat tincidunt auctor. Sed sagittis ligula quam, id congue tellus efficitur nec.
Nam ornare enim non magna placerat, quis fermentum... DELETE A FEW WORDS HERE!
Easily customize: by simply changing the font and audio you can transform the typewriter to scribe! ✒️
Lorem ipsum dolor sit amet...
·
paparazzi 📷
Paparazzi component will make the elements marked with .flash-wrap
have an occasional camera flash (or lightning) effect.
Use it in on a gossip site like example bellow maybe?
Fashion scandal drama!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a euismod sapien.
Praesent feugiat tincidunt auctor.
🤩 👯️ 💋 😱
Customize the parameters to simulate the light flicker effect, common in
🦇 horror ambient 🦇!
Don't worry, the click events are passed right through the flash overlay so
you can use even super slow decay times and your website will still function properly.
·
b
oo
g
i
e
🎉
Boogie component allows you to make specific elements wiggle, jiggle and boogie all night long.
For rotational wiggle movement apply .wiggle or .wiggle-r classes.
To apply a vertical boogie moves just use .wiggle-v or
.wiggle-v-r.
Tweak the parameters to get many different behaviors.
🐒
·
🚧 more comming soon
·
How to use?
The effects are implemented in components.
Copy the component of the effect you want to use.
For the usage examples see source of this page.