流程图动画效果html,jQuery创意线条步骤流程图动画特效
js代码
var process = $('.process');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var SECTION_WIDTH = 200;
var sections = [];
var create = function(start) {
var section = {
start: start,
width: SECTION_WIDTH,
height: 45,
hMax: 35,
hMod: 0,
progress: 0,
dot: {
x: 0,
y: 0
}
};
section.end = section.start + section.width;
section.dot.x = section.start + section.width/2;
section.dot.y = section.height;
sections.push(section);
};
var draw = function(s) {
var wMod = s.width * 0.3;
ctx.beginPath();
ctx.moveTo(s.start, s.height);
ctx.bezierCurveTo(
s.start+wMod, s.height,
s.start+wMod, s.height - s.hMod,
s.start + s.width/2, s.height - s.hMod
);
ctx.bezierCurveTo(
s.end-wMod, s.height - s.hMod,
s.end-wMod, s.height,
s.end, s.height
);
ctx.lineWidth = 4;
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.arc(s.dot.x, s.dot.y, 8, 0, Math.PI * 2);
ctx.fill();
};
function quad(progress) {
return Math.pow(progress, 2);
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress);
}
}
var quadOut = makeEaseOut(quad);
var bend = function(s) {
if(s.progress < s.hMax) {
var delta = quadOut(s.progress/s.hMax);
s.hMod = s.hMax*delta;
s.dot.y = s.height - s.hMax*delta;
s.progress++;
}
};
var reset = function(s) {
if(s.progress > 0) {
var delta = quadOut(s.progress/s.hMax);
s.hMod = s.hMax*delta;
s.dot.y = s.height - s.hMax*delta;
s.progress -= 2;
} else {
s.hMod = 0;
s.dot.y = s.height;
s.progress = 0;
}
};
var currentSection = 0;
process.on('mousemove', function(event) {
var section = Math.floor((event.clientX - process.offset().left) / SECTION_WIDTH);
currentSection = section;
process.find('.active').removeClass('active');
process.find('li').eq(section).addClass('active');
});
create(0);
create(200);
create(400);
create(600);
var loop = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
sections.forEach(function(s, index) {
if(currentSection === index) {
bend(s);
} else {
reset(s);
}
draw(s);
});
window.requestAnimationFrame(loop);
};
loop();
流程图动画效果html,jQuery创意线条步骤流程图动画特效相关推荐
- html怎么把字做成动画效果,8个华丽的HTML5文字动画特效赏析
文字是网页的灵魂,很早以前有人发明了很多漂亮的计算机字体,这让网页变得样式各异.HTML5和CSS3的出现,我们可以让文字变得更加富有个性,在一些需要的场合,我们甚至可以利用HTML5制作文字动画.本 ...
- css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构 该css3线条波浪动画效果的HTML结构如下: CSS样式 然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
- 前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
文章目录 1 JQuery动画效果 1. 基本效果 2. 滑动效果 3 淡入淡出效果 4 自定义动画 5 动画控制 6 设置 7 事件 7-1 常用事件 7-2 事件绑定 7-3 移除事件 7-4 阻 ...
- html将图片动画效果,8款精美的HTML5图片动画分享
原标题:8款精美的HTML5图片动画分享 HTML5结合jQuery可以让网页图片变得更加绚丽多彩,比如实现一些图片3D切换.CSS3动画绘制以及各种图片效果的渲染.本文将分享8款精美的HTML5图片 ...
- 抽奖动画效果html,利用css实现一个抽奖动画效果
首先我们先来看下最终的运行效果: 从效果图我们可以看到,抽奖会自动进行,并显示中奖信息. 这个效果基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 具体步骤如下: 首先画一个转盘 ...
- html右移动动画效果,图片的左右移动,js动画效果实现代码
图片的左右移动,js动画效果实现代码 图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (sm ...
- php 动画效果,首页自适应的分类图标的动画渐入效果
随着HTML5技术的不断更新和革新,动画效果也越来越多的被使用.下面分享一个很炫的,自适应的分类的效果展示. 该展示不需要借助js或者jquery,单纯的html5+css3实现,有两种方式:渐入和震 ...
- html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
近年来,关于鼠标滑动到当前页面从而触发动画效果十分的火热,今天我们就来学习下这一效果. 一.首先,我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局,所以首先就是要先用html将所需要的 ...
- html 气泡动画效果,css3实现好看的气泡按钮动画特效
CSS3在我们网页设计中是最关键的一环,为什么这么说呢?我们在浏览别人的网站时,经常会看到特别好看的动画效果,比如一个按钮啊,一个图片啊,每次看到都能够让人有种赏心悦目的感觉,这就使网站更具有吸引力和 ...
- html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
最新文章
- python爬取boss直聘招聘信息_Python笔记-爬取Boss直聘的招聘信息
- oracle中有类似split的方法么,ORACLE中字符串split的一种方法
- dojo Quick Start/dojo入门手册--json
- Appnium安装-Mac平台
- Windows编程之互动与动画
- (转)TDI FILTER 网络过滤驱动完全解析
- 目标检测——模型效率的优化
- AttributeError: 'NoneType' object has no attribute 'append'
- 打造linux回收站功能
- 遗传算法求解多元函数极值点-C++实现
- 【Kong】网关-rate-limiting限流
- rsync同步技巧---跳过指定文件或目录
- Java6面向对象编程创建一个矩形类, 求周长 面积
- 腾讯:实名举报举报老干妈欺负我这个小可爱
- 微信小程序原生表格组件
- 纸小墨ink简洁主题story爱上你的故事
- 国际巨星Ricky Martin抒情MTV
- android 版本更新知识,版本更新
- 学习笔记 | 数据采集系统基本结构及参数
- set集合、深浅拷贝以及部分知识点补充