CSShake: Some CSS Classes to shake your DOM(elrumordelaluz.github.io)
elrumordelaluz.github.io
CSShake: Some CSS Classes to shake your DOM
http://elrumordelaluz.github.io/csshake/
30 comments
That's the most beautifully presented, worst idea I've ever seen.
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
edit: Sidenote: I've stumbled upon an interesting Google Easter egg: https://www.google.co.in/search?q=blink+tag
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.
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.
> 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.
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.
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.
The best smooth scrolling is to not rate limit the speed and remove the inertia effect.
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...
The slow shake could be nice, I think. Looks excitable rather than just vibrating.
[deleted]
[Shaking intensifies]
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
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
I would prefer flashing or changing colour (slowly); it gets my attention in a rather less irritating way than movement.
Agreed; these animations are actually excellent and can be very useful in cases like those you described.
I am using shake on action "not available" for one of my project and it fits very well.
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.
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.
In fact Wordpress shake the form on /wp-admin/ if the login failed.
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.
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.
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.
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.
[deleted]
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.
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.
There's a difference between (not) being grateful and being overly disparaging.
Absolutely, and people shouldn't be overly negative towards another persons work.
Decent manners towards other human beings aside, my main point is that a lot of the negative criticism we see towards released code and tools on communities like HN and Reddit would disappear if authors would explicitly state the intended use case for their work.
Decent manners towards other human beings aside, my main point is that a lot of the negative criticism we see towards released code and tools on communities like HN and Reddit would disappear if authors would explicitly state the intended use case for their work.
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...
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...
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/
Someone else's CSS animation for reference http://jsfiddle.net/MWgnf/23/
http://cssdesk.com/29aJb
(It appears to work only in Firefox.)
(It appears to work only in Firefox.)
Works in Opera as well (the normal one, not the webkit crap).
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.
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.
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.
Of course, there is potential for abuse. But the same could be said for most of jQuery's animations or any other such library.
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.
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.
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.
Did anyone feel sick after looking at this? I get motion sickness quite easily and this affected me a lot.
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.
When someone makes a mistake, I like to pick it up and shake it in their face. This has a soothing effect.
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.
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.
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.
- 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.
This genuinely gave me anxiety
Lets captchalogue some fruit.
http://www.mspaintadventures.com/?s=6&p=002709
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».
«mucho more information» sounds really bad. Information in Spanish is Información, which has female gender. Thus, you should better write «mucha more information».
The best thing ever!!!. Could be useful to make a alarm app.
For some reason I can't stop laughing at this...
great solution, now all I need is the problem.
Alas, all that fanciness presented in a website that is completely unusable below around 1024x768.
It's frustrating to use on mobile. Hard to move through each section. It kept jumping back to the top for me.
Why I couldn't stop laughing..
This is great. Thanks.
Great, we can now have Miley Cyrus twerking in pure CSS.
See: http://www.youtube.com/watch?v=rYcg1ot1iWs
Will this be the new
<marquee>?
you never know when you will need this. i can see people trying to remember that silly css library's name.
Does not work quite right on iPad Safari.
I suggest the Harlem Shake be added.
I fear for the future
BLINK 2014
just because it's possible, doesn't mean it's a good idea!