Javascript framework to easily add dynamic/hover effects to website

Issue

I would like to make a website that has a lot of on-hover effects or effects when you scroll down the page. Like if you look at this page: http://eacykler.dk/ - and then hover on some of the images on the page. I refuse to believe, that someone sat and coded that JavaScript, bit by bit. So I was wondering if some library/framework/gathering/i-don't-know-what-it-should-be-called exists, that makes it easy to implement dynamic effects in HTML/CSS. I imagined something like this:

STATIC VERSION:

<div>
<a href="#">
<img src="/foo/bar.jpg" />
</a>
</div>

DYNAMIC VERSION:

<div class="bg-fades-to-black-in-10-sec">
<a href="#" class="font-color-fades-to-white-in-10-sec">
<img src="/foo/bar.jpg" class="spins-30-degrees-and-zooms-20-percent-in-10-sec" />
</a>
</div>

... I hope the class-names illustrates, what the different elements should do. So that instead of having to write JavaScript, then I should just lookup the different functions/options that this given library/framework/gathering/i-don't-know-what-it-should-be-called offers me, and then insert those class-names to get the elements to do it.

Does it exist? If not - then how do I achieve these effects in the fastest and easiest way?

Solution

this can all be done using CSS transitions like so:

.spins-30-degrees-and-zooms-20-percent-in-10-sec {
    width:100px;
    transform:rotate(0deg);
    transition: all 10s;
}
.spins-30-degrees-and-zooms-20-percent-in-10-sec:hover {
    width:120px;
    transform:rotate(30deg);
}

.font-color-fades-to-white-in-10-sec {
    color:#000;
    transition: all 10s;
}
.font-color-fades-to-white-in-10-sec:hover {
    color:#fff;
}

see working fiddle here: http://jsfiddle.net/pjdz9ohw/1/

Answered By - Nick Briz