😎 » DARYA DLE » Готовые дизайны » Обратный отсчет для сайта
620 0  

Обратный отсчет для сайта

Отдельный блок для отсчета времени. Минимум скрипта. Адаптивная верстка. Анимация.

 

Результат такого отсчета вверху страницы.

По сути Вам нужно сменить только время в скрипте 2 раза (вначале 2 и 4 строки)

! Не знаю почему но иногда счетчик не работает если стили прописаны в отдельном файле. Нужно их разместить сразу после штмл блока.

- СМОТРЕТЬ ПРИМЕР

1. Добавляем код:

<div class="comingsoon_page" style="background:#000;">
<div class="container">
<!-- section -->
<div class="countdown_dashboard"><div class="flipTimer">
<div class="days"></div><div class="hours"></div><div class="minutes"></div><div class="seconds"></div><div class="clearfix"></div>
<div class="fttext">ДНЕЙ</div><div class="fttext">ЧАСОВ</div><div class="fttext">МИНУТ</div><div class="fttext">СЕКУНД</div>
</div>
</div>
<!-- end section -->
</div>
</div>


2. Добавляем скрипт:

Вставить вконце шаблона main.tpl, после {jsfiles} :
    ------
<!-- Obratniy otshet dati  -->
<script>
$(document).ready(function() {
$('.flipTimer').flipTimer({ direction: 'down', date: 'December 18, 2017 08:30:30', callback: function() { alert('times up!'); } }); });
!function(i){var s=function(t,n){this.element=t,this.element.hasClass("flipTimer")||this.element.addClass("flipTimer"),this.userOptions=n,this.defaultOptions=s.defaults,this.options=i.extend({},this.defaultOptions,this.userOptions),this.element.find(".seconds").length>0&&(this.options.seconds=this.element.find(".seconds")[0]),this.element.find(".minutes").length>0&&(this.options.minutes=this.element.find(".minutes")[0]),this.element.find(".hours").length>0&&(this.options.hours=this.element.find(".hours")[0]),this.element.find(".days").length>0&&(this.options.days=this.element.find(".days")[0]),this.initDate=new Date,this.options.date=new Date(this.options.date),this.calculateDate()};
s.defaults={seconds:!1,minutes:!1,hours:!1,days:!1,date:"December 18, 2018 08:30:30",direction:"up",callback:null,digitTemplate:'<div class="digit">  <div class="digit-top">    <span class="digit-wrap"></span>  </div>  <div class="shadow-top"></div>  <div class="digit-bottom">    <span class="digit-wrap"></span>  </div>  <div class="shadow-bottom"></div></div>'},s.prototype={calculateDate:function(){var i;"down"==this.options.direction?i=this.options.date-this.initDate:"up"==this.options.direction&&(i=this.initDate-this.options.date),this.seconds=Math.floor(i/1e3)%60,this.minutes=Math.floor(i/1e3/60)%60,this.hours=Math.floor(i/1e3/3600)%24,this.days=Math.floor(i/1e3/60/60/24),this.render()},render:function(){this.options.seconds&&this.renderDigits(this.options.seconds,this.seconds),this.options.minutes&&this.renderDigits(this.options.minutes,this.minutes),this.options.hours&&this.renderDigits(this.options.hours,this.hours),this.options.days&&this.renderDigits(this.options.days,this.days),this.startTimer()},renderDigits:function(s,t){var n,e,o,d,a,r,h=this;0==i(s).find(".digit").length&&(r=h.days<0&&h.hours<0&&h.minutes<0&&h.seconds<0?[0,0]:h.days>99?[0,0]:String((t/10).toFixed(1)).split("."),d=s==h.options.seconds||s==h.options.minutes?5:s==h.options.hours?2:9,i(s).append('<div class="digit-set"></div><div class="digit-set"></div>'),i(s).find(".digit-set").each(function(s){for(o=0==s?d:9,n=0;o>=n;n++)i(this).append(h.options.digitTemplate),e="down"==h.options.direction?o-n:n,a=i(this).find(".digit")[n],i(a).find(".digit-wrap").append(e),e==r[s]?i(a).addClass("active"):0!=r[s]&&e+1==r[s]?i(a).addClass("previous"):0==r[s]&&e==o&&i(a).addClass("previous")}))},startTimer:function(){var i=this;clearInterval(this.timer),this.timer=setInterval(function(){return i.days<=0&&i.hours<=0&&i.minutes<=0&&i.seconds<=0?(i.options.callback&&i.options.callback(),void clearInterval(i.timer)):i.days>99||99==i.days&&23==i.hours&&59==i.minutes&&59==i.seconds?void clearInterval(i.timer):("down"==i.options.direction?i.seconds--:i.seconds++,i.options.seconds&&i.increaseDigit(i.options.seconds),(60==i.seconds||-1==i.seconds)&&("down"==i.options.direction?(i.seconds=59,i.minutes--):(i.seconds=0,i.minutes++),i.options.minutes&&i.increaseDigit(i.options.minutes)),(60==i.minutes||-1==i.minutes)&&("down"==i.options.direction?(i.minutes=59,i.hours--):(i.minutes=0,i.hours++),i.options.hours&&i.increaseDigit(i.options.hours)),void((24==i.hours||-1==i.hours)&&("down"==i.options.direction?(i.hours=23,i.days--):(i.hours=0,i.days++),i.options.days&&i.increaseDigit(i.options.days))))},1e3)},increaseDigit:function(s){function t(o){var d=i(o).find(".active"),a=i(o).find(".previous"),r=i.inArray(o,n);a.removeClass("previous"),d.removeClass("active").addClass("previous"),0==d.next().length?("down"!=e.options.direction||s!=e.options.hours||-1!=e.hours&&23!=e.hours||10!=i(o).find(".digit").length?i(o).find(".digit:first-child").addClass("active"):i(i(o).find(".digit")[6]).addClass("active"),0!=r&&t(n[r-1])):"up"==e.options.direction&&s==e.options.hours&&24==e.hours?(i(o).find(".digit:first-child").addClass("active"),t(n[r-1])):d.next().addClass("active")}var n=new Array,e=this;i(s).find(".digit-set").each(function(){n.push(this)}),t(n[n.length-1])}},i.fn.flipTimer=function(t){return this.each(function(){i(this).data("flipTimer")||i(this).data("flipTimer",new s(i(this),t))})}}(jQuery);
</script><!-- /Obratniy otshet dati  -->


