lujian
6 years ago
parent
2eb65aa920
commit
560bf07c69
@ -0,0 +1,398 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html, body{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img{
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.gray-text {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 16px;
|
||||
color: #686868;
|
||||
letter-spacing: 0.38px;
|
||||
}
|
||||
|
||||
.tiny-gray-text {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 10px;
|
||||
color: #686868;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
.green-title {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 27px;
|
||||
color: #07DFC8;
|
||||
letter-spacing: 0.65px;
|
||||
text-align: center;
|
||||
}
|
||||
.white-content {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0.38px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid red;
|
||||
}
|
||||
.swiper-container{
|
||||
height: 100%;
|
||||
background-color: #1C2029;
|
||||
|
||||
}
|
||||
.slide1 {
|
||||
background-repeat:no-repeat;
|
||||
|
||||
background-image: url('../../images/annualbill/star@2x.png');
|
||||
|
||||
}
|
||||
.logo {
|
||||
padding: 21px 0 0 26px;
|
||||
}
|
||||
.logo img {
|
||||
width: 82px;
|
||||
height: 16.7px;
|
||||
}
|
||||
.slide1-body {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
height: 45%;
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
animation: move 2s infinite;
|
||||
-webkit-animation: move 2s infinite;
|
||||
|
||||
}
|
||||
.bottom-text {
|
||||
opacity: 0.3;
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 16px;
|
||||
color: #1C2029;
|
||||
letter-spacing: 0.38px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
}
|
||||
.bottom-text2 {
|
||||
opacity: 0.3;
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0.38px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
}
|
||||
.bottom-img {
|
||||
margin-top: 5px;
|
||||
|
||||
}
|
||||
.bottom-img img {
|
||||
width: 20px;
|
||||
}
|
||||
.huojian {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.huojian img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide2-title {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 1.5rem;
|
||||
color: #07DFC8;
|
||||
letter-spacing: 5px;
|
||||
line-height: 1.95rem;
|
||||
margin: 2.7rem 0 0 1.35rem;
|
||||
}
|
||||
|
||||
.slide2-wish-text {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 0.8rem;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0.38px;
|
||||
line-height: 1.1rem;
|
||||
margin: 1.05rem 2rem 0 1.35rem;
|
||||
}
|
||||
|
||||
.slide2-hr {
|
||||
background: #686868;
|
||||
border-radius: 1.5px;
|
||||
height: 3px;
|
||||
margin: 0.85rem 1.95rem 0px 1.35rem;
|
||||
}
|
||||
.slide2-hr .left {
|
||||
background: #FFFFFF;
|
||||
width: 15%;
|
||||
height: 3px;
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
.slide2-data {
|
||||
|
||||
}
|
||||
|
||||
.slide2-data li:nth-of-type(odd) {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 0.8rem;
|
||||
color: #686868;
|
||||
letter-spacing: 0.38px;
|
||||
}
|
||||
|
||||
.slide2-data li:nth-of-type(even) {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 1.3rem;
|
||||
color: #07DFC8;
|
||||
letter-spacing: 0.62px;
|
||||
list-style: none;
|
||||
}
|
||||
.slide2-data li:nth-child(3) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.slide2-data li:nth-child(5) {
|
||||
margin-top: 2.85rem;
|
||||
}
|
||||
|
||||
.slide3 .fangkuai-div {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.slide6 .industry {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slide6 .industry ul {
|
||||
width: 48%;
|
||||
display: inline-block;
|
||||
}
|
||||
.slide6 .industry ul li .left {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
vertical-align: middle
|
||||
}
|
||||
.slide6 .industry ul li .industry-title {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 14px;
|
||||
color: #07DFC8;
|
||||
letter-spacing: 0.34px;
|
||||
}
|
||||
.slide6 .industry ul li .industry-name {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 8px;
|
||||
color: #686868;
|
||||
letter-spacing: 0.19px;
|
||||
}
|
||||
|
||||
.blue-to-green {
|
||||
height: 12px;
|
||||
display: inline-block;
|
||||
transform: rotate(-360deg);
|
||||
background-image: linear-gradient(-90deg, #0C66DA 0%, #0FEED4 100%);
|
||||
border-radius: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.yellow-to-orange {
|
||||
height: 12px;
|
||||
transform: rotate(-180deg);
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(90deg, #EFEA16 0%, #DC322B 100%);
|
||||
border-radius: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.slide6 .ul-right {
|
||||
list-style: none;
|
||||
}
|
||||
.slide7 .common-circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
color: white;
|
||||
}
|
||||
.slide7 .top-key-value {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.slide7 .top-key {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 10px;
|
||||
color: #686868;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
.slide7 .top-value {
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 10px;
|
||||
color: #07DFC8;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
.circle-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background-color: #686868;
|
||||
vertical-align: middle;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.slide9 .gateway {
|
||||
margin: 21px 29px;
|
||||
}
|
||||
|
||||
.slide9 .green-dot {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 10px;
|
||||
background: #07DFC8;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.slide9 .orange-dot {
|
||||
background: #EEE716;
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 10px;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.slide9 .gateway .gateway-online {
|
||||
margin-right: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.slide9 .gateway .gateway-offline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.slide9 .gateway-bar {
|
||||
display: box; /* OLD - Android 4.4- */
|
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
||||
display: -ms-flexbox; /* TWEENER - IE 10 */
|
||||
display: -webkit-flex; /* NEW - Chrome */
|
||||
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
|
||||
justify-content: space-around;
|
||||
-webkit-justify-content: space-around;
|
||||
-moz-justify-content: space-around;
|
||||
-ms-justify-content: space-around;
|
||||
-o-justify-content: space-around;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.slide9 .gateway-bar .gateway-bar-item {
|
||||
background: #272B37;
|
||||
border-radius: 6px;
|
||||
width: 12px;
|
||||
height: 10rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.slide9 .gateway-bar .gateway-bar-item .gateway-bar-item-data {
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.slide9 .gateway-online-item {
|
||||
background-image: linear-gradient(0deg, #0C66DA 0%, #0FEED4 100%);
|
||||
}
|
||||
|
||||
.slide9 .gateway-offline-item {
|
||||
background-image: linear-gradient(-180deg, #EFEA16 0%, #DC322B 100%);
|
||||
}
|
||||
|
||||
.slide9 .gateway-item-rate {
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
font-family: SourceHanSansCN-Medium;
|
||||
font-size: 10px;
|
||||
color: #07DFC8;
|
||||
letter-spacing: 0.24px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
width: 20px;
|
||||
|
||||
}
|
||||
.slide9 .gateway-name {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10rem;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
bottom: 10px;
|
||||
}
|
||||
50% {
|
||||
bottom: 0px;
|
||||
}
|
||||
100% {
|
||||
bottom: 10px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-@keyframes move {
|
||||
0% {
|
||||
bottom: 10px;
|
||||
}
|
||||
50% {
|
||||
bottom: 0px;
|
||||
}
|
||||
100% {
|
||||
bottom: 10px
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 400px) {
|
||||
html {
|
||||
font-size: 10px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 568px) {
|
||||
html {
|
||||
font-size: 16px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 600px) {
|
||||
html {
|
||||
font-size: 20px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,618 @@
|
||||
/**
|
||||
* Swiper 4.4.6
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* http://www.idangero.us/swiper/
|
||||
*
|
||||
* Copyright 2014-2018 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: December 19, 2018
|
||||
*/
|
||||
.swiper-container {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
/* Fix of Webkit flickering */
|
||||
z-index: 1;
|
||||
}
|
||||
.swiper-container-no-flexbox .swiper-slide {
|
||||
float: left;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-wrapper {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
transition-property: -webkit-transform;
|
||||
-o-transition-property: transform;
|
||||
transition-property: transform;
|
||||
transition-property: transform, -webkit-transform;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.swiper-container-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
-webkit-transform: translate3d(0px, 0, 0);
|
||||
transform: translate3d(0px, 0, 0);
|
||||
}
|
||||
.swiper-container-multirow > .swiper-wrapper {
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.swiper-container-free-mode > .swiper-wrapper {
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
-o-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
transition-property: -webkit-transform;
|
||||
-o-transition-property: transform;
|
||||
transition-property: transform;
|
||||
transition-property: transform, -webkit-transform;
|
||||
}
|
||||
.swiper-slide-invisible-blank {
|
||||
visibility: hidden;
|
||||
}
|
||||
/* Auto Height */
|
||||
.swiper-container-autoheight,
|
||||
.swiper-container-autoheight .swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
.swiper-container-autoheight .swiper-wrapper {
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
-webkit-transition-property: height, -webkit-transform;
|
||||
transition-property: height, -webkit-transform;
|
||||
-o-transition-property: transform, height;
|
||||
transition-property: transform, height;
|
||||
transition-property: transform, height, -webkit-transform;
|
||||
}
|
||||
/* 3D Effects */
|
||||
.swiper-container-3d {
|
||||
-webkit-perspective: 1200px;
|
||||
perspective: 1200px;
|
||||
}
|
||||
.swiper-container-3d .swiper-wrapper,
|
||||
.swiper-container-3d .swiper-slide,
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-container-3d .swiper-cube-shadow {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-left {
|
||||
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-right {
|
||||
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-top {
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
/* IE10 Windows Phone 8 Fixes */
|
||||
.swiper-container-wp8-horizontal,
|
||||
.swiper-container-wp8-horizontal > .swiper-wrapper {
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.swiper-container-wp8-vertical,
|
||||
.swiper-container-wp8-vertical > .swiper-wrapper {
|
||||
-ms-touch-action: pan-x;
|
||||
touch-action: pan-x;
|
||||
}
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 27px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
background-size: 27px 44px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.swiper-button-prev.swiper-button-disabled,
|
||||
.swiper-button-next.swiper-button-disabled {
|
||||
opacity: 0.35;
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-button-prev,
|
||||
.swiper-container-rtl .swiper-button-next {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
||||
left: 10px;
|
||||
right: auto;
|
||||
}
|
||||
.swiper-button-next,
|
||||
.swiper-container-rtl .swiper-button-prev {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
.swiper-button-prev.swiper-button-white,
|
||||
.swiper-container-rtl .swiper-button-next.swiper-button-white {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-next.swiper-button-white,
|
||||
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-prev.swiper-button-black,
|
||||
.swiper-container-rtl .swiper-button-next.swiper-button-black {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-next.swiper-button-black,
|
||||
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-lock {
|
||||
display: none;
|
||||
}
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
-webkit-transition: 300ms opacity;
|
||||
-o-transition: 300ms opacity;
|
||||
transition: 300ms opacity;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-pagination.swiper-pagination-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
/* Common Styles */
|
||||
.swiper-pagination-fraction,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/* Bullets */
|
||||
.swiper-pagination-bullets-dynamic {
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
-webkit-transform: scale(0.33);
|
||||
-ms-transform: scale(0.33);
|
||||
transform: scale(0.33);
|
||||
position: relative;
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
|
||||
-webkit-transform: scale(0.66);
|
||||
-ms-transform: scale(0.66);
|
||||
transform: scale(0.66);
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
|
||||
-webkit-transform: scale(0.33);
|
||||
-ms-transform: scale(0.33);
|
||||
transform: scale(0.33);
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
|
||||
-webkit-transform: scale(0.66);
|
||||
-ms-transform: scale(0.66);
|
||||
transform: scale(0.66);
|
||||
}
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
|
||||
-webkit-transform: scale(0.33);
|
||||
-ms-transform: scale(0.33);
|
||||
transform: scale(0.33);
|
||||
}
|
||||
.swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
}
|
||||
button.swiper-pagination-bullet {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
cursor: pointer;
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #007aff;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
-webkit-transform: translate3d(0px, -50%, 0);
|
||||
transform: translate3d(0px, -50%, 0);
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 6px 0;
|
||||
display: block;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
display: inline-block;
|
||||
-webkit-transition: 200ms top, 200ms -webkit-transform;
|
||||
transition: 200ms top, 200ms -webkit-transform;
|
||||
-o-transition: 200ms transform, 200ms top;
|
||||
transition: 200ms transform, 200ms top;
|
||||
transition: 200ms transform, 200ms top, 200ms -webkit-transform;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 4px;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
-webkit-transition: 200ms left, 200ms -webkit-transform;
|
||||
transition: 200ms left, 200ms -webkit-transform;
|
||||
-o-transition: 200ms transform, 200ms left;
|
||||
transition: 200ms transform, 200ms left;
|
||||
transition: 200ms transform, 200ms left, 200ms -webkit-transform;
|
||||
}
|
||||
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
-webkit-transition: 200ms right, 200ms -webkit-transform;
|
||||
transition: 200ms right, 200ms -webkit-transform;
|
||||
-o-transition: 200ms transform, 200ms right;
|
||||
transition: 200ms transform, 200ms right;
|
||||
transition: 200ms transform, 200ms right, 200ms -webkit-transform;
|
||||
}
|
||||
/* Progress */
|
||||
.swiper-pagination-progressbar {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
}
|
||||
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
background: #007aff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
}
|
||||
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
-webkit-transform-origin: right top;
|
||||
-ms-transform-origin: right top;
|
||||
transform-origin: right top;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-progressbar,
|
||||
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-progressbar,
|
||||
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-pagination-white .swiper-pagination-bullet-active {
|
||||
background: #ffffff;
|
||||
}
|
||||
.swiper-pagination-progressbar.swiper-pagination-white {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
|
||||
background: #ffffff;
|
||||
}
|
||||
.swiper-pagination-black .swiper-pagination-bullet-active {
|
||||
background: #000000;
|
||||
}
|
||||
.swiper-pagination-progressbar.swiper-pagination-black {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
|
||||
background: #000000;
|
||||
}
|
||||
.swiper-pagination-lock {
|
||||
display: none;
|
||||
}
|
||||
/* Scrollbar */
|
||||
.swiper-scrollbar {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
-ms-touch-action: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-scrollbar {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
bottom: 3px;
|
||||
z-index: 50;
|
||||
height: 5px;
|
||||
width: 98%;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-scrollbar {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 1%;
|
||||
z-index: 50;
|
||||
width: 5px;
|
||||
height: 98%;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-scrollbar-cursor-drag {
|
||||
cursor: move;
|
||||
}
|
||||
.swiper-scrollbar-lock {
|
||||
display: none;
|
||||
}
|
||||
.swiper-zoom-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.swiper-zoom-container > img,
|
||||
.swiper-zoom-container > svg,
|
||||
.swiper-zoom-container > canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
.swiper-slide-zoomed {
|
||||
cursor: move;
|
||||
}
|
||||
/* Preloader */
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
z-index: 10;
|
||||
-webkit-transform-origin: 50%;
|
||||
-ms-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
}
|
||||
.swiper-lazy-preloader:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
background-position: 50%;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.swiper-lazy-preloader-white:after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
@-webkit-keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/* a11y */
|
||||
.swiper-container .swiper-notification {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
-o-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide-active,
|
||||
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.swiper-container-cube {
|
||||
overflow: visible;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-container-cube.swiper-container-rtl .swiper-slide {
|
||||
-webkit-transform-origin: 100% 0;
|
||||
-ms-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-next,
|
||||
.swiper-container-cube .swiper-slide-prev,
|
||||
.swiper-container-cube .swiper-slide-next + .swiper-slide {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-shadow-top,
|
||||
.swiper-container-cube .swiper-slide-shadow-bottom,
|
||||
.swiper-container-cube .swiper-slide-shadow-left,
|
||||
.swiper-container-cube .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.swiper-container-cube .swiper-cube-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.6;
|
||||
-webkit-filter: blur(50px);
|
||||
filter: blur(50px);
|
||||
z-index: 0;
|
||||
}
|
||||
.swiper-container-flip {
|
||||
overflow: visible;
|
||||
}
|
||||
.swiper-container-flip .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.swiper-container-flip .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-container-flip .swiper-slide-active,
|
||||
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.swiper-container-flip .swiper-slide-shadow-top,
|
||||
.swiper-container-flip .swiper-slide-shadow-bottom,
|
||||
.swiper-container-flip .swiper-slide-shadow-left,
|
||||
.swiper-container-flip .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.swiper-container-coverflow .swiper-wrapper {
|
||||
/* Windows 8 IE 10 fix */
|
||||
-ms-perspective: 1200px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 940 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 663 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 741 B |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 224 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 707 B |
|
After Width: | Height: | Size: 943 B |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 452 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,552 @@
|
||||
/**
|
||||
* jquery-circle-progress - jQuery Plugin to draw animated circular progress bars:
|
||||
* {@link http://kottenator.github.io/jquery-circle-progress/}
|
||||
*
|
||||
* @author Rostyslav Bryzgunov <kottenator@gmail.com>
|
||||
* @version 1.2.2
|
||||
* @licence MIT
|
||||
* @preserve
|
||||
*/
|
||||
// UMD factory - https://github.com/umdjs/umd/blob/d31bb6ee7098715e019f52bdfe27b3e4bfd2b97e/templates/jqueryPlugin.js
|
||||
// Uses AMD, CommonJS or browser globals to create a jQuery plugin.
|
||||
(function(factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD - register as an anonymous module
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node/CommonJS
|
||||
var $ = require('jquery');
|
||||
factory($);
|
||||
module.exports = $;
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
})(function($) {
|
||||
/**
|
||||
* Inner implementation of the circle progress bar.
|
||||
* The class is not exposed _yet_ but you can create an instance through jQuery method call.
|
||||
*
|
||||
* @param {object} config - You can customize any class member (property or method).
|
||||
* @class
|
||||
* @alias CircleProgress
|
||||
*/
|
||||
function CircleProgress(config) {
|
||||
this.init(config);
|
||||
}
|
||||
|
||||
CircleProgress.prototype = {
|
||||
//--------------------------------------- public options ---------------------------------------
|
||||
/**
|
||||
* This is the only required option. It should be from `0.0` to `1.0`.
|
||||
* @type {number}
|
||||
* @default 0.0
|
||||
*/
|
||||
value: 0.0,
|
||||
|
||||
/**
|
||||
* Size of the canvas in pixels.
|
||||
* It's a square so we need only one dimension.
|
||||
* @type {number}
|
||||
* @default 100.0
|
||||
*/
|
||||
size: 100.0,
|
||||
|
||||
/**
|
||||
* Initial angle for `0.0` value in radians.
|
||||
* @type {number}
|
||||
* @default -Math.PI
|
||||
*/
|
||||
startAngle: -Math.PI,
|
||||
|
||||
/**
|
||||
* Width of the arc in pixels.
|
||||
* If it's `'auto'` - the value is calculated as `[this.size]{@link CircleProgress#size} / 14`.
|
||||
* @type {number|string}
|
||||
* @default 'auto'
|
||||
*/
|
||||
thickness: 'auto',
|
||||
|
||||
/**
|
||||
* Fill of the arc. You may set it to:
|
||||
*
|
||||
* - solid color:
|
||||
* - `'#3aeabb'`
|
||||
* - `{ color: '#3aeabb' }`
|
||||
* - `{ color: 'rgba(255, 255, 255, .3)' }`
|
||||
* - linear gradient _(left to right)_:
|
||||
* - `{ gradient: ['#3aeabb', '#fdd250'], gradientAngle: Math.PI / 4 }`
|
||||
* - `{ gradient: ['red', 'green', 'blue'], gradientDirection: [x0, y0, x1, y1] }`
|
||||
* - `{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }`
|
||||
* - image:
|
||||
* - `{ image: 'http://i.imgur.com/pT0i89v.png' }`
|
||||
* - `{ image: imageObject }`
|
||||
* - `{ color: 'lime', image: 'http://i.imgur.com/pT0i89v.png' }` -
|
||||
* color displayed until the image is loaded
|
||||
*
|
||||
* @default {gradient: ['#3aeabb', '#fdd250']}
|
||||
*/
|
||||
fill: {
|
||||
gradient: ['#3aeabb', '#fdd250']
|
||||
},
|
||||
|
||||
/**
|
||||
* Color of the "empty" arc. Only a color fill supported by now.
|
||||
* @type {string}
|
||||
* @default 'rgba(0, 0, 0, .1)'
|
||||
*/
|
||||
emptyFill: 'rgba(0, 0, 0, .1)',
|
||||
|
||||
/**
|
||||
* jQuery Animation config.
|
||||
* You can pass `false` to disable the animation.
|
||||
* @see http://api.jquery.com/animate/
|
||||
* @type {object|boolean}
|
||||
* @default {duration: 1200, easing: 'circleProgressEasing'}
|
||||
*/
|
||||
animation: {
|
||||
duration: 1200,
|
||||
easing: 'circleProgressEasing'
|
||||
},
|
||||
|
||||
/**
|
||||
* Default animation starts at `0.0` and ends at specified `value`. Let's call this _direct animation_.
|
||||
* If you want to make _reversed animation_ - set `animationStartValue: 1.0`.
|
||||
* Also you may specify any other value from `0.0` to `1.0`.
|
||||
* @type {number}
|
||||
* @default 0.0
|
||||
*/
|
||||
animationStartValue: 0.0,
|
||||
|
||||
/**
|
||||
* Reverse animation and arc draw.
|
||||
* By default, the arc is filled from `0.0` to `value`, _clockwise_.
|
||||
* With `reverse: true` the arc is filled from `1.0` to `value`, _counter-clockwise_.
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
reverse: false,
|
||||
|
||||
/**
|
||||
* Arc line cap: `'butt'`, `'round'` or `'square'` -
|
||||
* [read more]{@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap}.
|
||||
* @type {string}
|
||||
* @default 'butt'
|
||||
*/
|
||||
lineCap: 'butt',
|
||||
|
||||
/**
|
||||
* Canvas insertion mode: append or prepend it into the parent element?
|
||||
* @type {string}
|
||||
* @default 'prepend'
|
||||
*/
|
||||
insertMode: 'prepend',
|
||||
|
||||
//------------------------------ protected properties and methods ------------------------------
|
||||
/**
|
||||
* Link to {@link CircleProgress} constructor.
|
||||
* @protected
|
||||
*/
|
||||
constructor: CircleProgress,
|
||||
|
||||
/**
|
||||
* Container element. Should be passed into constructor config.
|
||||
* @protected
|
||||
* @type {jQuery}
|
||||
*/
|
||||
el: null,
|
||||
|
||||
/**
|
||||
* Canvas element. Automatically generated and prepended to [this.el]{@link CircleProgress#el}.
|
||||
* @protected
|
||||
* @type {HTMLCanvasElement}
|
||||
*/
|
||||
canvas: null,
|
||||
|
||||
/**
|
||||
* 2D-context of [this.canvas]{@link CircleProgress#canvas}.
|
||||
* @protected
|
||||
* @type {CanvasRenderingContext2D}
|
||||
*/
|
||||
ctx: null,
|
||||
|
||||
/**
|
||||
* Radius of the outer circle. Automatically calculated as `[this.size]{@link CircleProgress#size} / 2`.
|
||||
* @protected
|
||||
* @type {number}
|
||||
*/
|
||||
radius: 0.0,
|
||||
|
||||
/**
|
||||
* Fill of the main arc. Automatically calculated, depending on [this.fill]{@link CircleProgress#fill} option.
|
||||
* @protected
|
||||
* @type {string|CanvasGradient|CanvasPattern}
|
||||
*/
|
||||
arcFill: null,
|
||||
|
||||
/**
|
||||
* Last rendered frame value.
|
||||
* @protected
|
||||
* @type {number}
|
||||
*/
|
||||
lastFrameValue: 0.0,
|
||||
|
||||
/**
|
||||
* Init/re-init the widget.
|
||||
*
|
||||
* Throws a jQuery event:
|
||||
*
|
||||
* - `circle-inited(jqEvent)`
|
||||
*
|
||||
* @param {object} config - You can customize any class member (property or method).
|
||||
*/
|
||||
init: function(config) {
|
||||
$.extend(this, config);
|
||||
this.radius = this.size / 2;
|
||||
this.initWidget();
|
||||
this.initFill();
|
||||
this.draw();
|
||||
this.el.trigger('circle-inited');
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize `<canvas>`.
|
||||
* @protected
|
||||
*/
|
||||
initWidget: function() {
|
||||
if (!this.canvas)
|
||||
this.canvas = $('<canvas>')[this.insertMode == 'prepend' ? 'prependTo' : 'appendTo'](this.el)[0];
|
||||
|
||||
var canvas = this.canvas;
|
||||
canvas.width = this.size;
|
||||
canvas.height = this.size;
|
||||
this.ctx = canvas.getContext('2d');
|
||||
|
||||
if (window.devicePixelRatio > 1) {
|
||||
var scaleBy = window.devicePixelRatio;
|
||||
canvas.style.width = canvas.style.height = this.size + 'px';
|
||||
canvas.width = canvas.height = this.size * scaleBy;
|
||||
this.ctx.scale(scaleBy, scaleBy);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* This method sets [this.arcFill]{@link CircleProgress#arcFill}.
|
||||
* It could do this async (on image load).
|
||||
* @protected
|
||||
*/
|
||||
initFill: function() {
|
||||
var self = this,
|
||||
fill = this.fill,
|
||||
ctx = this.ctx,
|
||||
size = this.size;
|
||||
|
||||
if (!fill)
|
||||
throw Error("The fill is not specified!");
|
||||
|
||||
if (typeof fill == 'string')
|
||||
fill = {color: fill};
|
||||
|
||||
if (fill.color)
|
||||
this.arcFill = fill.color;
|
||||
|
||||
if (fill.gradient) {
|
||||
var gr = fill.gradient;
|
||||
|
||||
if (gr.length == 1) {
|
||||
this.arcFill = gr[0];
|
||||
} else if (gr.length > 1) {
|
||||
var ga = fill.gradientAngle || 0, // gradient direction angle; 0 by default
|
||||
gd = fill.gradientDirection || [
|
||||
size / 2 * (1 - Math.cos(ga)), // x0
|
||||
size / 2 * (1 + Math.sin(ga)), // y0
|
||||
size / 2 * (1 + Math.cos(ga)), // x1
|
||||
size / 2 * (1 - Math.sin(ga)) // y1
|
||||
];
|
||||
|
||||
var lg = ctx.createLinearGradient.apply(ctx, gd);
|
||||
|
||||
for (var i = 0; i < gr.length; i++) {
|
||||
var color = gr[i],
|
||||
pos = i / (gr.length - 1);
|
||||
|
||||
if ($.isArray(color)) {
|
||||
pos = color[1];
|
||||
color = color[0];
|
||||
}
|
||||
|
||||
lg.addColorStop(pos, color);
|
||||
}
|
||||
|
||||
this.arcFill = lg;
|
||||
}
|
||||
}
|
||||
|
||||
if (fill.image) {
|
||||
var img;
|
||||
|
||||
if (fill.image instanceof Image) {
|
||||
img = fill.image;
|
||||
} else {
|
||||
img = new Image();
|
||||
img.src = fill.image;
|
||||
}
|
||||
|
||||
if (img.complete)
|
||||
setImageFill();
|
||||
else
|
||||
img.onload = setImageFill;
|
||||
}
|
||||
|
||||
function setImageFill() {
|
||||
var bg = $('<canvas>')[0];
|
||||
bg.width = self.size;
|
||||
bg.height = self.size;
|
||||
bg.getContext('2d').drawImage(img, 0, 0, size, size);
|
||||
self.arcFill = self.ctx.createPattern(bg, 'no-repeat');
|
||||
self.drawFrame(self.lastFrameValue);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Draw the circle.
|
||||
* @protected
|
||||
*/
|
||||
draw: function() {
|
||||
if (this.animation)
|
||||
this.drawAnimated(this.value);
|
||||
else
|
||||
this.drawFrame(this.value);
|
||||
},
|
||||
|
||||
/**
|
||||
* Draw a single animation frame.
|
||||
* @protected
|
||||
* @param {number} v - Frame value.
|
||||
*/
|
||||
drawFrame: function(v) {
|
||||
this.lastFrameValue = v;
|
||||
this.ctx.clearRect(0, 0, this.size, this.size);
|
||||
this.drawEmptyArc(v);
|
||||
this.drawArc(v);
|
||||
},
|
||||
|
||||
/**
|
||||
* Draw the arc (part of the circle).
|
||||
* @protected
|
||||
* @param {number} v - Frame value.
|
||||
*/
|
||||
drawArc: function(v) {
|
||||
if (v === 0)
|
||||
return;
|
||||
|
||||
var ctx = this.ctx,
|
||||
r = this.radius,
|
||||
t = this.getThickness(),
|
||||
a = this.startAngle;
|
||||
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
|
||||
if (!this.reverse) {
|
||||
ctx.arc(r, r, r - t / 2, a, a + Math.PI * 2 * v);
|
||||
} else {
|
||||
ctx.arc(r, r, r - t / 2, a - Math.PI * 2 * v, a);
|
||||
}
|
||||
|
||||
ctx.lineWidth = t;
|
||||
ctx.lineCap = this.lineCap;
|
||||
ctx.strokeStyle = this.arcFill;
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
},
|
||||
|
||||
/**
|
||||
* Draw the _empty (background)_ arc (part of the circle).
|
||||
* @protected
|
||||
* @param {number} v - Frame value.
|
||||
*/
|
||||
drawEmptyArc: function(v) {
|
||||
var ctx = this.ctx,
|
||||
r = this.radius,
|
||||
t = this.getThickness(),
|
||||
a = this.startAngle;
|
||||
|
||||
if (v < 1) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
|
||||
if (v <= 0) {
|
||||
ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);
|
||||
} else {
|
||||
if (!this.reverse) {
|
||||
ctx.arc(r, r, r - t / 2, a + Math.PI * 2 * v, a);
|
||||
} else {
|
||||
ctx.arc(r, r, r - t / 2, a, a - Math.PI * 2 * v);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.lineWidth = t;
|
||||
ctx.strokeStyle = this.emptyFill;
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Animate the progress bar.
|
||||
*
|
||||
* Throws 3 jQuery events:
|
||||
*
|
||||
* - `circle-animation-start(jqEvent)`
|
||||
* - `circle-animation-progress(jqEvent, animationProgress, stepValue)` - multiple event
|
||||
* animationProgress: from `0.0` to `1.0`; stepValue: from `0.0` to `value`
|
||||
* - `circle-animation-end(jqEvent)`
|
||||
*
|
||||
* @protected
|
||||
* @param {number} v - Final value.
|
||||
*/
|
||||
drawAnimated: function(v) {
|
||||
var self = this,
|
||||
el = this.el,
|
||||
canvas = $(this.canvas);
|
||||
|
||||
// stop previous animation before new "start" event is triggered
|
||||
canvas.stop(true, false);
|
||||
el.trigger('circle-animation-start');
|
||||
|
||||
canvas
|
||||
.css({animationProgress: 0})
|
||||
.animate({animationProgress: 1}, $.extend({}, this.animation, {
|
||||
step: function(animationProgress) {
|
||||
var stepValue = self.animationStartValue * (1 - animationProgress) + v * animationProgress;
|
||||
self.drawFrame(stepValue);
|
||||
el.trigger('circle-animation-progress', [animationProgress, stepValue]);
|
||||
}
|
||||
}))
|
||||
.promise()
|
||||
.always(function() {
|
||||
// trigger on both successful & failure animation end
|
||||
el.trigger('circle-animation-end');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the circle thickness.
|
||||
* @see CircleProgress#thickness
|
||||
* @protected
|
||||
* @returns {number}
|
||||
*/
|
||||
getThickness: function() {
|
||||
return $.isNumeric(this.thickness) ? this.thickness : this.size / 14;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get current value.
|
||||
* @protected
|
||||
* @return {number}
|
||||
*/
|
||||
getValue: function() {
|
||||
return this.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* Set current value (with smooth animation transition).
|
||||
* @protected
|
||||
* @param {number} newValue
|
||||
*/
|
||||
setValue: function(newValue) {
|
||||
if (this.animation)
|
||||
this.animationStartValue = this.lastFrameValue;
|
||||
this.value = newValue;
|
||||
this.draw();
|
||||
}
|
||||
};
|
||||
|
||||
//----------------------------------- Initiating jQuery plugin -----------------------------------
|
||||
$.circleProgress = {
|
||||
// Default options (you may override them)
|
||||
defaults: CircleProgress.prototype
|
||||
};
|
||||
|
||||
// ease-in-out-cubic
|
||||
$.easing.circleProgressEasing = function(x) {
|
||||
if (x < 0.5) {
|
||||
x = 2 * x;
|
||||
return 0.5 * x * x * x;
|
||||
} else {
|
||||
x = 2 - 2 * x;
|
||||
return 1 - 0.5 * x * x * x;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates an instance of {@link CircleProgress}.
|
||||
* Produces [init event]{@link CircleProgress#init} and [animation events]{@link CircleProgress#drawAnimated}.
|
||||
*
|
||||
* @param {object} [configOrCommand] - Config object or command name.
|
||||
*
|
||||
* Config example (you can specify any {@link CircleProgress} property):
|
||||
*
|
||||
* ```js
|
||||
* { value: 0.75, size: 50, animation: false }
|
||||
* ```
|
||||
*
|
||||
* Commands:
|
||||
*
|
||||
* ```js
|
||||
* el.circleProgress('widget'); // get the <canvas>
|
||||
* el.circleProgress('value'); // get the value
|
||||
* el.circleProgress('value', newValue); // update the value
|
||||
* el.circleProgress('redraw'); // redraw the circle
|
||||
* el.circleProgress(); // the same as 'redraw'
|
||||
* ```
|
||||
*
|
||||
* @param {string} [commandArgument] - Some commands (like `'value'`) may require an argument.
|
||||
* @see CircleProgress
|
||||
* @alias "$(...).circleProgress"
|
||||
*/
|
||||
$.fn.circleProgress = function(configOrCommand, commandArgument) {
|
||||
var dataName = 'circle-progress',
|
||||
firstInstance = this.data(dataName);
|
||||
|
||||
if (configOrCommand == 'widget') {
|
||||
if (!firstInstance)
|
||||
throw Error('Calling "widget" method on not initialized instance is forbidden');
|
||||
return firstInstance.canvas;
|
||||
}
|
||||
|
||||
if (configOrCommand == 'value') {
|
||||
if (!firstInstance)
|
||||
throw Error('Calling "value" method on not initialized instance is forbidden');
|
||||
if (typeof commandArgument == 'undefined') {
|
||||
return firstInstance.getValue();
|
||||
} else {
|
||||
var newValue = arguments[1];
|
||||
return this.each(function() {
|
||||
$(this).data(dataName).setValue(newValue);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
var el = $(this),
|
||||
instance = el.data(dataName),
|
||||
config = $.isPlainObject(configOrCommand) ? configOrCommand : {};
|
||||
|
||||
if (instance) {
|
||||
instance.init(config);
|
||||
} else {
|
||||
var initialConfig = $.extend({}, el.data());
|
||||
if (typeof initialConfig.fill == 'string')
|
||||
initialConfig.fill = JSON.parse(initialConfig.fill);
|
||||
if (typeof initialConfig.animation == 'string')
|
||||
initialConfig.animation = JSON.parse(initialConfig.animation);
|
||||
config = $.extend(initialConfig, config);
|
||||
config.el = el;
|
||||
instance = new CircleProgress(config);
|
||||
el.data(dataName, instance);
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
@ -0,0 +1,261 @@
|
||||
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory(require, exports, module);
|
||||
} else {
|
||||
root.CountUp = factory();
|
||||
}
|
||||
}(this, function(require, exports, module) {
|
||||
|
||||
/*
|
||||
|
||||
countUp.js
|
||||
by @inorganik
|
||||
|
||||
*/
|
||||
|
||||
// target = id of html element or var of previously selected html element where counting occurs
|
||||
// startVal = the value you want to begin at
|
||||
// endVal = the value you want to arrive at
|
||||
// decimals = number of decimal places, default 0
|
||||
// duration = duration of animation in seconds, default 2
|
||||
// options = optional object of options (see below)
|
||||
|
||||
var CountUp = function(target, startVal, endVal, decimals, duration, options) {
|
||||
|
||||
var self = this;
|
||||
self.version = function () { return '1.9.3'; };
|
||||
|
||||
// default options
|
||||
self.options = {
|
||||
useEasing: true, // toggle easing
|
||||
useGrouping: true, // 1,000,000 vs 1000000
|
||||
separator: ',', // character to use as a separator
|
||||
decimal: '.', // character to use as a decimal
|
||||
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
|
||||
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
|
||||
prefix: '', // optional text before the result
|
||||
suffix: '', // optional text after the result
|
||||
numerals: [] // optionally pass an array of custom numerals for 0-9
|
||||
};
|
||||
|
||||
// extend default options with passed options object
|
||||
if (options && typeof options === 'object') {
|
||||
for (var key in self.options) {
|
||||
if (options.hasOwnProperty(key) && options[key] !== null) {
|
||||
self.options[key] = options[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (self.options.separator === '') {
|
||||
self.options.useGrouping = false;
|
||||
}
|
||||
else {
|
||||
// ensure the separator is a string (formatNumber assumes this)
|
||||
self.options.separator = '' + self.options.separator;
|
||||
}
|
||||
|
||||
// make sure requestAnimationFrame and cancelAnimationFrame are defined
|
||||
// polyfill for browsers without native support
|
||||
// by Opera engineer Erik Möller
|
||||
var lastTime = 0;
|
||||
var vendors = ['webkit', 'moz', 'ms', 'o'];
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
if (!window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
if (!window.cancelAnimationFrame) {
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}
|
||||
|
||||
function formatNumber(num) {
|
||||
var neg = (num < 0),
|
||||
x, x1, x2, x3, i, len;
|
||||
num = Math.abs(num).toFixed(self.decimals);
|
||||
num += '';
|
||||
x = num.split('.');
|
||||
x1 = x[0];
|
||||
x2 = x.length > 1 ? self.options.decimal + x[1] : '';
|
||||
if (self.options.useGrouping) {
|
||||
x3 = '';
|
||||
for (i = 0, len = x1.length; i < len; ++i) {
|
||||
if (i !== 0 && ((i % 3) === 0)) {
|
||||
x3 = self.options.separator + x3;
|
||||
}
|
||||
x3 = x1[len - i - 1] + x3;
|
||||
}
|
||||
x1 = x3;
|
||||
}
|
||||
// optional numeral substitution
|
||||
if (self.options.numerals.length) {
|
||||
x1 = x1.replace(/[0-9]/g, function(w) {
|
||||
return self.options.numerals[+w];
|
||||
})
|
||||
x2 = x2.replace(/[0-9]/g, function(w) {
|
||||
return self.options.numerals[+w];
|
||||
})
|
||||
}
|
||||
return (neg ? '-' : '') + self.options.prefix + x1 + x2 + self.options.suffix;
|
||||
}
|
||||
// Robert Penner's easeOutExpo
|
||||
function easeOutExpo(t, b, c, d) {
|
||||
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
|
||||
}
|
||||
function ensureNumber(n) {
|
||||
return (typeof n === 'number' && !isNaN(n));
|
||||
}
|
||||
|
||||
self.initialize = function() {
|
||||
if (self.initialized) return true;
|
||||
|
||||
self.error = '';
|
||||
self.d = (typeof target === 'string') ? document.getElementById(target) : target;
|
||||
if (!self.d) {
|
||||
self.error = '[CountUp] target is null or undefined'
|
||||
return false;
|
||||
}
|
||||
self.startVal = Number(startVal);
|
||||
self.endVal = Number(endVal);
|
||||
// error checks
|
||||
if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
|
||||
self.decimals = Math.max(0, decimals || 0);
|
||||
self.dec = Math.pow(10, self.decimals);
|
||||
self.duration = Number(duration) * 1000 || 2000;
|
||||
self.countDown = (self.startVal > self.endVal);
|
||||
self.frameVal = self.startVal;
|
||||
self.initialized = true;
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
self.error = '[CountUp] startVal ('+startVal+') or endVal ('+endVal+') is not a number';
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Print value to target
|
||||
self.printValue = function(value) {
|
||||
var result = self.options.formattingFn(value);
|
||||
|
||||
if (self.d.tagName === 'INPUT') {
|
||||
this.d.value = result;
|
||||
}
|
||||
else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
|
||||
this.d.textContent = result;
|
||||
}
|
||||
else {
|
||||
this.d.innerHTML = result;
|
||||
}
|
||||
};
|
||||
|
||||
self.count = function(timestamp) {
|
||||
|
||||
if (!self.startTime) { self.startTime = timestamp; }
|
||||
|
||||
self.timestamp = timestamp;
|
||||
var progress = timestamp - self.startTime;
|
||||
self.remaining = self.duration - progress;
|
||||
|
||||
// to ease or not to ease
|
||||
if (self.options.useEasing) {
|
||||
if (self.countDown) {
|
||||
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
|
||||
} else {
|
||||
self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
|
||||
}
|
||||
} else {
|
||||
if (self.countDown) {
|
||||
self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
|
||||
} else {
|
||||
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
|
||||
}
|
||||
}
|
||||
|
||||
// don't go past endVal since progress can exceed duration in the last frame
|
||||
if (self.countDown) {
|
||||
self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
|
||||
} else {
|
||||
self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
|
||||
}
|
||||
|
||||
// decimal
|
||||
self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;
|
||||
|
||||
// format and print value
|
||||
self.printValue(self.frameVal);
|
||||
|
||||
// whether to continue
|
||||
if (progress < self.duration) {
|
||||
self.rAF = requestAnimationFrame(self.count);
|
||||
} else {
|
||||
if (self.callback) self.callback();
|
||||
}
|
||||
};
|
||||
// start your animation
|
||||
self.start = function(callback) {
|
||||
if (!self.initialize()) return;
|
||||
self.callback = callback;
|
||||
self.rAF = requestAnimationFrame(self.count);
|
||||
};
|
||||
// toggles pause/resume animation
|
||||
self.pauseResume = function() {
|
||||
if (!self.paused) {
|
||||
self.paused = true;
|
||||
cancelAnimationFrame(self.rAF);
|
||||
} else {
|
||||
self.paused = false;
|
||||
delete self.startTime;
|
||||
self.duration = self.remaining;
|
||||
self.startVal = self.frameVal;
|
||||
requestAnimationFrame(self.count);
|
||||
}
|
||||
};
|
||||
// reset to startVal so animation can be run again
|
||||
self.reset = function() {
|
||||
self.paused = false;
|
||||
delete self.startTime;
|
||||
self.initialized = false;
|
||||
if (self.initialize()) {
|
||||
cancelAnimationFrame(self.rAF);
|
||||
self.printValue(self.startVal);
|
||||
}
|
||||
};
|
||||
// pass a new endVal and start animation
|
||||
self.update = function (newEndVal) {
|
||||
if (!self.initialize()) return;
|
||||
newEndVal = Number(newEndVal);
|
||||
if (!ensureNumber(newEndVal)) {
|
||||
self.error = '[CountUp] update() - new endVal is not a number: '+newEndVal;
|
||||
return;
|
||||
}
|
||||
self.error = '';
|
||||
if (newEndVal === self.frameVal) return;
|
||||
cancelAnimationFrame(self.rAF);
|
||||
self.paused = false;
|
||||
delete self.startTime;
|
||||
self.startVal = self.frameVal;
|
||||
self.endVal = newEndVal;
|
||||
self.countDown = (self.startVal > self.endVal);
|
||||
self.rAF = requestAnimationFrame(self.count);
|
||||
};
|
||||
|
||||
// format startVal on initialization
|
||||
if (self.initialize()) self.printValue(self.startVal);
|
||||
};
|
||||
|
||||
return CountUp;
|
||||
|
||||
}));
|
||||
@ -0,0 +1 @@
|
||||
!function(a,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n(require,exports,module):a.CountUp=n()}(this,function(a,n,t){return function(a,n,t,e,i,r){var u=this;if(u.version=function(){return"1.9.3"},u.options={useEasing:!0,useGrouping:!0,separator:",",decimal:".",easingFn:function(a,n,t,e){return t*(1-Math.pow(2,-10*a/e))*1024/1023+n},formattingFn:function(a){var n,t,e,i,r,o,s=a<0;if(a=Math.abs(a).toFixed(u.decimals),n=(a+="").split("."),t=n[0],e=1<n.length?u.options.decimal+n[1]:"",u.options.useGrouping){for(i="",r=0,o=t.length;r<o;++r)0!==r&&r%3==0&&(i=u.options.separator+i),i=t[o-r-1]+i;t=i}return u.options.numerals.length&&(t=t.replace(/[0-9]/g,function(a){return u.options.numerals[+a]}),e=e.replace(/[0-9]/g,function(a){return u.options.numerals[+a]})),(s?"-":"")+u.options.prefix+t+e+u.options.suffix},prefix:"",suffix:"",numerals:[]},r&&"object"==typeof r)for(var o in u.options)r.hasOwnProperty(o)&&null!==r[o]&&(u.options[o]=r[o]);""===u.options.separator?u.options.useGrouping=!1:u.options.separator=""+u.options.separator;for(var s=0,l=["webkit","moz","ms","o"],m=0;m<l.length&&!window.requestAnimationFrame;++m)window.requestAnimationFrame=window[l[m]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[l[m]+"CancelAnimationFrame"]||window[l[m]+"CancelRequestAnimationFrame"];function d(a){return"number"==typeof a&&!isNaN(a)}window.requestAnimationFrame||(window.requestAnimationFrame=function(a,n){var t=(new Date).getTime(),e=Math.max(0,16-(t-s)),i=window.setTimeout(function(){a(t+e)},e);return s=t+e,i}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}),u.initialize=function(){return!!u.initialized||(u.error="",u.d="string"==typeof a?document.getElementById(a):a,u.d?(u.startVal=Number(n),u.endVal=Number(t),d(u.startVal)&&d(u.endVal)?(u.decimals=Math.max(0,e||0),u.dec=Math.pow(10,u.decimals),u.duration=1e3*Number(i)||2e3,u.countDown=u.startVal>u.endVal,u.frameVal=u.startVal,u.initialized=!0):(u.error="[CountUp] startVal ("+n+") or endVal ("+t+") is not a number",!1)):!(u.error="[CountUp] target is null or undefined"))},u.printValue=function(a){var n=u.options.formattingFn(a);"INPUT"===u.d.tagName?this.d.value=n:"text"===u.d.tagName||"tspan"===u.d.tagName?this.d.textContent=n:this.d.innerHTML=n},u.count=function(a){u.startTime||(u.startTime=a);var n=(u.timestamp=a)-u.startTime;u.remaining=u.duration-n,u.options.useEasing?u.countDown?u.frameVal=u.startVal-u.options.easingFn(n,0,u.startVal-u.endVal,u.duration):u.frameVal=u.options.easingFn(n,u.startVal,u.endVal-u.startVal,u.duration):u.countDown?u.frameVal=u.startVal-(u.startVal-u.endVal)*(n/u.duration):u.frameVal=u.startVal+(u.endVal-u.startVal)*(n/u.duration),u.countDown?u.frameVal=u.frameVal<u.endVal?u.endVal:u.frameVal:u.frameVal=u.frameVal>u.endVal?u.endVal:u.frameVal,u.frameVal=Math.round(u.frameVal*u.dec)/u.dec,u.printValue(u.frameVal),n<u.duration?u.rAF=requestAnimationFrame(u.count):u.callback&&u.callback()},u.start=function(a){u.initialize()&&(u.callback=a,u.rAF=requestAnimationFrame(u.count))},u.pauseResume=function(){u.paused?(u.paused=!1,delete u.startTime,u.duration=u.remaining,u.startVal=u.frameVal,requestAnimationFrame(u.count)):(u.paused=!0,cancelAnimationFrame(u.rAF))},u.reset=function(){u.paused=!1,delete u.startTime,u.initialized=!1,u.initialize()&&(cancelAnimationFrame(u.rAF),u.printValue(u.startVal))},u.update=function(a){u.initialize()&&(d(a=Number(a))?(u.error="",a!==u.frameVal&&(cancelAnimationFrame(u.rAF),u.paused=!1,delete u.startTime,u.startVal=u.frameVal,u.endVal=a,u.countDown=u.startVal>u.endVal,u.rAF=requestAnimationFrame(u.count))):u.error="[CountUp] update() - new endVal is not a number: "+a)},u.initialize()&&u.printValue(u.startVal)}});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue