Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="cc-intro-counter" id="cc-intro-counter">
- <ul class="cc-intro-counter__list">
- <li class="cc-intro-counter__item">
- <p class="cc-intro-counter__data days">00</p>
- <p class="cc-intro-counter__text">ימים</p>
- </li>
- <li class="cc-intro-counter__item">
- <p class="cc-intro-counter__data hours">00</p>
- <p class="cc-intro-counter__text">שעות</p>
- </li>
- <li class="cc-intro-counter__item">
- <p class="cc-intro-counter__data minutes">00</p>
- <p class="cc-intro-counter__text">דקות</p>
- </li>
- <li class="cc-intro-counter__item">
- <p class="cc-intro-counter__data seconds">00</p>
- <p class="cc-intro-counter__text">שניות</p>
- </li>
- </ul>
- <p class="cc-intro-counter__label">{{ lp.introTimer_label_M }}</p>
- </div>
- ------CSS---------------
- .cc-intro-counter {
- display: flex;
- justify-content: center;
- align-items: center;
- max-width: 40em;
- width: 100%;
- margin: 0 auto;
- height: 6.5em;
- box-shadow: 4px 1px 18px rgba(0, 0, 0, 0.27);
- border-radius: 0 0 10px 10px;
- background: #0081c9 linear-gradient(-196deg, rgba(3, 30, 147, 0.49) 0%, rgba(11, 153, 22, 0) 100%);
- color: #ffffff;
- font-size: 1rem;
- position: fixed;
- left: 5.45%;
- z-index: 160;
- @media (min-width: 1000px) {
- padding: 0.5em 0;
- border-radius: 0 0 43px 43px;
- left: 32.4%;
- }
- &--wide {
- max-width: 100%;
- border-radius: 0;
- left: 0;
- }
- &__list {
- margin: 0 0.286em;
- }
- &__item {
- display: inline-block;
- margin: 0 0.3em;
- font-weight: 700;
- text-transform: uppercase;
- }
- &__data {
- font-size: 3em;
- }
- &__text {
- display: block;
- font-size: 2em;
- font-weight: 300;
- direction: rtl;
- }
- &__label {
- margin: 0 0.286em;
- font-size: 3.5em;
- line-height: 4.3rem;
- direction: rtl;
- }
- }
- ------SCRIPT-------
- (function ($, window) {
- $(document).ready(function () {
- function init() {
- console.log('==> Init countdown timer');
- window.onscroll = function () {
- makeCountdownSticky();
- };
- let header = document.getElementById("cc-intro-counter");
- let $firstSection = $('.cc-intro-container');
- if (!$firstSection.length) {
- $firstSection = $('.cc-project-intro__preview');
- }
- let sticky = $firstSection.height() - 50;
- function makeCountdownSticky() {
- if (window.pageYOffset > sticky) {
- header.classList.add("cc-intro-counter--wide");
- } else {
- header.classList.remove("cc-intro-counter--wide");
- }
- }
- }
- init();
- $(document).on("viewUpdateEvent", {}, function () {
- init();
- });
- });
- })(window.jQuery, window);
- ----SCRIPT FOR CLOCK-----
- function getTimeRemaining(endtime) {
- var t = endtime - moment.utc().valueOf(),
- seconds = Math.floor((t / 1000) % 60),
- minutes = Math.floor((t / 1000 / 60) % 60),
- hours = Math.floor((t / (1000 * 60 * 60)) % 24),
- days = Math.floor(t / (1000 * 60 * 60 * 24));
- return {
- 'total': t,
- 'days': days,
- 'hours': hours,
- 'minutes': minutes,
- 'seconds': seconds
- };
- }
- function initializeClock(id, endtime) {
- var clock = document.getElementById(id);
- if (!clock) {
- return console.error('==> [Clock] Clock id not found!')
- }
- var daysSpan = clock.querySelector('.days');
- var hoursSpan = clock.querySelector('.hours');
- var minutesSpan = clock.querySelector('.minutes');
- var secondsSpan = clock.querySelector('.seconds');
- function updateClock() {
- var t = getTimeRemaining(endtime);
- daysSpan.innerHTML = t.days;
- hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
- minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
- secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
- if (t.total <= 0) {
- clearInterval(timeinterval);
- }
- }
- updateClock();
- var timeinterval = setInterval(updateClock, 1000);
- }
Add Comment
Please, Sign In to add comment