首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

网站页面滚动加载动画JS特效

终于尘埃落定了,前段时间忙的不可开交,结婚,工作,因为婚假+年假一起休的,导致很长时间没有更新博客了,今天抽空给大家带来了一个js特效,网站模块延迟加载的动画,假期之前就想着制作这个功能,页面滚动加载...简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。...不同的是 WOW.js动画只播放一次,而 scrollReveal.js动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件...,更加美妙的特效以后会慢慢加入。。。...如果不喜欢这个可以试试wow.js,网站页面滚动加载动画JS特效(二)。

11.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于 HTML5 Canvas 实现的文字动画特效

    前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。...文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。 动态效果图 ?...http://www.hightopo.com/demo/GraphAnimation/index.html 这个 Demo 是不断重复地设置文字的大小和透明度,这些英文字母也是我自己利用 HT 的矢量绘制的...,//动画缓动函数 action: function(v, t) {//action函数必须提供,实现动画过程中的属性变化 第一个参数v代表通过easing(t)函数运算后的值,...} 节点淡出动画也是类似的方法,只是需要循环调用这些动画函数,这样才能做到无限循环字母的大小控制。

    4K20

    网站页面滚动加载动画JS特效(二)

    昨天发布了网站页面滚动加载动画JS特效,但是加载的页面并不怎么完美,文章页面不能直接加载出来,需要滚动条继续下来,可能是没有调节js导致的,所以今天又重新测试了wow.js,感觉这个不错,很喜欢,有兴趣的可以测试下...页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。...WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。 ?...浏览器兼容 IE10+ Chrome Firefox Opera Safari IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll...class animateClass 字符串 ‘animated’ animation.css 动画的 class offset 整数 0 距离可视区域多少开始执行动画 mobile 布尔值 true

    7.4K30

    FxFactory pro 8:视觉特效插件 Mac中文版下载

    FxFactory 是一款视觉特效包,包含了成百上千的视觉效果,打包了很多插件 调色插件,转场插件,视觉插件特效插件文字插件,音频插件,功能强大!...FxFactory pro 8:视觉特效插件图片功能1、FxFactory mac提供快速访问Adobe After Effects, Final Cut Pro 或者Motion的视觉效果集合。...5、用户可以检查所有插件并适当配置它们为你的项目,或创建一个基于现有的新的问题。6、无需编写代码创建自己的Final Cut Studio的影响。...用的FxPlug无缝集成:第一次安装插件,您可以立即开始在Final Cut Pro, Motion and After Effects和更多使用它们!...7、 一个额外的优点是,专业包插件支持16位和32位的一个运动图像的结构。 FxFactory – 它不只是内置的插件管理器,也是对自己管理的完整环境。

    45700

    WenYu特效管理插件

    插件介绍 WenYu特效管理插件专为博客、自媒体、资讯类等网站设计开发,是一款功能丰富的Typecho特效管理插件。...插件内含引用文件、后台美化、重大节日、鼠标特效(移动)、鼠标特效(指针)、鼠标特效(点击)、背景特效、SVG动画、通用功能、handsome功能、Cuteen功能、自定义CSS、自定义JS等几大类,并且内置多个常用样式..."> 1.0:全部 2.1:新增:登陆美化 2.2:优化js、css文件加载速度 2.3:新增:渐变背景、猫咪打字动画 2.4:新增:大雪花、小雪花、Handsome圆形评论头像 2.5:新增...Jquery.min.js文件 2.7.4:新增功能:内置多样式名 3.0.0:重大节日:春节灯笼 背景特效:叶子散落 Live2d模型:看板娘 handsome:头像旋转变大 通用功能:标题滚动...Class类名 文字文字居中:textcentere,文字禁止选中:text_noselect,侧边栏-绿:text_side

    83520

    Ant Motion动效插件分析

    Ant Motion动效插件分析 一、原理分析 特效是通过组件内部的js和css两者共同控制。...例: (3):第三种方案可以制作一个纯js组件,动效样式通过用户自定义。...例:go函数参数:绑定元素,触发方式option(hover/click),动画效果(分为transition和animation两种),动画时间,执行过渡的线性效果(支持cubic-bezier),动效完成回调函数...:(hover类特效更适用于PC端,因为移动设备中并没有鼠标指针,移动端适合用点击类效果) (1):元素的2D变换(放大缩小;扭动弹跳;晃动变形) (2):元素背景的填充与文字颜色变化 (3):icon.../modal弹框特效) 其它特效: (1):出场特效(可以用于一些项目首页,滚动到对应楼层时添加出场动画,执行各种过渡组合特效) (2):元素添加/删除特效(如:项目中一些表格列表和分支的创建和删除可以适用

    2.8K30

    动图展示 60+ 个前端常用插件库合集

    textillate.js 官网:textillate.js Github:jschr/textillate textillate.js结合了很多很棒的函数库,简单应用CSS3动画特效。...Animate.css 官网:Animate.css 纯CSS,无需JavaScript,支持多浏览器的动画特效,即插即用。...KUTE.js 官网:KUTE.js Github:kute.js 一个成熟的原生的JavaScript动画引擎,提供给网站开发者、设计师、动画师相当多基本的功能,浅显易懂的操作方式,跨浏览器动画,拥有着高质量...goodshare.js-极简动画绘制 官网:Sketch.js Quill 官网:Quill Github:Quill Quill是当下高兼容性、强大、丰富且具有扩展性的文字编辑器。...Shave-截断文字 官网:Shave Shave根据内容的最大高度将文字截断,是一个没有任何依赖性的JavaScript插件。并将多出的文字藏在span后面,保留原文的完整性。

    6.6K40

    ae视频特效剪辑软件Adobe After Effects全版本安装--经验分享

    id=sdfsdfsd 或者 After Effects的一些优势: 它可以制作高质量的动画特效,可用于各种类型的媒体制作。...它有大量的插件和脚本可以下载使用,可以进一步扩展其功能和效果。...特效制作:After Effects拥有众多的特效制作工具,例如掩膜、调色板、印刷效果、动态模糊、抖动等等。这些工具可以制作出各种炫酷的特效,让视频更加生动有趣。...动画制作:After Effects可以制作2D和3D动画,并具有强大的关键帧编辑功能。用户可以在时间轴上设置关键帧,控制物体的位置、旋转、缩放、颜色等属性,制作出流畅的动画效果。...文字和标题:After Effects可以添加文字和标题,并对其进行动画效果的制作。用户可以调整文字的大小、颜色、字体、动画速度等参数,制作出高质量的文字动画效果。

    1.1K00

    自定义mapbox插件 - 地图快照下载JS

    mapbox 是一个非常好用的开源地图引擎,他支持得平台有android,ios,js,rn等等,功能多样,但是对于地图插件开发这一块,没找到具体的实施文档。...因此本文以js 为例,来把开发mapbox插件这一过程记录下来。...mapbox 插件 mapbox 官方提供了很多插件,如线面绘制,地图比较等等。本次我开发的插件功能很简单,下载地图的快照,即将当前地图显示导出图片。...本文重点放在开发一款mapbox插件,而非下载功能本身,所以具体下载流程在接下来的插件开发中插入。 插件开发流程 因为官方没有提供开发插件的文档(没找到),因此从0到1这样一步一步来。...在加入这个样式之后,引入的插件成功的触发了点击方法。之后通过插件本身拿到的地图上下文,开始下载

    8.9K40

    解决方案 | 如何在小程序端打造自己的专属短视频模板

    微剪小程序插件经过持续的功能迭代,最新版本除了支持拍摄、滤镜、特效、贴纸、音乐、文字、设置封面等视频剪辑场景基础能力外,还支持了视频模版、转场、动效、花字等高级能力,并且支持素材自定义。...拉幕&字幕素材 拉幕效果可以使用微剪内置的入场动画实现,但是内置的效果是黑底的,与视频中白色拉幕效果有出入,对于插件内没有的效果,我们可以通过alpha-video的方式实现。...实际应用中,通常会遇到类似的在基础素材上添加一些复杂特效的场景 实现类似的动画,常见方案可以使用序列帧,但图片尺寸过大、数量过多,会对性能造成很大的影响,小程序上容易出现内存不足。...我们获取上述拉幕动画中的某一帧,包含通明通道的图片如下,其中透明的部分最终会展示主轨道素材的像素数据: 借助上述alpha-video生成工具,最终合成的视频素材如下所示: 同理也可以将文字的信息合并到...注入插件 小程序接入微剪插件的流程请移步:准备工作(https://cloud.tencent.com/document/product/1156/45645) 在小程序app.js中初始化插件,并注入自定义模板配置

    1.8K10

    程序员必备狂拽炫酷吊炸天的动效神器

    安利一波CSS、JS炫酷动效在线下载网站 # bttn.css 专注分享网页按钮的样式库 # Hover-Buttons 一个可以生成代码的网站 # granim.js 基于canvas的背景颜色渐变动画插件...该插件通过配置几组不同的颜色方案,使指定元素在这些颜色中执行平滑的渐变色过渡效果。 # micron 可生成炫酷CSS3动画js动画插件。...通过micron.js插件,你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。...这个 JavaScript 库提供线条,圆形和方形等几个内置的形状 # Second-Hamburger-Helper 别样的舒适感 # hamburgers 一款效果超酷的图标变形动画特效CSS3...包括18种不同的变形动画效果,你还可以通过Sass文件来自定义你自己的图标变形动画 # jquery-drawsvg 一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画插件 使用jQuery

    2.9K12
    领券