Menu

创建动画标题和视频背景的10个代码片段

<返回列表

每个伟大的网站都需要一个漂亮标头吸引注意力。这是游客第一次看到的东西,也是唯一鼓励游客向下滚动的东西。

如果你想快速吸引注意力,那么定制的动画标题就是一种方法。

这些例子在第一次登陆你的网站后肯定会吸引到任何人的注意。

1.彩色动画标题

这是一个可怕的背景设计模仿twitter样式的标题。

但是随着时间的推移,背景颜色在纯CSS渐变的颜色中发生变化。是的,这确实适用于CSS。

我不得不说,这是我所见过的最令人印象深刻的梯度运动在网络上的使用。它增加了一个非常好的细微BG效应所以这是显而易见的,但不会分散注意力。

2.响应性YT BG

所以你想要一个定制的YouTube视频在你的头上。听起来很有趣!

但它并不是那么容易设置,很难得到这个完全响应我也是。

不过这个片段可以节省你的时间和压力,得到一个视频标题到你的网站。

它与大量JavaScript一起运行,可以动态嵌入视频并调整背景大小。虽然大多数互联网用户都启用了JavaScript,但对于任何网站来说都是一个安全的选择。

3.页眉横幅图

现在这是一个超冷效应为了你的头球。该笔是使用JavaScript和一个名为Particles.js.

只需几行代码,您就可以添加自定义的旋转圆圈、动画粒子,甚至是运动中的文本。

这个标题只是一个简单的例子,你可以用粒子库处理很多可能性。

4.全屏幕BG GIF

我提到了上面提到的YouTube全屏视频背景技术,这是一个很好的选择。

但是,如果要使用自定义的动画GIF,则需要查看在这个可爱的例子.

这支笔完全在CSS 3中运行,使用一些编码魔法,您可以缩放任何GIF以自然地适应标题背景。

这个设计特别使用透明的颜色来覆盖GIF,所以它很好地融入了布局的配色方案。

5.奇特的动画粒子

我最喜欢什么此报头设计是特征的大组合。

设计运动三种不同的设计风格混合在一起:

这共同创造了一个辉煌的效果,肯定会吸引注意力的第一页。唯一的问题是实际编辑代码,以使所有的设置和正常工作。

6.英雄小组W/录像背景

从大英雄标题到较小的标题样式,两者都可以利用这个视频背景由纯CSS 3制成。

实际上,视频文件直接添加到HTML中,但是它们被附加到HTML 5数据属性中。这一信息可以通过CSS和用于动态嵌入自定义动画背景。

还有更多的好消息。大多数浏览器已经支持所有这些特性,所以您不会疏远大量的观众使用这种技术。

7.响应性HTML 5视频背景

如果您想使用jQuery作为您的嵌入式视频头,为什么不签出?这支笔由开发人员安格斯·罗素创建。

这是一个很好的例子JQuery视频BG插件你可以在GitHub上免费获得。

但是有了这些代码的指尖,您将能够复制/粘贴到您的布局和编辑设计,以满足您的需要。

8.CSS动画标题

我将是第一个说这个动画是微妙的。你真的得去找它才能看到它。

用这支笔您可以设计一个非常简单的动画标题,只有一个平面图像文件。

图像将以非常慢的速度自动放大和缩小。这让人联想到经典视差滚动但是与用户的滚动行为无关的额外好处。

这意味着您将得到BG动画,无论您在标题部分的位置。

所有的代码都是非常容易设置的,因此对于那些希望动画效果温和的设计师来说,这是一个简单的选择。

9.运动空间

这是这个列表中最酷的背景动画之一,但它的设计也非常具体。

如果您的站点可以使用以空间为主题的标头,那么请签出。这个动画背景由乔丹·拉钱斯创作。

它使用静态背景照片的空间与分形风格的网页动画,跟随你的光标在页面周围。

注意,您需要相当多的JS依赖项(确切地说是3),但是如果您可以添加一些JS,那么您将非常喜欢在您自己的站点上使用这个标题设计。

10.视差星BG

以类似于上面的空间主题的风格,你也可能喜欢这种视差星体设计请戴上萨兰什·辛哈(Saransh Sinha)的代码笔。

同样,如果您愿意,这可以随意地处理并添加到您自己的页面标题中。

最棒的是,这是在纯CSS上运行的,因此您不会干扰JS依赖关系。

所有这些背景提供完全不同的样式和匹配不同的页面标题。但是如果你知道你要找的是什么,这张清单上有一个你会喜欢的片段。


最新网站设计资讯
企业网站建设

企业网站建设优化一条龙,多年品牌网站设计,营销网站开发,手机网站制作,响应式网站设计

联系我们

电话:15557455058QQ:1611387063 邮箱:[email protected]

联系云轩总监微信

微信