如何用 CSS Animations 实现滑动图片展现文字的效果入门知识_效果小白教程

在这篇文章中,我希望能带领大家了解一下 CSS animation property ,以及详细地解释我的个人网站 中的一个效果:让文字在移动的物体后出现。如果你想要看最后的成果,这里有一个 例子 。我们将从下面这里开始:这里请查看 Jesper Ekstrom 的 Revealing Text Animation Part 4 – Responsive 案

如何用 CSS Animations 实现滑动图片展现文字的效果入门知识

在这篇文章中,我希望能带领大家了解一下 CSS animation property ,以及详细地解释我的个人网站 中的一个效果:让文字在移动的物体后出现。如果你想要看最后的成果,这里有一个 例子 。

如何用 CSS Animations 实现滑动图片展现文字的效果入门知识_效果小白教程

我们将从下面这里开始:

这里请查看 Jesper Ekstrom 的 Revealing Text Animation Part 4 – Responsive 案例。

即使你对这个效果不是非常感兴趣,这仍将是一个可以扩展你 CSS 知识的好练习,你可以从这个效果开始创建属于你自己的动画效果。就我而言,深入地学习研究动画,让我对自己的 CSS 能力有了更多的自信,并且让我更加有想象力,也让我对于整个前端开发都更加感兴趣了。

准备好了么?让我们一起开始吧。

步骤一:标记你的主元素

在我们开始制作动画效果之前,首先让我们创建一个包含了整个视口(viewport)的父元素。在这个元素中,我们在两的 div 中分别添加文字和图片,以方便之后的自定义。HTML 将如下:

<div class="container"> 
  
  <div class="image-container">
  <img src="https://jesperekstrom.com/wp-content/uploads/2018/11/Wordpress-folder-purple.png" alt="wordpress-folder-icon">
  div>
  
  <div class="text-container"><h1>Animationh1>
  div>div>复制代码

我们将使用一个靠谱的 转换小技巧 ,来在的父元素中,用 position: absolute; 使两个 div 在父容器的水平和垂直方向上都居中。因为我们希望我们的图片显示在文字之前,这里我们给图片一个更大的 z-index 值。

/* 父元素占据整个页面。 */.container {  width: 100%;  height: 100vh;  display: block;  position: relative;  overflow: hidden;
}/* 内含图片的 div  *//* 居中小技巧:https://css-tricks.com/centering-percentage-widthheight-elements/ */.image-container {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  z-index: 2; /* 确保图片在上 */}/* 第一个 div 中的图片 */.image-container img {  -webkit-filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));  filter: drop-shadow(-4px 5px 5px rgba(0,0,0,0.6));  height: 200px;
}/* 包括将要被显示出来的文字的 div *//* 同样的居中方法 */.text-container {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  z-index: 1; /* 将此 div 置于图片容器之下 */
  margin-left: -100px;
}复制代码

我们在整篇文章所有的例子中都没有保留浏览器前缀,但如果你在生产环境中使用这些效果,请务必考虑加上前缀。

现在我们的例子应该长这样,基本上来说就是图片元素在文字元素之上。

这里请查看 Revealing Text Animation Part 1 – Mail Elements 案例。

步骤二:将文字藏在一个 div 后面

为了使我们的文字能从左到右显示,我们将在我们的 .text-container 中添加另一个 div。

  
  <div class="text-container"><h1>Animationh1><div class="fading-effect">div>
  div>
  复制代码

然后加入下列 CSS 属性并给其赋值:

.fading-effect {  position: absolute;  top: 0;  bottom: 0;  right: 0;  width: 100%;  background: white;
}复制代码

正如你所见,这个 div 的背景是白的,可以融入父元素中,而文字则藏在它后面。

如果我们试一下改改这个 div 的长度,文字就会开始出现。你可以在我们下面的例子中来尝试一下:

这里请查看 Revealing Text Animation Part 2 – Hiding Block 。

还有另外一个不需要添加额外有背景的 div 就可以达到同样效果的方法。我会在文章后面中介绍它。

步骤三:定义 animation keyframes

