如何为响应式网站创建交互式（可点击）动画？

【问题标题】：How to create an interactive (clickable) animation for responsive website?如何为响应式网站创建交互式（可点击）动画？
【发布时间】：2015-07-08 23:59:12
【问题描述】：

任何人对可以在悬停或单击时显示文本的对象动画有建议吗？正在寻找类似的东西：

试图将这些水晶做成可交互的对象。 Sample mockup website here.

【问题讨论】：

codepen.io/sdras/pen/jEjRwo

标签： javascript jquery canvas css-animations paperjs

【解决方案1】：

用 div 包围您的动画，然后绑定到 jquery mouseover 和 mouseout 事件以添加和删除包含所需文本的 css 类。像这样：

html:

<div class="crystalDiv">
  <!-- This contains an image of a crystal. You can have as many as you want -->
</div>

css:

.crystalHover:after{
    content:"Whatever text";
    position: absolute;
    /* Use top, bottom, left, right to position - it will relative to the crystal div*/
}

javascript：

$('.crystalDiv').on('mouseover',function(e) {
    $(this).addClass('crystalHover');
});
$('.crystalDiv').on('mouseout',function(e) {
    $(this).removeClass('crystalHover');
});
// You can do the same thing with click event if you want

【讨论】：