Make red clock bounce in JavaScript!
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Given I'm on http://www.compliancechimp.com

When I hover on the Red Clock, Checkmark, or Blue Share icon,

Then I expect to see the clock bounce like this: http://dl.dropboxusercontent.com/u/9984878/Bountify/akshatpradhan/ComplianceChimp/landing.html

Pull Request only please!

awarded to sguha

Crowdsource coding tasks.

2 Solutions


Here's it:

https://github.com/akshatpradhan/compliance_chimp/pull/81

(Not sure if I put it in the right place, I have little experience with rails)

Good! Just as sidenote, you might want to add the other vendor prefixes (-o, -ms, -moz) as well, I've only considered -webkit for development purposes.
alixaxel over 5 years ago
poacher :). It's a tip for alixaxel, lol!
akshatpradhan over 5 years ago
Haha, it's all good! =)
alixaxel over 5 years ago
updated hahah :)
weslly over 5 years ago
@wesly: Still missing the @keyframes, animation-fill-mode and animation-duration I think.
alixaxel over 5 years ago
@akshatpradhan and @wesly: You should probably just link animate.css since the requirement page uses it as well. The only difference is scale(1.3) vs scale(1.2) and the :hover trigger.
alixaxel over 5 years ago
@alixaxel I added those (after the other prefixes) https://github.com/weslly/compliance_chimp/blob/patch-1/app/assets/stylesheets/home.css.scss
weslly over 5 years ago
@wesly: Actually I was wrong, you don't need any other prefixes for that specific animation. Apologies for the confusion.
alixaxel over 5 years ago
@alixaxel actually, they can be useful on older versions of firefox, opera and ie. They would be added with tools like prefixfree anyway :)
weslly over 5 years ago
@akshatpradhan do you want me to use animate.css to add the effect?
weslly over 5 years ago
@weslly: Indeed. I <3 Lea Verou for prefixfree.
alixaxel over 5 years ago
@weslly Just go with what alixaxel says. Just an FYI, it currently doesn't load on home.css. I have this up on my local dev. Anything I can do to help debug it? Screenshot? Inspector? https://github.com/akshatpradhan/compliance_chimp/pull/81
akshatpradhan over 5 years ago
Winning solution

Just needed to import 'home' in application.css.scss. The icons look fuzzy when they're enlarged, however. I think I can fix it, but I'll need to change the CSS of the panel elements
https://github.com/akshatpradhan/compliance_chimp/pull/93

This is another implementation changing the font-size instead of scaling it, removing the fuzziness
https://github.com/akshatpradhan/compliance_chimp/pull/94

Update: I changed PR #93 to scale down instead of up so that it doesn't look fuzzy anymore. I think that's now the best bet.

Interesting! Could you push another commit to show me how that would look?
akshatpradhan over 5 years ago
hmm, I think my vote is on pr/93. What do you think?
akshatpradhan over 5 years ago
I changed PR #93 to remove fuzziness by scaling down
sguha over 5 years ago
I think I'm starting to like pr/93 more, nice job! Let me rebase and merge.
akshatpradhan over 5 years ago
View Timeline