Javascript 框架可以轻松地向网站添加 dynamic/hover 效果

Question

我想制作一个网站，当您向下滚动页面时，它有很多悬停效果或效果。就像您查看此页面：http://eacykler.dk/ - 然后将鼠标悬停在页面上的某些图像上。我拒绝相信，有人坐下来一点一点地编码 JavaScript。所以我想知道是否存在一些 library/framework/gathering/i-don 不知道应该叫什么的东西，这使得在 HTML/CSS 中实现动态效果变得容易。我想象的是这样的：

静态版本：

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

动态版本：

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

...我希望 class-names 说明不同的元素应该做什么。因此，不必写 JavaScript，我应该只查找这个给定 library/framework/gathering/i-don't-know-what-it-should-be-called 给我的不同 functions/options，然后插入那些 class-names 以获取执行此操作的元素。

它存在吗？如果没有 - 那么我如何以最快和最简单的方式实现这些效果？

Answer 1

这一切都可以使用 CSS 转换来完成，如下所示：

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

在此处查看工作 fiddle：http://jsfiddle.net/pjdz9ohw/1/

Javascript 框架可以轻松地向网站添加 dynamic/hover 效果

Javascript framework to easily add dynamic/hover effects to website

html

javascript

css

jquery

jquery-events