即贴即用的鼠标经过图像效果

时间:2021-2-20 作者:admin

Image Hover Effects ?

无需 Javascript,一套你一直想找的即贴即用的鼠标滑过图片效果。
快速体验 →

1. 诞生背景

写页面的时候,特别是营销页,官网,博客首页这种纯展示的页面时,我们通常需要上面这种效果。

根据 MDN 中 HTM5 语义化规范, <figure> 用作网页插图,<figcaption> 用网页插图中的文本描述:

<figure>
  <img src="https://www.geekschool.org/wp-content/uploads/2021/02/1613921432.395193.png" />
  <figcaption>
    Hello World ! ?
  </figcaption>
</figure>

使用 CSS3 中的 transform 形变属性和 transition 过渡属性就能轻易实现:

figure {
  position: relative;
  display: inline-block;
  margin: 0;
  max-width: 100%;
  background-color: #2266a5;
  color: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

figure > img {
  vertical-align: top;
  max-width: 100%;
}

figure figcaption {
  background-color: #135796;
  padding: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

figure,
figure:before,
figure:after,
figure *,
figure *:before,
figure *:after {
  box-sizing: border-box;
  transition: all 0.35s ease;
}

/** fade **/
figure figcaption {
  opacity: 0;
}

figure:hover figcaption {
  opacity: 1;
}

figure:hover > img, figure:hover figcaption{
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

为何不打包成类似 xx.min.css 库 ?

因为大部分应用场景下,我们仅仅需要 1 个或 2 个效果,没有必要引入一整个 css 库,制作这个项目的初衷就是,为大家提供一个「即贴即用,用完就走,高度定制」的 CSS 效果片段。

如果你需要在项目里引入一个 CSS 库,那么请使用 imagehover.io 或者 Izmir 库。

2. 分类转场组合动效

有的朋友可能好奇酷炫的分类切换效果是怎么实现的?

vue 官网,进入/离开 & 列表过渡章节,请参考 flip 交错过渡效果 →

<transition-group name="cell">
  // your block ...
</transition-group>

使用 lodash 库中的 _.shuffle 进行乱序排列:

_.shuffle(effects)

使用 es6 中内置的 Array.prototype.sort() 排序,切换分类时将带有同一前缀的效果冒泡至前排:

.sort((a, b) => b.name.includes(id) ? 1 : -1)

4. 白天/夜间主题

Darkmode 是目前比较流行的设计元素,网页支持切换白天/夜间主题,由于我个人比较偏向使用 TailwindCSS 这个框架,所以项目里也直接使用了这个生态的插件 tailwindcss-theming 实现这个以功能。

对 Darkmode 感兴趣的朋友可以看这个 Codepen 示例,自己用 CSS :root { --dark: #111111; } 变量实现一个。

另一个比较创新的方案是 Darkmode.js,它是通过设置页面的混合色值实现的,不过对复杂的页面效果不是很理想。

5. Github Page

众所周知,前端同学做完一个作品,可以免费部署到 Github Page 上,供大家预览。但问题是,国内访问 Github Page 速度很慢。难道我们要为了这些 html、css、js、img 静态资源去购买服务器吗?

这里推荐一个比较好的办法,修改 vue.config.js 将生产环境上的静态资源设置成 CDN:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
  ? 'https://cdn.jsdelivr.net/gh/turkyden/image-hover@gh-pages/'
  : '/'
}

当你运行 vue cli 命令 yarn build 就能打包出 build/index.html 如下:

<body>
  <div id=app></div>
  <script src=https://cdn.jsdelivr.net/gh/turkyden/image-hover@gh-pages/js/chunk-vendors.ebbcc743.js></script>
  <script src=https://cdn.jsdelivr.net/gh/turkyden/image-hover@gh-pages/js/app.5ecdb9ff.js></script>
</body>

jsdelivr 在中国大陆是拥有备案的,因此大家不必担心被墙的问题,而且在国内节点还是很多的,速度非常快。

6. CI/CD 自动化

开发环境和生产环境的代码不应该混到一起存放,一般情况下:

  • master 主分支:存放源代码,包含所有源代码的资源文件;

  • gh-pages 分支:存放编译后的代码,也就是 master 分支中的 /build 文件夹下所有资源;

那么如何让这一过程自动化呢? Github Action 提供了一整套解决方案,这里使用到的如下:

请看项目中的 .github/workflows/ci.yml

name: build-and-deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Build and Deploy
      uses: JamesIves/github-pages-deploy-action@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build
        BUILD_SCRIPT: npm install && npm run build

7. 总结

希望大家结合自己的日常工作,切记不要重复造轮子,发挥自己的想象力,产出作品吧。仔细想一想,做一个项目,即使是纯前端的项目,也有这么多可以玩的。如果一个工具对他人有帮助,那就是有价值的。加油,给这个世界带来不一样的颜色吧!

最后,感谢 imagehover.io 原作者和整个开源社区。欢迎 Github Star ✨ 收藏噢!

8. 参考资料

[1] Pure CSS Image Hover Effect Library

[2] Izmir – An image hover mini CSS library

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。