Javascript CSS based Parallax flipping calendar design

3D Style Flipping animation impact is utilised in this calendar. At the point when you click a date, the whole calendar flips to give you the related subtleties. The parallax flipping impact is taken care of well in this design and the client can encounter it completely. You can use this type of modern flipping calendar design in your project make to more awesome.
Javascript CSS based Parallax flipping calendar

HTML

<body onload="startTime()">
  <div class="container">
    <div class="card">
      <div class="front">
        <div class="contentfront">
          <div class="month">
            <table>
              <tr class="orangeTr">
                <th>M</th>
                <th>T</th>
                <th>W</th>
                <th>T</th>
                <th>F</th>
                <th>S</th>
                <th>S</th>
              </tr>
              <tr class="whiteTr">
                <th></th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
              </tr>
              <tr class="whiteTr">
                <th>7</th>
                <th>8</th>
                <th>9</th>
                <th>10</th>
                <th>11</th>
                <th>12</th>
                <th>13</th>
              </tr>
              <tr class="whiteTr">
                <th>14</th>
                <th>15</th>
                <th>16</th>
                <th>17</th>
                <th>18</th>
                <th>19</th>
                <th>20</th>
              </tr>
              <tr class="whiteTr">
                <th>21</th>
                <th>22</th>
                <th>23</th>
                <th>24</th>
                <th>25</th>
                <th>26</th>
                <th>27</th>
              </tr>
              <tr class="whiteTr">
                <th>28</th>
                <th>29</th>
                <th>30</th>
                <th>31</th>
                <th></th>
                <th></th>
                <th></th>
              </tr>
            </table>
          </div>
          <div class="date">
            <div class="datecont">
              <div id="date"></div>
              <div id="day"></div>
              <div id="month"></div>
              <i class="fa fa-pencil edit" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="back">
        <div class="contentback">
          <div class="backcontainer">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>


CSS

body{
  margin:0;
  background-color:#010712;
  background-image:url(https://static.pexels.com/photos/1526/dark-blur-blurred-gradient.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  height:100vh;
}
.container{
  width:400px;
  height:200px;
  position:relative;
  perspective: 1000;
  -webkit-perspective: 1000;
  left:calc(50% - 200px);
  top:calc(50vh - 100px);
}
.card{
  width:100%;
  height:100%;
  position:absolute;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform 1s ease;
  cursor:pointer;
}
.back, .front{
  border-radius:6px;
  position:absolute;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
 
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.contentfront{
  width:100%;
  height:100%;
  float:left;
  transform:translatez(60px);
  -webkit-transform:translatez(60px);
 
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
 
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
 
}
.contentback{
  width:100%;
  height:100%;
  float:left;
  transform:translatez(60px);
  -webkit-transform:translatez(60px);
 
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
 
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
 
}
.back{
  transform:rotateY(180deg);
  background-color:#232227;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front{
  text-transform:uppercase;
  background-color:#232227;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.date{
  height:100%;
  width:130px;
  float:left;
  background-color:#E76642;
  border-radius:0 6px 6px 0;
  text-align:right;
  padding:10px 30px;
  box-sizing:border-box;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.datecont{
  height:100%;
  transform:translatez(60px) scale(.9);
  -webkit-transform:translatez(60px) scale(.9);
}
#date{
  font-size:50px;
  color:#ECECE7;
  font-family: 'Montserrat', sans-serif;
  font-weight:500;
  float:right;
}
#day{
  float:right;
  font-size:14px;
  color:#232227;
  font-family: 'Montserrat', sans-serif;
  font-weight:400;
}
#month{
  float:right;
  font-size:10px;
  color:#232227;
  font-family: 'Montserrat', sans-serif;
  font-weight:200;
}
.date i{
  color:#ECECE7;
  position:absolute;
  bottom:10px;
  right:0;
}
.date i:hover{
  color:#232227;
  transition:.3s ease;
}
.month{
  height:100%;
  width:270px;
  float:left;
  padding:20px 30px;
  box-sizing:border-box;
}
.month table{
  width:100%;
}
.orangeTr{
  color:#E76642;
}
.whiteTr{
  color:#ECECE7;
 
}
.whiteTr th:hover{
  color:#E76642;
  transition:.3s ease;
}
.month tr{
  height:24px;
}
.month th{
  width:14%;
  font-size:10px;
  font-family: 'Montserrat', sans-serif;
  font-weight:400;
}
 
.flipped{
  transform:rotateY(-180deg);
  /*height:400px;
  width:200px;
  left:calc(50% - 100px);
  top:calc(50vh - 200px);*/
}
.backcontainer{
  transform-style:preserve-3d;
  width:calc(100% - 60px);
  height:calc(100% - 40px);
  float:left;
  margin-left:30px;
  margin-top:20px;
  /*transform:translatez(60px) scale();*/
 
  background-color:#E76642;
  border-radius:6px;
  padding:10px 30px;
  box-sizing:border-box;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}


JS

let cardElement = document.querySelector(".card");
 
cardElement.addEventListener("click", flip);
 
function flip(){
  cardElement.classList.toggle("flipped")
}
 
function startTime() {
    var weekday = new Array();
    weekday[0] =  "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var d = today.getDate();
    var y = today.getFullYear();
    var wd = weekday[today.getDay()];
    var mt = month[today.getMonth()];
 
    m = checkTime(m);
    s = checkTime(s);
                    document.getElementById('date').innerHTML =
    d;
 document.getElementById('day').innerHTML =
    wd;
 document.getElementById('month').innerHTML =
    mt + "/" + y;
 
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by andreas_pihl. Visit their official repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.