lujian
6 years ago
parent
5f1247a232
commit
b11619979f
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,458 @@
|
|||||||
|
*{
|
||||||
|
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
|
||||||
|
}
|
||||||
|
.industry-title {
|
||||||
|
font-family: SourceHanSansCN-Medium;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #07DFC8;
|
||||||
|
letter-spacing: 0.34px;
|
||||||
|
}
|
||||||
|
.industry-name {
|
||||||
|
font-family: SourceHanSansCN-Medium;
|
||||||
|
font-size: 0.4rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-transition {
|
||||||
|
-webkit-transition: width 1s;
|
||||||
|
-moz-transition: width 1s;
|
||||||
|
-ms-transition: width 1s;
|
||||||
|
-o-transition: width 1s;
|
||||||
|
transition: width 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.height-transition {
|
||||||
|
-webkit-transition: height 1s;
|
||||||
|
-moz-transition: height 1s;
|
||||||
|
-ms-transition: height 1s;
|
||||||
|
-o-transition: height 1s;
|
||||||
|
transition: height 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-transition {
|
||||||
|
-webkit-transition: bottom 1s;
|
||||||
|
-moz-transition: bottom 1s;
|
||||||
|
-ms-transition: bottom 1s;
|
||||||
|
-o-transition: bottom 1s;
|
||||||
|
transition: bottom 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide13 .paihangbang {
|
||||||
|
padding: 2rem 0.5rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide13 .paihangbang ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide13 .paihangbang ul li {
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide13 .paihangbang ul li label:nth-child(1) {
|
||||||
|
/*border: 1px solid red;*/
|
||||||
|
display: inline-block;
|
||||||
|
width: 30%;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide13 .paihangbang ul li label:nth-child(2) {
|
||||||
|
/*border: 1px solid red;*/
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide13 .paihangbang ul li label:nth-child(3) {
|
||||||
|
/*border: 1px solid red;*/
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@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 |
@ -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