CSShake: Some CSS Classes to shake your DOM

http://elrumordelaluz.github.io/csshake/

by Brajeshwar • 12 years ago

138 55 12 years ago

elrumordelaluz.github.io

hnriot• 12 years ago

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

crazygringo• 12 years ago

That's the most beautifully presented, worst idea I've ever seen.

Alterlife• 12 years ago

A modern, customizable, HTML5 version of the the Netscape 5 blink tag. Neat!

edit: Sidenote: I've stumbled upon an interesting Google Easter egg: https://www.google.co.in/search?q=blink+tag

fournm• 12 years ago

Basically. It's really well done, and in the right hands I'm sure could be incredibly useful for small hints (the on-hover use only), but it really concerns me for anyone with epilepsy for almost every other case...

JimmyM• 12 years ago

The slow shake could be nice, I think. Looks excitable rather than just vibrating.

epsylon• 12 years ago

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.

rplnt2• 12 years ago

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.

Already__Taken• 12 years ago

The best smooth scrolling is to not rate limit the speed and remove the inertia effect.

vvvVVVvvv• 12 years ago

[Shaking intensifies]

Zisko• 12 years ago

This genuinely gave me anxiety

austinz• 12 years ago

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...

madeofpalk• 12 years ago

There's the Mac-style horizontal shake on incorrect password, but this seems to lack that precise animation.

Someone else's CSS animation for reference http://jsfiddle.net/MWgnf/23/

brokenparser• 12 years ago

http://cssdesk.com/29aJb

(It appears to work only in Firefox.)

rplnt2• 12 years ago

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

collypops• 12 years ago

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.

wxdeng• 12 years ago

Why I couldn't stop laughing..

mkoryak• 12 years ago

great solution, now all I need is the problem.

userbinator3• 12 years ago

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.

t_tsonev• 12 years ago

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

chrismorgan• 12 years ago

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

MichaelApproved• 12 years ago

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

gkoberger• 12 years ago

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

molf• 12 years ago

Agreed; these animations are actually excellent and can be very useful in cases like those you described.

wingerlang• 12 years ago

I am using shake on action "not available" for one of my project and it fits very well.

mrtksn• 12 years ago

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• 12 years ago

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

userbinator3• 12 years ago

I would prefer flashing or changing colour (slowly); it gets my attention in a rather less irritating way than movement.

Bhel• 12 years ago

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.

m0dest• 12 years ago

I fear for the future

ssiddharth• 12 years ago

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• 12 years ago

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.

EnderMB2• 12 years ago

While I usually agree with comments like these, I think it is key to point out that respect is earned, and that just because some code has been released it doesn't mean that we should be grateful for it being bestowed upon us.

Nowadays, when I release any code I tend to write a description of said code to illustrate how I intend it to be used. If I'm writing something that I believe shouldn't be used on a production project I will explicitly state this. I don't release a lot of code, but I've released a few snippets of untested, hacky code before that has found its way into production sites, and the last thing I want is for people to slate me just because I thought I'd show off what I had written.

This kind of thing happens all the time, almost monthly on Hacker News and Reddit. Everyone would probably be a lot happier if people were to add a basic disclaimer to their code to say "Hey, I've written this for a bit of fun. Don't use it on a user-facing site, okay?" to released code if they don't intend for it to be used on production sites by others. It may not be applicable in this case, but I reckon most cases where people bitch about how shitty some open source code or technique is would be solved if an author would explicitly state the use case for their code.

lwhi3• 12 years ago

There's a difference between (not) being grateful and being overly disparaging.

callesgg• 12 years ago

Does not work quite right on iPad Safari.

inanov• 12 years ago

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

patrickaljord• 12 years ago

This is great. Thanks.

bromagosa2• 12 years ago

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• 12 years ago

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. :)

bromagosa2• 12 years ago

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

kaichanvong• 12 years ago

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

camillomiller• 12 years ago

BLINK 2014

lwhi3• 12 years ago

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.

cooper122• 12 years ago

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.

jbeja• 12 years ago

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

Thiz• 12 years ago

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.

johnatwork• 12 years ago

Will this be the new <marquee>?

ryanSrich• 12 years ago

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

pistle• 12 years ago

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.

habosa• 12 years ago

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.

tiglionabbit• 12 years ago

Lets captchalogue some fruit. http://www.mspaintadventures.com/?s=6&p=002709

computerslol• 12 years ago

I suggest the Harlem Shake be added.

CSShake: Some CSS Classes to shake your DOM

Related Stories