Thêm tiện ích Lịch vào website với header thay đổi theo từng mùa ~ Iris Tips

Calendar with animated header

Đây là một tiện ích khá thú vị. Nó giúp bạn xem được ngày tháng hiện tại trên chính website của mình. Đồng với hiệu ứng hình ảnh trên header thay đổi theo từng mùa.

Ví dụ trong hình là tháng 3 sẽ hiện hình hoa lá biểu hiện cho mùa xuân, chuyển qua tháng 6 sẽ là hình mặt trời cho mùa hè, tháng 9 hình lá vàng rơi mùa thu và tháng 12 sẽ là hình bông tuyết cho mùa đông.

Thật thú vị phải không nào hãy cùng Iris Tips mang widget này ngay về website của bạn nhé.
Cách thực hiện

1Vào Bố cục >> Thêm tiện ích HTML/Javascript và copy đoạn code bên dưới vào
<style type="text/css">
:root{--theme:#8dcfff;--col:#FFFFFF}
.container{text-align:center;width:430px;margin:0 auto;position:relative}
.btn__wrapper,.calendar{display:inline-block}
.btn__wrapper{position:absolute;top:50%;transform:translateY(-50%)}
.btn__wrapper.next{right:0}
.btn__wrapper.prev{left:0}
.btn__wrapper.next,.btn__wrapper.prev{cursor:pointer}
.btn__wrapper.next path,.btn__wrapper.prev path{stroke:var(--theme)}
.calendar{width:350px;background-color:#FFFFFF;position:relative;margin:3rem auto}
.calendar__header{background-color:var(--theme);color:var(--col);text-align:center;padding-top:15px;padding-bottom:15px}
.calendar__month__year{display:inline-block;background-color:var(--theme);position:relative;padding:5px;z-index:9999}
.calendar__body{position:relative}
.calendar__days{text-align:left}
.calendar__day{display:inline-block;width:50px;height:50px;position:relative}
.calendar__day__number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.draw-circle,.header__season{position:absolute}
.draw-circle svg,.header__season svg{position:relative}
.draw-circle svg{left:5px;top:5px}
svg use{stroke:#222;stroke-width:1}
.today-svg{stroke:var(--theme);stroke-width:2}
#winter,#spring,#summer,#fall{visibility:hidden}
#winter.winter,#spring.spring,#summer.summer,#fall.fall{visibility:visible}
.today-svg.hidden,.selected-days.hidden{display:none}
</style>
<div class="container">
  <div class="btn__wrapper prev">
     <svg class="prev" width="11px" height="23px" viewBox="381 624 11 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Artboard-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(381.000000, 624.000000)" stroke-linecap="square">
<path d="M0.3,11.7 L11.1,23.1" id="Line-Copy" stroke="#979797" stroke-width="2" transform="translate(5.700000, 17.400000) scale(-1, -1) translate(-5.700000, -17.400000) "></path>
<path d="M0.3,0.3 L11.1,11.7" id="Line" stroke="#979797" stroke-width="2" transform="translate(5.700000, 6.000000) scale(-1, 1) translate(-5.700000, -6.000000) "></path>
</g>
</svg>
  </div>
  <div class="calendar">
    <div class="header__season"><svg width="350" height="82" viewBox="0 0 350 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="seasons">
<!-- We can reuse def objects with the use element-->
<g id="winter">
<circle id="winter-el" fill="#FFFFFF" stroke="none" cx="8.5" cy="8.5" x="0" y="0" r="7.5"></circle>
<path id="path" d="M10.1914062,0.30859375 C2.67796308,8.26445677 -3.08980853,17.7764221 3.3125,28.6347656 C9.98437474,39.9502947 11.757796,34.2596999 13.9902344,45.6210938 C16.086191,56.2879007 2.77202896,63.3876879 4.3046875,74.9140625 C5.54396402,84.2340546 13.5353443,89.9877083 16.0175781,98.6816406" stroke="none" fill="none"></path>
</g>
<g id="spring">
<path d="M8.49023438,19.1347656 C1.30270336,29.7492023 -0.769546799,41.6346957 2.05859375,54.3613281" id="flowerPath" stroke="#2F590B" fill="none" stroke-width="1"></path>
<g class="flower">
<path d="M15.5566406,9.47460938 C10.7288259,9.99630664 7.18624346,16.1172825 13.0488281,17.484375 C19.4090417,18.9675093 20.7813567,12.7298889 16.0683594,9.58789062 L15.5566406,9.47460938" id="Path-2" stroke="#979797" stroke-width="1" fill="#ECF158"></path>
<path d="M12.1230469,9.73632812 C3.517263,-0.650664715 17.2924486,-0.751321104 17.2871094,9.1796875" id="Path-3" stroke="#979797" stroke-width="1" fill="#E9B0B0" class="petal"></path>
<path d="M17.5292969,9.90625 C25.9936584,2.1981089 32.1552105,12.7618762 19.9765625,13.7207031" id="Path-4" stroke="#979797" stroke-width="1" fill="#C47474" class="petal"></path>
<path d="M19.9765625,13.7207031 C21.9341725,14.3056276 32.2304919,32.8114908 16.5644531,18.6484375" id="Path-5" stroke="#979797" stroke-width="1" fill="#C57070" class="petal"></path>
<path d="M15.9414062,17.6640625 C12.0811844,27.1614337 6.52622684,22.3670394 9.99804687,16.1933594" id="Path-6" stroke="#979797" stroke-width="1" fill="#E78282" class="petal"></path>
<path d="M9.26367187,15.1171875 C1.41280793,14.5132749 6.47665559,4.45907747 11.7851562,9.76757812" id="Path-7" stroke="#979797" stroke-width="1" fill="#D07A7A" class="petal"></path>
</g>
</g>
<g id="summer">
<circle id="Oval" fill="#ffc500" cx="39.75" cy="39.65" r="17.55"></circle>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2" stroke="#ffc500" stroke-width="1.3" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-5" stroke="#ffc500" stroke-width="1.3" class="shine" transform="translate(95, 43.929297) rotate(135.000000)"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-3" stroke="#ffc500" stroke-width="1.3" transform="translate(-13.875357, 38.929297) rotate(-45.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-4" stroke="#ffc500" stroke-width="1.3" transform="translate(75.875357, 81.929297) rotate(182.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-2" stroke="#ffc500" stroke-width="1.3" transform="translate(80.878049, 5.928750) rotate(90.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-6" stroke="#ffc500" stroke-width="1.3" transform="translate(-3.878049, 75.928750) rotate(273.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy" stroke="#ffc500" stroke-width="1.3" transform="translate(39.879134, -12.930838) rotate(43.000000)" class="shine"></path>
<path d="M8.459375,12.88125 C12.7385417,16.9132812 17.0177083,20.9453125 21.296875,24.9773437 L8.459375,12.88125 Z" id="Path-2-Copy-7" stroke="#ffc500" stroke-width="1.3" transform="translate(35.879134, 95.930838) rotate(225.000000)" class="shine"></path>
</g>
<g id="fall" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1018.000000, 400.000000)">
<g id="fall-el">  
<path d="M10.546875,30.3359375 C12.6465102,5.32092875 20.3465935,12.6242861 39.484375,7.16015625 C43.8547482,5.91234776 48.2189076,-2.00711917 51.640625,0.984375 C55.5465711,4.39921421 51.629364,11.5065325 50.140625,16.4765625 C45.0502822,33.4702439 24.1092521,55.2687926 10.890625,32.5976562 L10.546875,30.3359375 Z" id="Path-4" stroke="#804400" fill="#d47d02"></path>
<path d="M-0.29296875,39.4179687 C21.3453552,29.3170536 41.5288558,22.6217754 53.0507812,0.9453125" id="Path-3" stroke="#804400"></path>
<path d="M24.1171875,26.6210938 L22.3945312,19.484375" id="Path-5" stroke="#804400"></path>
<path d="M36.3320312,21.5234375 L34.3632812,14.3867188" id="Path-6" stroke="#804400"></path>
<path d="M25.1835938,26.8320312 C27.6210938,28.3736979 30.0585938,29.9153646 32.4960938,31.4570312" id="Path-7" stroke="#804400"></path>
<path d="M35.7600098,21.519989 C37.9300098,22.7309265 40.1000099,23.941864 42.27001,25.1528015" id="Path-8" stroke="#804400"></path>
</g>
<path id="path" d="M-0.171875,0.234375 C9.61459211,12.9169658 16.2633042,19.8100645 33.4140625,20.1171875 C38.4289139,20.2069897 47.7387213,13.2631575 48.34375,18.2421875 C48.9888329,23.5508406 39.3693508,24.8068802 34.078125,25.5820313 C25.6734751,26.813291 16.9117356,22.1239437 8.640625,24.0585938 C6.27660906,24.6115477 9.28700366,29.0305653 10.5976562,31.0742188 C12.4287732,33.9294136 14.9899338,36.3490127 17.7695312,38.2929688 C32.235979,48.4103109 46.9157569,52.9625614 64.6171875,52.7851563 C65.9913612,52.7713842 68.7135541,49.4239899 68.1640625,50.6835938 C57.8020206,74.4365821 23.9513163,63.1119321 9.00390625,63.3125 C7.70836948,63.3298838 8.85102584,65.9753328 9.30859375,67.1875 C10.4130072,70.1132597 11.9645757,72.8660762 13.6132812,75.5234375 C16.8993048,80.8198058 20.0426315,86.271514 24.0898437,91.0117188 C36.1829827,105.175531 48.4969991,110.28785 67.5078125,115.738281 C73.4618328,117.445309 79.8796327,117.357699 86.0546875,116.875 C88.3815691,116.693109 94.6086953,113.233417 92.34375,113.796875 C80.3008122,116.792837 68.8416886,122.180302 56.5976562,124.203125 C38.3955739,127.21027 36.6290656,115.071545 16.9765625,115.496094 C14.4998728,115.549597 16.9128936,120.675004 18.1171875,122.839844 C24.610454,134.512144 29.5538936,139.470812 40.2382812,145.828125 C41.9918309,146.871504 43.956048,147.612167 45.9570312,148.011719 C47.2619275,148.272278 48.6132812,147.847656 49.9414062,147.765625" stroke="none" fill="none"></path>
</g>
</svg>
    </div>
    <div class="calendar__header"> 
      <div class="calendar__month__year">
        <div class="calendar__month">Month</div>
        <div class="calendar__year">Year</div>
      </div>
    </div>
    <div class="calendar__body">
      <div class="draw-circle"><!-- must be width and height of calendar__body-->
<svg width="350px" height="280px" viewBox="0 0 350 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- use <use> to duplicate elements -->
<symbol>
<g id="circle-1">
<path fill="none" d="M5.15717214,10.8491064 C-5.46462548,24.6374541 5.53031259,42.0884193 23.861043,37.1415798 C35.5811294,33.9787278 45.3594842,15.034285 33.867768,6.30529878 C24.290624,-0.969398643 12.1875419,0.457776331 1.45953704,3.39418135"></path>
</g>
</symbol>
</svg>
      </div>
      <div class="calendar__days"></div>
    </div>
  </div>
  <div class="btn__wrapper next">
     <svg class="next" width="11px" height="23px" viewBox="270 624 11 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(270.000000, 624.000000)" stroke-linecap="square">
<path d="M0.3,11.7 L11.1,23.1" id="Line-Copy" stroke="#979797" stroke-width="2" transform="translate(5.700000, 17.400000) scale(1, -1) translate(-5.700000, -17.400000) "></path>
<path d="M0.3,0.3 L11.1,11.7" id="Line" stroke="#979797" stroke-width="2"></path>
</g>
</svg>
  </div>
</div>
<script type='text/javascript'>
// DrawLine code by greensock
/* Variables */
const orig = document.querySelector('.draw-circle path'),
      monthHtml = document.querySelector('.calendar__month'),
      yearHtml = document.querySelector('.calendar__year');
let length, timer, 
    html = '',
    daysHtml =  document.querySelector('.calendar__days');

const svgCircle = document.querySelector('#circle-1');

//DATES 
let thisDay = new Date(),
    thisMonth = thisDay.getMonth();


var obj = {length:0,
           pathLength:orig.getTotalLength()};

var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
];

/* Functions */
function drawLine(useEl) {
  useEl.style.strokeDasharray = [obj.length,obj.pathLength].join(' ');
}

function createUseEl(svg, el) {
    //create new use element on click
  var useElement =
    document.createElementNS('http://www.w3.org/2000/svg', 'use');

    document.querySelector(svg).appendChild(useElement);
  
    useElement.setAttributeNS(
        'http://www.w3.org/1999/xlink',
        'href', 
         el);
  return useElement
}


// get date + add month, year and days + bigger colored circle around today
function daysInMonth(month,year) {
    return new Date(year, month, 0).getDate();
}

//Get current season
function getSeason(date) {
  if(thisMonth === 12) {
      thisMonth = 0;
    }
  if(thisMonth === -1) {
      thisMonth = 11;
    }
 
    let month = thisMonth;
    let season = '';
  
  
    switch(month) {
        case 11:
        case 0:
        case 1:
            season = 'winter';
        break;
        case 2:
        case 3:
        case 4:
            season = 'spring';
        break;
        case 5:
        case 6:
        case 7:
            season = 'summer';
        break;
        case 8:
        case 9: 
        case 10:
            season = 'fall';
        break;
    }
    return season;
}


function addDate() {
  html = '';

  let today = new Date(),
        year = today.getFullYear(),
        month = monthNames[thisMonth],
        day = today.getDate(),
        totalDays = daysInMonth(today.getMonth()+1, year);
    monthHtml.innerHTML = `${month}`;
    yearHtml.innerHTML = `${year}`;
  
  // if thisMonth is not this month remove circle
  if(thisMonth !== today.getMonth()+1) {    
    totalDays = daysInMonth(thisMonth+1, year);
  }
 
    
    for(var i = 0; i < totalDays; i++) {
      
       html += `<a href="#">
                              <div class="calendar__day ${day === (i+1) ? 'today' : ''}">
                                  <div class="calendar__day__number">                                     ${i+1}</div>
                              </div>
                            </a>`;
    }
    daysHtml.innerHTML = html; 
    var element =  document.querySelector('.today-svg');
 
   if(thisMonth === today.getMonth() && !element) {
      var useEl = createUseEl('.draw-circle svg' ,'#circle-1');
      var todayHtml = document.querySelector('.today');
      var posX = todayHtml.offsetLeft;
      var posY = todayHtml.offsetTop;
      useEl.classList.add('today-svg');
      useEl.style.transform = `translate(${posX}px, ${posY}px)`;
    } 
  else if (thisMonth === today.getMonth() && element) {
    document.querySelector('.today-svg').classList.remove('hidden');
  }
  else {
     document.querySelector('.today-svg').classList.add('hidden');
  }
     
    
}

function drawOnClick() {
      let useEl = createUseEl('.draw-circle svg' ,'#circle-1');
      useEl.classList.add(`selected-days`);
      useEl.classList.add(monthNames[thisMonth]);

  
        // Reset length to 0 on every click and if second click on this element
        if (obj.length === obj.pathLength) {
          obj.length = 0;
        }

      // Animation on every use element
        TweenMax.to(obj, 0.5, {length:obj.pathLength, onUpdate:drawLine, onUpdateParams:[useEl], ease:Linear.easeNone})

        // Put svg use element on clicked location
        const posX = this.offsetLeft;
        const posY = this.offsetTop;
        useEl.style.transform = `translate(${posX}px, ${posY}px)`;
}

function seasons(next){
      //Remove previous added group elements
    var elems = document.querySelectorAll(".spring");
    elems.forEach(elem =>  elem.parentNode.removeChild(elem));
    var elems = document.querySelectorAll(".summer");
    elems.forEach(elem =>  elem.parentNode.removeChild(elem));
    var elems = document.querySelectorAll(".fall");
    elems.forEach(elem =>  elem.parentNode.removeChild(elem));
    var elems = document.querySelectorAll(".winter");
    elems.forEach(elem =>  elem.parentNode.removeChild(elem));

  let season = getSeason();
  
  if (next === true) {
    thisMonth =  thisMonth + 1;
    season = getSeason(thisMonth);
  }
  else if (next === false) {
    thisMonth =  thisMonth - 1;
    season = getSeason(thisMonth);
  }
  //change snow to seasons element
  let seasonEl, transX, transY;
  //getSeason();

  let amount = 0;
  
  if(season === 'winter') {
    amount = 30;
  }
  else if (season === 'spring') {
    amount = 15;
  }
   else if (season === 'summer') {
    amount = 1;
  }
  else if (season === 'fall') {
    amount = 15;
  }
  
  
  for(var i = 0; i < amount; i++) {
    
    //We need to clone the elements instead of using <use> because we can't animate along path with use
    seasonEl = document.getElementById(season).cloneNode(true);
    document.querySelector("#seasons").appendChild(seasonEl);
    transX = Math.floor(Math.random() * 350) + 1;
    transY = Math.floor(Math.random() * 82) + 1;
    
    seasonEl.classList.add(season);
    
    let winterEl =  seasonEl.querySelector(`#winter-el`);
    let springEl = seasonEl.querySelector('#spring');
    let summerEl = seasonEl;
    let fallEl =  seasonEl.querySelector(`#fall-el`);
    
    //animation on every new season element
    if (season === 'winter') {
      seasonEl.style.transform = `translate(${transX}px, 0px) scale(${Math.random()})`;
      snowAnimation(winterEl);
      document.documentElement.style.setProperty(`--theme`, '#8dcfff');
    }
    else if (season === 'spring') {
      seasonEl.style.transform = `translate(${transX}px, ${transY}px) scale(${Math.random()})`;
      springAnimation(seasonEl);
      document.documentElement.style.setProperty(`--theme`, '#bddc53');
    }
    else if (season === 'summer') {
      seasonEl.style.transform = `translate(270px,0) scale(${Math.random()+0.9})`;
      document.documentElement.style.setProperty(`--theme`, '#deab05');
      document.documentElement.style.setProperty(`--col`, '#222222');
      sunAnimation(summerEl);
    }
    else if (season === 'fall') {
      seasonEl.style.transform = `translate(${transX}px, 0px) scale(${Math.random()})`;
      document.documentElement.style.setProperty(`--theme`, '#ea994a');
      fallAnimation(fallEl);
    }
     
  }
}
 
function snowAnimation(el) {
  //make svg follow path 
  let siblingPath = el.nextElementSibling;
  let delayAnimation = Math.random();
   
 TweenMax.to(el, 1, { 
   bezier: {
    values: MorphSVGPlugin.pathDataToBezier(siblingPath), 
    type: "cubic"
  },
  repeat: -1,
  delay: delayAnimation,
  ease: Ease.easeOut
},  delayAnimation*10); 
}

function springAnimation(el) {
  //random flower petal colors
  let colors = ['#FF9900', '#FF6600', '#FF3300', '#F56991'];
  let petals = el.querySelectorAll('.petal'); 
  petals.forEach(petal => petal.style.fill = colors[Math.floor(Math.random() * 3) + 0]);
  
  //Scale flowerpath en move .flower 
  const path = document.querySelector('#flowerPath');

  TweenMax.to('#flowerPath', 2, { 
    scaleY:1.8, 
    transformOrigin:"50% 50%", 
    delay: 0.1,
    ease: Ease.easeOut
  },  1.5);
  TweenMax.to('.flower', 1, { 
    y:-12, 
    transformOrigin:"50% 50%", 
    delay: 0.1,
    ease: Ease.easeOut
  },  1.5);

}

function sunAnimation(el) {

  let shines = el.querySelectorAll('.shine');  
  shines.forEach((shine, i) => {
    TweenMax.to(shine, 0.8, { 
      morphSVG:'M3,8 C7.27916667,12.0320312 17.0177083,20.9453125 21.296875,24.9773437 L3,8 Z',
      repeat: -1,
      delay: i*0.1,
      ease: Ease.easeOut,
      yoyo:true
    });
  });
  let sun = el.querySelector('#Oval');
  
  TweenMax.to(sun, 2.5, { 
    scale:1.1, 
    transformOrigin:"50% 50%", 
    ease: Ease.easeOut,
    repeat:-1,
    yoyo:true
  });
}

function fallAnimation(el) {
  //make svg follow path 
  let siblingPath = el.nextElementSibling;
  let delayAnimation = Math.random();

  TweenMax.to(el, 3, { 
     bezier: {
      values: MorphSVGPlugin.pathDataToBezier(siblingPath), 
      type: "cubic"
    },
    repeat: -1,
    delay: delayAnimation,
    ease: Ease.ease
  });
}

// Fist add dates
addDate();

function addRemoveSelected() {
    let selected = document.querySelectorAll('.selected-days');
    let today = new Date();
    selected.forEach( function(useEl) {
      if( useEl.classList.contains( `${monthNames[thisMonth]}` ) ) {
         useEl.classList.remove('hidden');
      }
      else {
        useEl.classList.add('hidden');
      }
    });
      
    days = document.querySelectorAll('a');
    days.forEach(day => day.addEventListener('click', drawOnClick));
}

//get all days
var days = document.querySelectorAll('a');
const nextMonth = document.querySelector('.next');
const prevMonth = document.querySelector('.prev');
let next;
/* Event listeners */
days.forEach(day => day.addEventListener('click', drawOnClick));
 
nextMonth.addEventListener('click', function() {
  //month + 1
  next =  true;
  seasons(next);
  addDate();
  addRemoveSelected();
 
});
prevMonth.addEventListener('click', function() {
  
  //month -1
  next =  false;
 
  seasons(next);
  addDate();
  addRemoveSelected();
});



// Add seasons header
seasons(next);

//remember month of clicked element, remove hidden from element if this month is the same as that month
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='https://sites.google.com/site/iristipsblogger/file/MorphSVGPlugin.min.js'></script>
DEMO
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by Joke Gysen/Iris Tips
Iris Tips

Thêm tiện ích Lịch vào website với header thay đổi theo từng mùa

Iris Tips

Có thể bạn quan tâm

Mẹo nhỏ khi bình luận

0 Response to "Thêm tiện ích Lịch vào website với header thay đổi theo từng mùa"

Iris Tips

Thêm tiện ích Lịch vào website với header thay đổi theo từng mùa

Calendar with animated header

Cách thực hiện

Iris Tips

Có thể bạn quan tâm

Hơn 10.000 độc giả đã đăng ký thành công

Mẹo nhỏ khi bình luận

0 Response to "Thêm tiện ích Lịch vào website với header thay đổi theo từng mùa"

Cập nhật mới trên Iris Tips

Phiếu khảo sát