3. Добавляем стили:

Внимание! Стили не сжимать!

<style>
/* OBRATNY SHET */
.comingsoon_page {float: left;width: 100%;}
.topcontsoon {float: left;width: 100%;position: relative;text-align: center;margin-bottom: 59px;}
.topcontsoon h5 {color: #e3e3e3;margin: 35px 0px 0px 0px;text-transform: uppercase;}
.socialiconssoon {width: 40%;position: relative;text-align: center;margin: 25px auto 0 auto;padding-top: 40px;border-top: 1px solid rgba(255,255,255,.2);}
.socialiconssoon i {color: #fff;background: rgba(255,255,255,.3);width: 34px;height: 34px;margin: 0px 2px;text-align: center;vertical-align: middle;line-height: 35px;border-radius: 100%;transition: all 0.3s ease;}
.socialiconssoon i:hover {background: rgba(255,255,255,.5);}
.countdown_dashboard {width:400px;height:70px;margin:20px auto 0px auto;}
.countdown_dashboard .dash {height: 59px;position: relative;float: left;*zoom:1;margin: 0px 50px 0px 0px;font-size: 35px;font-weight: 300;text-align: center;color: #fff;font-weight: bold;border-right: 1px solid rgba(255,255,255,.2);padding-right: 50px;}
.countdown_dashboard .dash.last {border-right: 0px solid #fff;}
.countdown_dashboard .dash .digit {width: 27px;height: 50px;text-align: center;float: left;margin-right: 0px;}
.countdown_dashboard .dash span {width: 50px;position: absolute;left: 0;bottom: -8px;font-size: 14px;padding-top: 3px;padding-left: 17px;font-weight: normal;text-transform: uppercase;text-align: left;}
.comingsoon_page .newslesoon {float: left;width: 70%;padding: 10px 20px;border: 1px solid rgba(255, 255, 255, 0.3);background: none;color: #999;}
.comingsoon_page .newslesubmit {float: left;padding: 9px 20px;border: 1px solid #727272;background: rgba(255, 255, 255, 0.3);color: #fff;cursor: pointer;transition: all 0.3s ease;}
.comingsoon_page .newslesubmit:hover {background: rgba(255, 255, 255, 0.4);}
@keyframes flipTop {0% {transform: perspective(400px) rotateX(0deg); } 100% {transform: perspective(400px) rotateX(-90deg); } }
@keyframes flipBottom {0% {transform: perspective(400px) rotateX(90deg); } 100% {transform: perspective(400px) rotateX(0deg); } }
.flipTimer {color: #FFF;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 45px;font-weight: bold;line-height: 50px;height: 50px;}
.flipTimer div {margin-right: 25px;}
.fttext {float: left;width: 95px;text-align: center;color: #353434;font-size: 16px;text-transform: uppercase;font-weight: 300;z-index:509;position: relative;padding-right: 12px;}
.flipTimer .seperator {vertical-align: top;margin: 0 -20px;display: inline;}
.flipTimer .seconds, .flipTimer .minutes, .flipTimer .hours, .flipTimer .days {height: 100%;display: inline;}
.flipTimer .digit-set {border-radius: 0px;box-shadow: 0 1px 0px rgba(0, 0, 0, 0.8);border: 1px solid #111111;width: 45px;height: 100%;display: inline-block;position: relative;margin: 0 1px;}
.flipTimer .digit {position: absolute;height: 100%;}
.flipTimer .digit > div {position: absolute;left: 0;overflow: hidden;height: 50%;padding: 0 10px;}
.flipTimer .digit > div.digit-top, .flipTimer .digit > div.shadow-top {background-color: #333;border-bottom: 1px solid #333;box-sizing: border-box;top: 0;z-index: 0;border-radius: 0px 0px 0 0;}
.flipTimer .digit > div.digit-top:before, .flipTimer .digit > div.shadow-top:before {content: "";box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.4);height: 100%;width: 100%;position: absolute;left: 0;top: 0;}
.flipTimer .digit > div.shadow-top {background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(black));width: 45px;opacity: 0;-webkit-transition: opacity 0.3s ease-in;}
.flipTimer .digit > div.digit-bottom, .flipTimer .digit > div.shadow-bottom {background-color: #333;bottom: 0;z-index: 0;border-radius: 0 0 0px 0px;}
.flipTimer .digit > div.digit-bottom .digit-wrap, .flipTimer .digit > div.shadow-bottom .digit-wrap {display: block;margin-top: -100%;}
.flipTimer .digit > div.digit-bottom:before, .flipTimer .digit > div.shadow-bottom:before {
content: "";box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.3);border-radius: 0 0 0px 0px;height: 100%;width: 100%;position: absolute;left: 0;top: 0;}
.flipTimer .digit > div.shadow-bottom {background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(rgba(0, 0, 0, 0)));
width: 25px;opacity: 0;	-webkit-transition: opacity 0.3s ease-in;}
.flipTimer > div:nth-of-type(1), .flipTimer > div:nth-of-type(5) {margin-left:30px;}
.flipTimer > div:nth-of-type(7) {margin-right:0;}
.flipTimer .digit.previous .digit-top,
.flipTimer .digit.previous .shadow-top {opacity: 1;z-index: 2;-webkit-transform-origin: 50% 100%;-webkit-animation: flipTop 0.3s ease-in both;-moz-transform-origin: 50% 100%;-moz-animation: flipTop 0.3s ease-in both;-ms-transform-origin: 50% 100%;-ms-animation: flipTop 0.3s ease-in both;transform-origin: 50% 100%;animation: flipTop 0.3s ease-in both;}
.flipTimer .digit.previous .digit-bottom,
.flipTimer .digit.previous .shadow-bottom {z-index: 1;opacity: 1;}
.flipTimer .digit.active .digit-top {z-index: 1;}
.flipTimer .digit.active .digit-bottom {z-index: 2;-webkit-transform-origin: 50% 0%;-webkit-animation: flipBottom 0.3s 0.3s ease-out both;-moz-transform-origin: 50% 0%;-moz-animation: flipBottom 0.3s 0.3s ease-out both;-ms-transform-origin: 50% 0%;-ms-animation: flipBottom 0.3s 0.3s ease-out both;transform-origin: 50% 0%;animation: flipBottom 0.3s 0.3s ease-out both;}
@media only screen and (max-width: 479px){
.comingsoon_page {transform:scale(0.7, 0.7);}
}

</style>


bully Не забываем поблагодарить за халяву...


Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023