惊艳的HTML5动画特效及源码
今天我们要来分享一些很酷的HTML5动画演示,HTML5的强大之处在于它可以利用canvas的特性来绘制很多普通网页无法完成的图形和动画,canvas就像一块超级画板,在上面不仅可以实现平面图形,而且一些3D动画也非常简单。很多HTML5动画也都基于canvas,一起来看看吧。
HTML5/CSS3实现大风车旋转动画
作为今天首款HTML5动画,这款大风车旋转效果的确非常棒,它是用纯CSS3实现。
核心CSS代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.wmd1{ -webkit-transform: scale(.6); position:absolute; top:180px; left:200px; perspective: 1000px; } .base{ } .blades{ width: 350px; height: 350px; left: 10%; top: 10%; z-index:2; border-radius: 50%; position: absolute; margin-top: -30px; margin-left: 50px; animation: spin 6s linear infinite; } .blade1 { background: white; position:absolute; width:41px; height:139px; top:-10px; left:150.5px; transform:rotate(0deg); display:inline-block; background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0); background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%; background-repeat: no-repeat; } .blade2 { background:white; position:absolute; width:41px; height:139px; top:105.5px; left:41px; transform:rotate(-90deg); display:inline-block; background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0); background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%; background-repeat: no-repeat; } .blade3 { background:white; position:absolute; width:41px; height:139px; top:105.5px; right:41px; transform:rotate(-270deg); display:inline-block; background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0); background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%; background-repeat: no-repeat; } .blade4 { background:white; position:absolute; width:41px; height:139px; bottom:-10px; left:150.5px; transform:rotate(180deg); display:inline-block; background: linear-gradient(135deg, transparent 20px, white 0), linear-gradient(225deg, transparent 20px, white 0), linear-gradient(315deg, transparent 20px, white 0), linear-gradient(45deg, transparent 20px, white 0); background-position: top left, top right, bottom right, bottom left; background-size: 50% 50%; background-repeat: no-repeat; } .vane1{ width:1px; height:350px; left:175px; background:white; position:absolute; transform:rotate(90deg); } .vane2{ width:1px; height:350px; left:171.5px; background:white; position:absolute; transform:rotate(180deg); } .base .bottom_base{ position:absolute; width:90px; height:100px; left:162px; border-right: 16px solid transparent; border-left: 16px solid transparent; border-bottom: 380px solid white; opacity:.8; z-index:-1; top:42.5px; } ul{ position:absolute; top:180px; left:-30px; } li{ width:10px; height:10px; background:white; padding:2px; display:block; margin: 30px; box-shadow: inset 0px -2px 0px lightgray; } li:nth-child(2){ position:absolute; top:-45px; left:20px; } li:nth-child(1){ position:absolute; top:35px; left:50px; } li:nth-child(3){ position:absolute; top:75px; left:50px; } @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(-360deg); } }
纯CSS3 3D图片翻转展示
这是一款基于CSS3的3D图片展示,在图片切换时将会有翻转的动画效果。
核心CSS代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.coverflow-list { width: 100%; } .coverflow-list .coverflow-item { display: inline-block; background: #414141; margin: 0 -50px; position: relative; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); } .coverflow-list .coverflow-item .album-cover { display: block; height: 150px; margin: 0; } .coverflow-list .coverflow-item .album-cover img { height: 150px; width: 150px; opacity: 0.5; } .coverflow-list .coverflow-item .album-name { text-align: center; display: block; color: #444; } .coverflow-list .coverflow-item label { padding: 0; border: none; display: block; text-shadow: none; } /* Now apply 3D transforms (never done this before!) */ .coverflow-list { -webkit-transform: perspective(900px); -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 100% 30%; } .coverflow-list .coverflow-item { -webkit-transition: all 0.4s ease; background: #212121; -webkit-transform: rotateY(45deg); } input[type="radio"] { display: none; } input[type="radio"]:checked + .coverflow-item { -webkit-transform: rotateY(0deg); margin: 0 auto; background: #313131; transition: all 0.4s ease; } input[type="radio"]:checked + .coverflow-item img { opacity: 1; } input[type="radio"]:checked + .coverflow-item figcaption { color: #FFFFFF; } input[type="radio"]:checked + .coverflow-item ~ .coverflow-item { -webkit-transform: rotateY(-45deg); background: #515151; }
漂亮的CSS3动画进度条
这是一款闪闪发光的CSS3进度条,进度条在初始化的时候还有滑动的动画特效。
核心jQuery代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
(function() { $(document).ready(function() { return $(".bar").each(function(i, elem) { return $(elem).addClass('active'); }); }); }).call(this);
CSS3垂直图标菜单
这是一款简单而清爽的CSS3垂直菜单,鼠标滑过菜单项还有Tooltip的动画效果。
核心CSS代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#nav-bar { margin: 50px 50px 50px 400px; max-width: 50px; border: 1px solid #bed1df; border-radius: 4%; background-color: white; -webkit-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11); -moz-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11); box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11); } li { color: #bed1df; margin: 0; font-family: 'Open Sans', sans-serif; font-size: 0.75em; list-style: none; } li.level-one { font-size: 1.5em; text-align: center; border-top: 1px solid #bed1df; cursor: pointer; } li.level-one:first-child { border-top: none; } li.level-one:hover { background: rgba(255,255,255,1); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(233,238,242,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9eef2', GradientType=0 ); } #selected { background: #3f8eb9; -webkit-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45); -moz-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45); box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45); } i { color: #bed1df; margin: 25%; } p { font-family: 'Open Sans', sans-serif; font-size: 0.8em; color: #bed1df; margin: 50px; } a { color: #3f8eb9; text-decoration: none; } .level-one { position: relative; } .level-two { display: none; position: absolute; height: 50px; width: 100px; background: #FFFFFF; border-radius: 4px; font-family: 'Open Sans', sans-serif; font-size: 0.65em; text-align: center; } .level-two:after { content: ''; position: absolute; border-style: solid; border-width: 9px 9px 9px 0; border-color: transparent #fff; display: block; width: 0; z-index: 1; left: -9px; top: 15px; } .level-two li { margin: 15px; } .level-one:hover > .level-two { display: block; } .level-two { left: 130%; top: 0; }
纯CSS3背景渐变按钮 按钮图标淡入淡出动画
这是一组带有动画效果的HTML5按钮,鼠标滑过按钮时将出现背景渐变的动画特效。
核心CSS代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.test{ width:320px; height:90px; margin:30px auto; background:-webkit-linear-gradient(top , #A9DB80 0%, #96C56F 100%); background:-moz-linear-gradient(top , #A9DB80 0%, #96C56F 100%); background:-ms-linear-gradient(top , #A9DB80 0%, #96C56F 100%); background:-o-linear-gradient(top , #A9DB80 0%, #96C56F 100%); background:#A9DB80; box-shadow:0 0 3px #999; border-radius:3px; transition:1s all ease; -webkit-transition:0.5s all ease; -moz-transition:0.5s all ease; -ms-transition:0.5s all ease; -o-transition:0.5s all ease; overflow:hidden; } .test .aLink{ display:block; width:318px; height:88px; background:-webkit-linear-gradient(center top , #FFF 2%); background:-moz-linear-gradient(center top , #FFF 2%); background:-ms-linear-gradient(center top , #FFF 2%); background:-o-linear-gradient(center top , #FFF 2%); box-shadow:0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2); border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; position:relative; text-decoration:none; border:#484848 solid 1px; overflow:hidden; } .test .aLink .txt{ position:absolute; font-size:28px; color:#6D954E; left:18px; top:26px; opacity:0; -webkit-transition:0.2s all ease; -moz-transition:0.2s all ease; -ms-transition:0.2s all ease; -o-transition:0.2s all ease; transition:0.2s all ease; } .test .aLink .img{ position:absolute; width:70px; height:70px; display:block; z-index:2; top:12px; left:10px; -webkit-transition:0.2s all ease; -moz-transition:0.2s all ease; -ms-transition:0.2s all ease; -o-transition:0.2s all ease; transition:0.2s all ease; } .test .aLink .txt2{ font-size:32px; color:#FFF; width:140px; overflow:hidden; display:block; text-shadow:0 0 2px #999999; position:absolute; left:80px; text-align:center; top:10px; font-family:"Comic Sans MS", cursive; } .test .aLink .txt2 span{ font-size:14px; color:#FFF; display:block; } .test .aLink .btn{ width:80px; display:block; height:88px; position:absolute; right:0; top:0; border-left:#484848 solid 1px; box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); -webkit-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); -ms-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); -moz-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); -o-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1); } .test .aLink .btn span{ display:block; width:40px; height:40px; background:url(img/arrow_down.png) center center no-repeat #333; margin:24px auto; border-radius:50%; -webkit-transition:0.3s all ease; -moz-transition:0.3s all ease; -ms-transition:0.3s all ease; -o-transition:0.3s all ease; } /*动画*/ .test:hover{ box-shadow:0 0 10px #666; box-shadow:0 0 10px #666; } .test:hover .img{ width:150px; height:150px; left:-26px; top:-30px; opacity:0; } .test:hover .txt{ opacity:1; } .test:active{ box-shadow:0 0 0px #999; background:-webkit-linear-gradient(top , #80ab5d 0%, #80ab5d 100%); background:-moz-linear-gradient(top , #80ab5d 0%, #80ab5d 100%); background:-ms-linear-gradient(top , #80ab5d 0%, #80ab5d 100%); background:-o-linear-gradient(top , #80ab5d 0%, #80ab5d 100%); } .test:active .aLink{ box-shadow:inset 2px 2px 3px #666666; } .test:active .btn{ box-shadow:inset 1px 1px 1px #666666; box-shadow:inset 1px 1px 1px #666666); } .test:active .txt{ color:#A9DB80; } .test:active .btn span{ width:60px; height:60px; margin-top:15px; background-size:60%; }
动感的CSS3 Loading文字特效
纯CSS3实现滑杆开关切换按钮动画
很不错的自定义radiobox效果,非常有创意
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.switch { display: inline-block; margin: 10em 2em; position: relative; border-radius: 3.5em; -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.2); -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2); box-shadow: 0 0 0.5em rgba(255,255,255,0.2); } .switch label { width: 100%; height: 100%; margin: 0; padding: 0; display: block; position: absolute; top: 0; left: 0; z-index: 10; } .switch input { display: none; } .switch span { display: block; -webkit-transition: top 0.2s; -moz-transition: top 0.2s; -ms-transition: top 0.2s; -o-transition: top 0.2s; transition: top 0.2s; } .switch-border1 { border: 0.1em solid #000; border-radius: 3.5em; -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2); box-shadow: 0 0.2em rgba(255, 255, 255, 0.2); } .switch-border2 { width: 6.6em; height: 12.6em; position: relative; border: 0.1em solid #323232; background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D)); background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D); border-radius: 3.4em; } .switch-border2:before, .switch-border2:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; opacity: .3; border-radius: 3.4em; } .switch-border2:before { background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0))); background: -webkit-linear-gradient(#000, rgba(0,0,0,0)); background: -moz-linear-gradient(#000, rgba(0,0,0,0)); background: -ms-linear-gradient(#000, rgba(0,0,0,0)); background: -o-linear-gradient(#000, rgba(0,0,0,0)); background: linear-gradient(#000, rgba(0,0,0,0)); } .switch-border2:after { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000)); background: -webkit-linear-gradient(rgba(0,0,0,0), #000); background: -moz-linear-gradient(rgba(0,0,0,0), #000); background: -ms-linear-gradient(rgba(0,0,0,0), #000); background: -o-linear-gradient(rgba(0,0,0,0), #000); background: linear-gradient(rgba(0,0,0,0), #000); } .switch-top { width: 100%; height: 84%; position: absolute; top: 8%; left: 0; z-index: 1; background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D)); background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D); background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D); border-radius: 3.4em; } .switch-shadow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; border-radius: 3.4em; -webkit-box-shadow: 0 0 2em black inset; -moz-box-shadow: 0 0 2em black inset; box-shadow: 0 0 2em black inset; } .switch-handle-left, .switch-handle-right { content: ''; display: block; width: 3.6em; height: 0; position: absolute; top: 6.6em; z-index: 2; border-bottom: 4.5em solid #111; border-left: 0.7em solid transparent; border-right: 0.7em solid transparent; border-radius: 0; } .switch-handle-left { left: 0.8em; } .switch-handle-right { right: 0.8em; } .switch-handle { width: 3.6em; height: 4.5em; position: absolute; top: 6.6em; left: 1.5em; z-index: 3; background: #333; background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111)); background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111); border-radius: 0; } .switch-handle-top { width: 5em; height: 5em; position: absolute; top: 8.5em; left: 0.8em; z-index: 4; background-color: #555; background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787)); background-image: -webkit-linear-gradient(left, #5F5F5F, #878787); background-image: -moz-linear-gradient(left, #5F5F5F, #878787); background-image: -ms-linear-gradient(left, #5F5F5F, #878787); background-image: -o-linear-gradient(left, #5F5F5F, #878787); background-image: linear-gradient(to right, #5F5F5F, #878787); border-top: 0.2em solid #AEB2B3; border-radius: 2.5em; } .switch-handle-bottom { width: 3.6em; height: 3.6em; position: absolute; top: 4.7em; left: 1.5em; z-index: 3; background: #333; background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111)); background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111); background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111); border-top: 0.2em solid #141414; border-radius: 1.8em; } .switch-handle-base { width: 4.2em; height: 4.2em; position: absolute; top: 3.8em; left: 1.2em; z-index: 2; border-top: 0.2em solid rgba(255,255,255,0.35); border-radius: 2.1em; -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset; -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset; box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset; } .switch-led { position: absolute; left: 2em; border-radius: 1.4em; } .switch-led-border { border: 0.2em solid black; border-radius: 1.3em; } .switch-led-light { border-radius: 1.1em; -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset; -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset; box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset; } .switch-led-glow { width: 2em; height: 2em; position: relative; border-radius: 1em; } .switch-led-glow:before { content: ''; display: block; width: 0.6em; height: 0.6em; position: absolute; top: 0.3em; left: 0.7em; background: rgba(255,255,255,0.2); border-radius: 0.3em; -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75); -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75); box-shadow: 0 0 1em rgba(255,255,255,0.75); } .switch-led-glow:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: 0; left: 0; opacity: 0.2; filter: alpha(opacity=20); border: 1em solid #fff; border-color: transparent #fff transparent #fff; border-radius: 1em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .switch-led:after { display: block; width: 100%; position: absolute; left: 0; color: #666; font-family: arial, verdana, sans-serif; font-weight: bold; text-align: center; text-shadow: 0 0.1em rgba(0,0,0,0.7); } .switch-led-green:after { content: 'ON'; top: -1.8em; } .switch-led-red:after { content: 'OFF'; bottom: -1.8em; } .switch-led-green { top: -5em; border-top: 0.1em solid rgba(0,161,75,0.5); border-bottom: 0.1em solid rgba(255,255,255,0.25); } .switch-led-green .switch-led-light { background: rgb(0,161,75); border: 0.1em solid rgb(0,104,56); } .switch-led-red { bottom: -5em; border-top: 0.1em solid rgba(237,28,36,0.2); border-bottom: 0.1em solid rgba(255,255,255,0.25); -webkit-box-shadow: 0 0 3em rgb(237,28,36); -moz-box-shadow: 0 0 3em rgb(237,28,36); box-shadow: 0 0 3em rgb(237,28,36); } .switch-led-red .switch-led-light { background: rgb(237,28,36); border: 0.1em solid rgb(161,30,45); } .switch-led-red .switch-led-glow { background: #fff; background: rgba(255, 255, 255, 0.3); filter: alpha(opacity=30); } /* Switch on */ .switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right { top: 1.5em; border-bottom: 0; border-top: 4.5em solid #111; } .switch input:checked~.switch-handle { top: 1.5em; } .switch input:checked~.switch-handle-top { top: -1em; border-top: 0; border-bottom: 0.2em solid #AEB2B3; } .switch input:checked~.switch-handle-bottom { top: 4.2em; border-top: 0; border-bottom: 0.2em solid #141414; } .switch input:checked~.switch-handle-base { top: 4.5em; border-top: 0; border-bottom: 0.2em solid rgba(255,255,255,0.35); } .switch input:checked~.switch-led-green { -webkit-box-shadow: 0 0 3em rgb(0,161,75); -moz-box-shadow: 0 0 3em rgb(0,161,75); box-shadow: 0 0 3em rgb(0,161,75); } .switch input:checked~.switch-led-green .switch-led-glow { background: #fff; background: rgba(255, 255, 255, 0.4); filter: alpha(opacity=40); } .switch input:checked~.switch-led-red { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .switch input:checked~.switch-led-red .switch-led-glow { background: rgba(255, 255, 255, 0); filter: alpha(opacity=0); }
HTML5/CSS3多颜色柱状图表 带基准数据线
这款是基于HTML5的水平柱形图,带有基准线。
核心jQuery代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(document).ready(function(){ $('.bar').each(function(i, elem){ drawBar(elem); }); $('.measure').each(function(i, elem){ drawMeasure(elem); }); $('a.redraw').click(function(e){ e.preventDefault(); $('.bar').each(function(i, elem){ randomiseBar(elem); }); $('.measure').each(function(i, elem){ randomiseMeasure(elem); }); }); function drawBar(bar) { var percentage = $(bar).data('percentage'); if(percentage > 100){ percentage = 100; } $(bar).animate({'width': percentage + '%'}, 'slow'); } function randomiseBar(bar) { var width = Math.floor(Math.random() * (100 - 20 + 1)) + 20; $(bar).animate({'width': width + '%'}, 'slow'); $(bar).attr('data-percentage', width); } function drawMeasure(measure) { var percentage = $(measure).data('percentage'); if(percentage > 100){ percentage = 100; } $(measure).animate({'width': percentage + '%'}, 'slow'); } function randomiseMeasure(measure) { var width = Math.floor(Math.random() * (100 - 20 + 1)) + 20; $(measure).animate({'width': width + '%'}, 'slow'); $(measure).attr('data-percentage', width); } });