下面我们将开始有趣的部分了!我们将使用 animation property 和它的 @keyframes 功能来开始帮我们的目标加入动画效果。让我们先来创建两个不同的 @keyframes ,一个给我们的图片,一个给我们的文字。代码如下:

/* 把图片从左侧(-250px)滑到右侧(150px)*/@keyframes image-slide {
  0% { transform: translateX(-250px) scale(0); }
  60% { transform: translateX(-250px) scale(1); }
  90% { transform: translateX(150px) scale(1); }
  100% { transform: translateX(150px) scale(1); }  
}/* 把目标缩小至消失(100% 到 0%)来滑动文字 */@keyframes text-slide {
  0% { width: 100%; }
  60% { width: 100%; }
  75%{ width: 0; }
  100% { width: 0; }
}复制代码

我建议将所有的 @keyframes 添加到 CSS 文件的顶端,这样的文件的结构会更好,当然这只是我的个人喜好。

我只使用 @keyframes 很小一部分百分比值(主要是从 60% 到 100%)的原因是我选择在相同的时间段对两个物体设置动画,而不是为它们添加一个 animation-delay 。这只是我的个人喜好。如果你选择和我一样的方法,一定记得要为 0% 和 100% 设值;否则,动画效果就会开始循环或者是造成一些很奇怪的结果。

为了在我们的 class 中启用 @keyframes ,我们需要在 CSS 属性 animation 上调用我们的动画名称。例如,要将 image-slide 加入图片元素上,我们得这样做:

.image-container img {  /* [动画名称] [动画时间] [动画变形方法] */
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
}复制代码

@keyframes 的名称的使用就像创建一个 class 一样。换句话说,这里的动画名称是什么并不重要,只要确保你在想要使用该动画的元素上使用一样的名称就可以了。

如果这里的 cubic-bezier 部分让你感到头大,那就快看看 Michelle Barker 的 这个帖子 。她深度的解释了这个话题。如果只是想要达到本文演示的目的,我觉得我这么说就够了:这是一个为物体的整个移动过程创建一个自定义动画曲线的方法。 cubic-bezier.com 网站是一个很好的可以帮助你生成这些值(而不是靠猜)的网站。

我们之前提及了我们希望避免循环动画。我们可以通过使用 animation-fill-mode 子属性来强行让物体在动画进度到达 100% 后就不再移动。

.image-container img {  animation: image-slide 4s cubic-bezier(.5,.5,0,1);  animation-fill-mode: forwards;
}复制代码

目前为止一切都很好!

这里请查看 Revealing Text Animation Part 3 – @keyframes 。

步骤四:实现响应效果(responsiveness)

因为动画是基于固定的大小(像素),改变视口的宽度会造成元素们偏离,这不利于我们根据元素的位置来隐藏和展现它们。我们可以在不同的 media queries 上创建多个动画来解决这个问题(这也是我最初的做法),但是一次处理这么多的动画可不是什么好玩的事。我们可以使用相同的动画,通过在特点的断点改变它的属性来解决这个问题。

例如:

@keyframes image-slide {
  0% { transform: translatex(-250px) scale(0); }
  60% { transform: translatex(-250px) scale(1); }
  90% { transform: translatex(150px) scale(1); }
  100% { transform: translatex(150px) scale(1); }
}

/* 改变动画的参数来适应大至 1000 像素的宽度 */
@media screen and (max-width: 1000px) {
  @keyframes image-slide {
    0% { transform: translatex(-150px) scale(0); }
    60% { transform: translatex(-150px) scale(1); }
    90% { transform: translatex(120px) scale(1); }
    100% { transform: translatex(120px) scale(1); }
  }
}复制代码

这样就可以啦。都是响应式哒!

这里请查看 Revealing Text Animation Part 4 – Responsive 。

替代方法:使用文字的动画而非不透明的 div

我在之前保证过我会介绍一种不一样的隐藏文字方法。我们现在来介绍它。

与其使用一个全新的 div ─

,我们可以使用一个小技巧实用化 background-clip

将背景的颜色通过文字透出来:

.text-container {  background: black;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;
}复制代码

