title: Javascript framework to easily add dynamic/hover effects to website
body: <p>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: <a href="http://eacykler.dk/" rel="nofollow noreferrer">http://eacykler.dk/</a> - 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:</p>
  <p>STATIC VERSION:</p>
  <pre><code>&lt;div&gt;
  &lt;a href=&quot;#&quot;&gt;
  &lt;img src=&quot;/foo/bar.jpg&quot; /&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>DYNAMIC VERSION:</p>
  <pre><code>&lt;div class=&quot;bg-fades-to-black-in-10-sec&quot;&gt;
  &lt;a href=&quot;#&quot; class=&quot;font-color-fades-to-white-in-10-sec&quot;&gt;
  &lt;img src=&quot;/foo/bar.jpg&quot; class=&quot;spins-30-degrees-and-zooms-20-percent-in-10-sec&quot; /&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>... 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.</p>
  <p>Does it exist? If not - then how do I achieve these effects in the fastest and easiest way?</p>