
CSShake: Some CSS Classes to shake your DOM - Brajeshwar
http://elrumordelaluz.github.io/csshake/
======
crazygringo
That's the most beautifully presented, worst idea I've ever seen.

~~~
epsylon
Worse than the idea, the page removes the scroll bar, and activates some
custom-made, super-slow smooth-scroll. (Which is the first thing I deactivate
on a fresh Firefox install. I've never understood the appeal of smooth scroll
on a desktop, where it makes scrolling with the mouse wheel a huge PITA...)

Edit: I just realized, it's a vertical carrousel, in its full glory with
almost invisible next and prev buttons, and its 8x8 pixel navigation buttons.
This summarizes pretty much everything that's wrong with modern web design.

~~~
rplnt
> Which is the first thing I deactivate on a fresh Firefox install. I've never
> understood the appeal of smooth scroll on a desktop, where it makes
> scrolling with the mouse wheel a huge PITA

No it does not. It's MUCH better experience. Maybe firefox has a crappy
implementation of it? I've been using smooth scroll for as long as I can
remember (except on linux where it was slow) and it is really that much
better. Jumping randomly and trying to figure out where you were? Better than
naturally move the view? Really?

That being said, I agree with you that this site is broken. I can't use pg-
up/down or home/end, yet the site acts as if it were a regular vertical page.

~~~
userbinator
It's probably a subjective thing, like with font rendering using
antialising/subpixel antialiasing. I personally can't stand "smooth" scrolling
either, I'd describe it more as sluggish and blurry instead of snappy and
sharp.

------
gkoberger
Everyone seems to agree this is bad -- and in the wrong hands, it definitely
could be.

However, I can think of some great uses for it:

\- Very similar to iPhone's "delete", which most people are familiar with. It
means "Hey, I can be dragged"

\- Could be good for refusing to do an action. Apple shakes the login box when
you use the wrong password.

\- A tiny notification icon could shake every few seconds to get someone's
attention.

\- Some logos (a car?) could look cool shaking for a second or two (either
right away, or on hover).

\- In tutorials, to show a button/element that the tutorial is talking about

~~~
mrtksn
I agree, some of these effects are appropriator for negative ore attention
seeking reactions.

A checkbox must be checked before submitting the form? Shake the ckeckbox when
the user clicks submit.

Log-in failed? shake the log-in form.

~~~
program
In fact Wordpress shake the form on /wp-admin/ if the login failed.

------
ssiddharth
Wow. Someone creates something and open sources it as it might be useful for
others as well.

And instead of keeping our mouths shut, or better yet, say thanks, we go on
about this being a bad idea. Talk of ungrateful.

Open source projects don't need a higher, mightier directive. He/she has put
his work out there. Show some respect.

~~~
choult
My reading of the comments here are that most people are saying "Looks great,
but why?"

We can't just venerate something because it's been "given to the people" \- we
need to give OS just as much critical treatment as closed source. Otherwise,
the community becomes a sycophantic collection of yes men, and those outside
of it can't treat the products in the movement seriously in comparison to
commercial offerings.

Criticism in its constructive form is vital for improvement, regardless of the
intentions of someone putting something out there.

------
austinz
DOM element intensifies!

Are there any use cases where this might be practical? iOS has the app icons
quaking in fear when you tap-hold on them, although the effect is somewhat
different...

~~~
brokenparser
[http://cssdesk.com/29aJb](http://cssdesk.com/29aJb)

(It appears to work only in Firefox.)

~~~
rplnt
Works in Opera as well (the normal one, not the webkit crap).

------
lwhi
Come on people. This provides a way to provide an animation effect. There are
many cases where animation can be used to provide feedback to help reinforce
the result of an action. This could be used to provide such feedback .. there
is far too much negativity on this page.

~~~
cooper12
Its because we're seeing them all at once, and all in their shaking state.
Normally these would be used sparsely and would only be shaking on certain
actions.

------
habosa
I like it, even though I may be in the minority. I think this could be great
for wizards/tutorials where you want to let the user explore but give them a
little hint after some time. I really like UIs that explain themselves.

Of course, there is potential for abuse. But the same could be said for most
of jQuery's animations or any other such library.

------
Thiz
To the author, great job.

It shows attention to detail and finesse, you took one simple idea and went
above and beyond making multiple implementations for different use cases,
presented in the most exquisite and pleasant way.

Code and beauty. Great skills to have.

------
collypops
I could see this being put to good use in interface tutorials, to subtly hint
at what new users should be interacting with to progress, without resorting to
lightboxes, tooltips and buttons.

------
kaichanvong
Did anyone feel sick after looking at this? I get motion sickness quite easily
and this affected me a lot.

------
pistle
This is great for when you pop up a pay wall. You can shake all the content
behind the pay wall message to enhance the focus.

When someone makes a mistake, I like to pick it up and shake it in their face.
This has a soothing effect.

------
userbinator
When the first thought that came into my head was "DO NOT WANT!", I can
guarantee some advertiser somewhere is going to find a way to make this even
more irritating than it currently is.

And everyone wonders why I'm still using as my main browser one that doesn't
support CSS animations... and I do have blink and marquee filtered out.

------
Bhel
The magic ball says:

\- It will be abused by ads, and annoying "CLICK HERE AND SUBSCRIBE TO MY
SHITTY BLOG!" messages.

\- If it ever gains popularity, all major pop-up/ad-block/no-script
applications will add a couple lines to remove it.

------
Zisko
This genuinely gave me anxiety

------
tiglionabbit
Lets captchalogue some fruit.
[http://www.mspaintadventures.com/?s=6&p=002709](http://www.mspaintadventures.com/?s=6&p=002709)

------
bromagosa
Just a linguistic tip:

«mucho more information» sounds really bad. Information in Spanish is
Información, which has female gender. Thus, you should better write «mucha
more information».

~~~
lutusp
> Just a linguistic tip: «mucho more information» sounds really bad.
> Information in Spanish is Información, which has female genre.

Just a linguistic tip: you mean gender, not genre. :)

~~~
bromagosa
Thanks, English is not my native language, as you may have noticed :P

------
jbeja
The best thing ever!!!. Could be useful to make a alarm app.

------
ryanSrich
For some reason I can't stop laughing at this...

------
mkoryak
great solution, now all I need is the problem.

------
chrismorgan
Alas, all that fanciness presented in a website that is completely unusable
below around 1024x768.

~~~
MichaelApproved
It's frustrating to use on mobile. Hard to move through each section. It kept
jumping back to the top for me.

------
wxdeng
Why I couldn't stop laughing..

------
patrickaljord
This is great. Thanks.

------
t_tsonev
Great, we can now have Miley Cyrus twerking in pure CSS. See:
[http://www.youtube.com/watch?v=rYcg1ot1iWs](http://www.youtube.com/watch?v=rYcg1ot1iWs)

------
johnatwork
Will this be the new <marquee>?

------
inanov
you never know when you will need this. i can see people trying to remember
that silly css library's name.

------
callesgg
Does not work quite right on iPad Safari.

------
computerslol
I suggest the Harlem Shake be added.

------
m0dest
I fear for the future

------
camillomiller
BLINK 2014

------
hnriot
just because it's possible, doesn't mean it's a good idea!