透明的文字允许背后背景的颜色渗透过来,可以很有效的隐藏文字。并且,因为是用背景隐藏文字,我们可以改变背景的宽度并观察文字如何根据所给定的宽度被切割。这同样使得给文字添加线性渐变颜色,甚至是背景图片成为可能。

我没有在之前的演示中使用这个方法,因为它不能很好地兼容 IE(你看,代码里有 -webkit 这个浏览器前缀)。在我们实际演示中使用的方法,果把文字换成图片或者任何元素,仍然有效。

非常简单的小动画,是不是?它相当的细微,并且可以你的 UI 元素添色。例如,它可以用作揭示解释类文字甚至图片的标题。或者,可以用一点 JavaScript 代码来监听点击或滚动事件,从而触发动画,使网页的交互方式更丰富。

对我们的动画有任何的问题嘛?有一些让它们变得更好的建议嘛?快发在下面的评论中来告诉我吧!

海计划公众号
(0)
上一篇 2020/03/26 23:35
下一篇 2020/03/26 23:35

您可能感兴趣的内容

  • 程序员出路攻略教程年过35岁的IT程序员都去哪了?_程序员菜鸟攻略

    有人说程序员只能吃青春饭,企业在招聘时会很在意程序员的年龄,大龄程序员一旦离职找工作就会变得艰难。面对年龄很多程序员都表示束手无策。其实,程序员和其他职业一样,干的越久技术越熟练,经验自然更丰富。如果你的年龄和你的薪资不相符,你就应该考虑是不是年龄上去了能力却没上去,你所求的薪资和你要求的岗位,要让企业觉得你值这个价,自然不会被淘汰。 如今程序员越来越多,应

    2020/04/03
  • 理解css中Grid布局,在项目中如何实现grid页面布局入门攻略_布局基础知识教程

    简介CSS中Grid是一种二维网格式布局方式。我们常规使用table、float、position、inline-block等布局,但它们遗漏了很多功能,例如垂直居中。后来css3中flexbox的出现解决了很多布局问题,但是它也是一维布局,而不是复杂的二维布局,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处1.布局清晰明了,摆脱了模板

    2020/04/06
  • 了解HTML及运行原理使用教程_html基础知识入门

    了解HTMLHTML(HyperText Marked Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言。我们在浏览网页时看到的一些丰富的影像、文字、图片等内容都是通过HTML表现出来的。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台,一直被用作WWW(万维网)的信息表示语言。对于网站软件开发人员来讲,如果不

    2020/03/26
  • npm私有仓库 配置verdaccio在docker环境菜鸟教程下载_Docker使用帮助

    前端开发过程中,少不了自己封装一些通用的包,但又不想放在公共的平台,所以搭建一个npm私有的仓库是很有必要的。在这里简单介绍如何使用 verdoccio 在docker环境下的配置。verdoccio,轻量级私有npm代理注册表。加上docker,那就真的无敌方便了,搭建一个私有仓库轻轻松松几分钟搞定。首先要有nodejs 已经 npm 都已经安装好了。1.

    2020/04/03
  • node-jscs入门知识_一个 JavaScript 的代码风格检查工具

    node-jscs入门知识 官方网址:https://jscs-dev.github.io GitHub:https://github.com/jscs-dev/node-jscs…

    2020/03/06
  • 公共DNS服务器整理小白基础_nds使用帮助

    本文整理知名的国内外公共DNS服务器。稳定、可靠、优质的DNS服务会消耗不少资源,因此对公众开发的DNS服务一般由大公司、机构或ISP提供。不少公司提供了各具特色的DNS服务,本文将根据官网介绍一一指出。注意事项请按照自身所在位置和需求就近选择服务器;如果服务器失效,请及时进入官网查看。例如许多网站列出的诺顿DNS在2018年已经停止服务;请优先选用大公司提

    2020/03/31
  • 程序员常用英语单词汇总基础知识入门_程序员基础知识入门

    第一节 void:[vɔid] 空的 main:[mein] 主要的 class:[klɑ:s] 类 system:[‘sistəm] 系统 out:[aut] 出,外,输出 print:[print ] 打印 public[‘pʌblik] 公共的,公用的 static[‘stætik] 静的;静态的;静止的 oracle: [ˈɔ:rəkl] 甲骨文公司

    2020/03/31
  • 求求你们,别消费程序员了!教程视频_程序员入门知识

    今天分享一篇来自我张哥stormzhang的文章:最近一段时间,微博、朋友圈都被程序员刷屏了。先是微博上充斥着各种程序员格子衫的段子,紧接着又有各种程序员穿搭指南被刷屏了,虽然比较幽默,但是幽默中暗示程序员没品、秃头,然后再加上邋遢、情商低、没女朋友等等都跟程序员联系在一起,被各个行业津津乐道,不了解的还以为程序员是这个世界奇葩的物种一样,今天我得好好说道说

    2020/04/03
  • js中使用位运算,让执行效率更高零基础入门_运算入门基础教程

    我们知道平常的数值运算,其本质都是先转换成二进制再进行运算的,而位运算是直接进行二进制运算,所以原则上位运算的执行效率是比较高的,由于位运算的博大精深,下面通过一些在js中使用位运算的实例。1、判断一个数是奇数还是偶数除了传统使用求余数%的方式外,还可以使用一个数和1进行按位&操作进行判断,如下function assert(n) {if (n & 1) {

    2020/04/05
  • WebSocket 原理浅析与实现简单聊天入门教程_websocket菜鸟指南

    本文首发于政采云前端团队博客:WebSocket 原理浅析与实现简单聊天随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高,在 WebSocket 出现之前,大多数情况下是通过客户端发起轮询来拿到服务端实时更新的数据,因为 HTTP1.x 协议有一个缺陷就是通信只能由客户端发起,服务端没法主动给客户端推送。这种方式在对实时性要求比较高的场景下,

    2020/03/23
  • 使用backgroundImage解决图片轮播切换小白知识_轮播菜鸟指南

    单dom节点实现轮播利用backgroundImage可以添加多张图片,以及位置偏移实现轮播效果 创建一个div;并用backgroundImage给div附图片利用backgroundPosition调节位置利用css3 transition调节过渡即可替代简单的图片切换代码 {_imageEl.style.transition = “all 0.8s

    2020/03/26
  • React源码解析之ReactDOM.render()入门知识_源码入门教程

    一、React更新的方式有三种:(1)ReactDOM.render() || hydrate(ReactDOMServer渲染)(2)setState(3)forceUpdate接下来,我们就来看下ReactDOM.render()源码二、ReactDOM.render(element, container[, callback])作用:在提供的conta

    2020/03/29
  • css实现input file上传按钮自定义样式小白入门_按钮小白指南

    input file的样式不能直接用css来美化,我们可以曲线救国,把input file的透明度降低为0,相当于把这个控件隐藏了,实际上只是透明度为0,还是存在的,然后把div套上去,让div充当file的按钮。所以这个办法很简单,但是,把input file的透明度降低,连选择文件后的文件名也被隐藏了,这下可怎么办?那就只能用jquery获取file的文

    2020/03/29
  • js实现交换数组元素位置的方法总汇小白教程_array基础知识入门

    交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式。 第三方变量最基础的方式,创建一个变量作为中转。let temp = array[index1];
    array[index1] = array[index2];
    array[index2] = temp;splice方法splice() 方法用于插入、删除或替换数组的元素。如果是删除时,会返

    2020/04/03
  • js 的隐式转换与显式转换指南攻略_类型基础入门

    隐式转换1.undefined与null相等,但不恒等(===)2.一个是number一个是string时,会尝试将string转换为number3.隐式转换将boolean转换为number,0或14.隐式转换将Object转换成number或string,取决于另外一个对比量的类型5.对于0、空字符串的判断,建议使用 “===” 。6.“==”会对不同类

    Web前端 2020/03/29
  • slider.js小白知识炫酷jquery底部带有缩略图的插件

    slider.js基础入门 官方网址:https://www.jssor.com GitHub:https://github.com/jssor/slider 简介描述:炫酷jqu…

    2020/03/05