Jump to content

4 posts in this topic

Recommended Posts

Posted

I was scavenging Codepen for something really Christmas-y, and I found it!

Check it out:

http://codepen.io/dazulu/pen/ByoWee

 

It's a Christmas Calendar that actually works in real-time! Amazing, huh?

Using animations, CSS and the latest in great HTML coding!

 

Too lazy to check out Codepen? View the coding down below:
 

<h1>Merry Christmas</h1>
<ul>
  <li><div class="door">1</div></li>
  <li><div class="door">2</div></li>
  <li><div class="door">3</div></li>
  <li><div class="door">4</div></li>
  <li><div class="door">5</div></li>
  <li><div class="door">6</div></li>
  <li><div class="door">7</div></li>
  <li><div class="door">8</div></li>
  <li><div class="door">9</div></li>
  <li><div class="door">10</div></li>
  <li><div class="door">11</div></li>
  <li><div class="door">12</div></li>
  <li><div class="door">13</div></li>
  <li><div class="door">14</div></li>
  <li><div class="door">15</div></li>
  <li><div class="door">16</div></li>
  <li><div class="door">17</div></li>
  <li><div class="door">18</div></li>
  <li><div class="door">19</div></li>
  <li><div class="door">20</div></li>
  <li><div class="door">21</div></li>
  <li><div class="door">22</div></li>
  <li><div class="door">23</div></li>
  <li><div class="door">24</div></li>
  <li><div class="door">25</div></li>
</ul>

<p id="message"></p>
@import url(http://fonts.googleapis.com/css?family=Oleo+Script);

body {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/xmas.jpg");
  color: #fff;
  font-family: 'Oleo Script', cursive;
  padding: 20px;
  font-weight: 400;
}

h1 {
  margin:0;
  font-size:75px;
  line-height: 75px;
  text-align: center;
  font-weight: 400;
}

ul {
  margin:0 auto 30px auto;
  padding:0;
  list-style-type:none;
  max-width:900px;
  width: 100%;
  text-align: center;
  user-select: none;
}

li {
  font-weight: 400;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 6px;
  display: inline-block;
  color:#111;
  cursor:pointer;
  font-size: 26px;
  padding:15px;
  margin:25px 12px;
  width: 130px;
  height:130px;
  line-height: 100px;
  text-align:center;
  position: relative;
  vertical-align:top;
  user-select: none;
  perspective: 800px;
  transition: all 0.4s ease-in-out;
}

ul li:last-child {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/santa.jpg") center top;
  background-size:cover;  
  display:block;
  clear:both;
  margin: 20px auto 0 auto;
  width: 200px;
  height: 275px;
}

ul li:last-child .door {
  font-size: 100px;
  width: 200px;
  height: 275px;
  line-height: 240px;
}

ul li:last-child .revealed {
  line-height: 123px;
}

.door {
  user-select: none;
  color:#fff;
  font-size: 70px;
  position: absolute;
  top:0;
  left:0;
  background-color: #91c1cc;
  box-sizing: border-box;
  border-top: 2px #eee dashed;
  border-right: 2px #eee dashed;
  border-bottom: 2px #eee dashed;
  border-left: 1px #eee solid;
  border-radius: 6px;
  padding:15px;
  width: 130px;
  height:130px;
  transform-origin: 0 40%; 
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}

.current .door {
  background-color: #7EAD44;
}

.current .door.open{
  color: #7EAD44;
}

.revealed {
  user-select: none;
}

#message {
  box-sizing: border-box;
  color: #222;
  display: none;
  font-size: 24px;
  padding: 20px;
  background: #eddecb;
  max-width: 500px;
  width: 100%;
  border-radius: 15px;
  margin: 0 auto;
}

.open {
  box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);
  color: #91c1cc;
  transform: rotate3d(0, 1, 0, -98deg);
}

.jiggle {
  animation: jiggle 0.2s infinite;
  transform: rotate(-1deg);
}

@keyframes jiggle {
  0% {
        transform: rotate(-1deg);
  }
  50% {
      transform: rotate(1deg);
  }
}

@media screen and (min-width: 480px) {
  li {
    margin:25px 20px;
  }
}


@media screen and (min-width: 768px) {
	body {
		background-size:150px;
	}
	
	p {
		right: 6%;
		top: 20%;
		bottom: auto; 
		margin-left: auto;
		left: auto;
	}
}
$( document ).ready(function() {

  var words = ["Lorem ", "ipsum ", "delor", "sit", "amet", "consect", "adipisci", "elit,", "sed.", "Eiusmod", "tempor", "a", "enim", "minim", "season", "nulla", "dolore", "sint", "id", "est", "laboris", "ut.", "aute", "laborum", "toe"];

  var message = "";
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var scrolled = false;
  var timeDelay = 200;

  // function to reveal message
  var cardReveal = function() {
    $("#message").text(message).show();
  }  

  //day=25; // uncomment to skip to 25

  // Only work in December
  if(month === 12) {
    // Loop through each calendar window
    $("li").each( function( index ) {
      var adventwindow = index + 1;
      var item = $(this);

      // Open past windows
      if( day !== adventwindow && adventwindow < day ) {
        window.setTimeout(function(){
          item.children(".door").addClass("open");
        }, timeDelay);
      }

      // timeout offset for past window opening animation
      timeDelay += 100;

      // Add words so far to message variable
      if( adventwindow <= day ) {
        var word = words[index];
        $(this).append('<div class="revealed">' + word + '</div>');
        message = message + " " + word;
      }

      // Add jiggle animation to current day window
      if(adventwindow === day) {
        $(this).addClass("current");
        $(this).addClass("jiggle");
      }

      // On clicking a window, toggle it open/closed and
      // handle other things such as removing jiggle and 25th
      $(this).on("click", function() {
        if(adventwindow <= day) { 
          $(this).children(".door").toggleClass("open");
        }

        $(this).removeClass("jiggle");

        // If 25th, can show the postcard with message
        if(day >= 25 && adventwindow === 25) {
          cardReveal();

          // Animate scroll to postcard if not already done
          if(!scrolled) {
            $('html, body').animate({
              scrollTop: $("#message").offset().top
            }, 2000);
            scrolled = true;
          }
        }
      });

    });

    // If beyond 25, show postcard
    if(day >= 26){
      cardReveal();
    }

  }

});

The coding is in order from HTML --> CSS --> Javascript/jQuery

 

Don't forget to link the CSS and JS files in your HTML code! And add the DOCTYPE at the top of the HTML code as well!

 

Have fun!

Posted

I also forgot to mention, you can replace the words inside the boxes to your own! :D

Just replace the words (just Ctrl + F and search lorem, the words will appear)

  • Our picks

    • Merge Cruise: Mystery Puzzle v0.36.370 [ +2 Cheats ] Currency Max
      Modded/Hacked App: Merge Cruise: Mystery Puzzle By STUDIO PEERPLAY GAMES LTD
      Bundle ID: com.peerplay.megamerge
      iTunes Store Link: https://apps.apple.com/us/app/merge-cruise-mystery-puzzle/id6459056553?uo=4
       

      🤩 Hack Features

      - Cash
      - Energy

        • Agree
        • Haha
        • Thanks
        • Like
      • 14 replies
    • Merge Cruise: Mystery Puzzle v0.36.370 [ +2 Jailed ] Currency Max
      Modded/Hacked App: Merge Cruise: Mystery Puzzle By STUDIO PEERPLAY GAMES LTD
      Bundle ID: com.peerplay.megamerge
      iTunes Store Link: https://apps.apple.com/us/app/merge-cruise-mystery-puzzle/id6459056553?uo=4
       

      🤩 Hack Features

      - Cash
      - Energy

        • Winner
        • Like
      • 19 replies
    • Chum Chum Blast v1.13.758 [ +7 Cheats ] Auto Win
      Modded/Hacked App: Chum Chum Blast By Ritz Deli Games, Inc.
      Bundle ID: com.ritzdeligames.eraserblast
      iTunes Store Link: https://apps.apple.com/us/app/chum-chum-blast/id1497403262?uo=4


      🤩 Hack Features

      - Coins [ Win Match After Disable ]

      - Stars [ Win Match After Disable ]

      - Dice [ Win Match After Disable ]

      - Moves Inf

      - Lives Inf

      - ADS Ticket

      - Auto Win
        • Winner
        • Like
      • 12 replies
    • Chum Chum Blast v1.13.758 [ +7 Jailed ] Auto Win
      Modded/Hacked App: Chum Chum Blast By Ritz Deli Games, Inc.
      Bundle ID: com.ritzdeligames.eraserblast
      iTunes Store Link: https://apps.apple.com/us/app/chum-chum-blast/id1497403262?uo=4
       

      🤩 Hack Features

      - Coins [ Win Match After Disable ]

      - Stars [ Win Match After Disable ]

      - Dice [ Win Match After Disable ]

      - Moves Inf

      - Lives Inf

      - ADS Ticket

      - Auto Win
        • Thanks
        • Like
      • 12 replies
    • Kitchen Masters v16.0.0 [ +4 Cheats ] Currency Max
      Modded/Hacked App: Kitchen Masters By Bigger Oyun Yazilim ve Pazarlama Anonim Sirketi
      Bundle ID: com.bigger.kitchenmasters
      iTunes Store Link: https://apps.apple.com/ph/app/kitchen-masters/id6474870266?uo=4


      🤩 Hack Features

      - Coins

      - Cash

      - Lives

      - Tile Cost 0
        • Agree
        • Thanks
        • Like
      • 7 replies
    • Kitchen Masters v16.0.0 [ +4 Jailed ] Currency Max
      Modded/Hacked App: Kitchen Masters By Bigger Oyun Yazilim ve Pazarlama Anonim Sirketi
      Bundle ID: com.bigger.kitchenmasters
      iTunes Store Link: https://apps.apple.com/ph/app/kitchen-masters/id6474870266?uo=4
       

      🤩 Hack Features

      - Coins

      - Cash

      - Lives

      - Tile Cost 0
        • Haha
        • Like
      • 13 replies
    • Legend of Survivors V1.2.9 [ +17 Jailed ] Currency Max
      Modded/Hacked App: Legend of Survivors By ABI GLOBAL LTD.
      Bundle ID: com.abi.legendofsurvivors
      iTunes Store Link: https://apps.apple.com/us/app/legend-of-survivors/id6489580730?uo=4


      Hack Features:

      - NO ADS

      - Gems 

      - Gold

      - Energy 

      - Material

      - Health Max [ Equip & Upgrade ]

      - Damage [ Equip & Upgrade ]

      - Skill Cooldown

      - EXP + Level [ Patrol Reward ]

      - Patrol Reward [ Claim Unlimited ]

      - Growth Pack Unlock

      - Growth Pack [ Claim Unlimited ]

      - Monthly card Pack Unlock

      - Monthly card Pack [ Claim Unlimited ]


      Jailbreak required hack(s): https://iosgods.com/forum/5-game-cheats-hack-requests/
      Modded Android APK(s): https://iosgods.com/forum/68-android-section/
      For more fun, check out the Club(s): https://iosgods.com/clubs/
        • Informative
        • Agree
        • Thanks
        • Winner
        • Like
      • 53 replies
    • Legend of Survivors V1.2.9 [ +17 Cheats ] Currency Max
      Modded/Hacked App: Legend of Survivors By ABI GLOBAL LTD.
      Bundle ID: com.abi.legendofsurvivors
      iTunes Store Link: https://apps.apple.com/us/app/legend-of-survivors/id6489580730?uo=4


      Hack Features:
      - IAP Free [ Buy Anything - Gems Gold Ads Premium Packs ]

      - NO ADS

      - Gems 

      - Gold

      - Energy 

      - Material

      - Health Max [ Equip & Upgrade ]

      - Damage [ Equip & Upgrade ]

      - Skill Cooldown

      - EXP + Level [ Patrol Reward ]

      - Patrol Reward [ Claim Unlimited ]

      - Growth Pack Unlock

      - Growth Pack [ Claim Unlimited ]

      - Monthly card Pack Unlock

      - Monthly card Pack [ Claim Unlimited ]
        • Informative
        • Agree
        • Haha
        • Thanks
        • Winner
        • Like
      • 133 replies
    • DEAD TARGET: FPS Zombie Games v6.154.0 [ +10 Cheats ] Currency Max
      Modded/Hacked App: DEAD TARGET: FPS Zombie Games By VNG SINGAPORE PTE LTD
      Bundle ID: com.vng.g6.a.zombie
      iTunes Store Link: https://apps.apple.com/us/app/dead-target-fps-zombie-games/id901793885?uo=4
       

      Hack Features

      - Unlimited Gold
      - Unlimited Cash

      - Unlimited Diamonds
      - Unlimited Grenades
      - Unlimited MedKits
      - Unlimited Ammo
      - One Hit Kill
      - God Mode
      - High Accuracy

      - ADS NO
        • Agree
        • Winner
        • Like
      • 20 replies
    • DEAD TARGET: FPS Zombie Games v6.154.0 [ +10 Jailed ] Currency Max
      Modded/Hacked App: DEAD TARGET: FPS Zombie Games By VNG SINGAPORE PTE LTD
      Bundle ID: com.vng.g6.a.zombie
      iTunes Store Link: https://apps.apple.com/us/app/dead-target-fps-zombie-games/id901793885?uo=4
       

      Hack Features

      - Unlimited Gold
      - Unlimited Cash

      - Unlimited Diamonds
      - Unlimited Grenades
      - Unlimited MedKits
      - Unlimited Ammo
      - One Hit Kill
      - God Mode
      - High Accuracy

      - ADS NO
        • Informative
        • Agree
        • Thanks
        • Winner
        • Like
      • 33 replies
    • Alien Survivor: Survival Arena v1.39.1 [ +7 Cheats ] Currency Max
      Modded/Hacked App: Alien Survivor: Survival Arena By IMPONILOX LIMITED
      Bundle ID: world.playme.x
      iTunes Store Link: https://apps.apple.com/us/app/alien-survivor-survival-arena/id1669761844?uo=4
       

      🚀 Hack Features

      - ADS NO [ Rewards Free ]

      - Gems [ Achievements Rewards Only One Get ]

      - Energy [ Just Buy ]

      - HP [ Just Equip & Unequip ]

      - ATK [ Just Equip & Unequip ]

      - DEF [ Just Equip & Unequip ]

      - Skill CD [ First Get Then Use ]


      🍏 For Non-Jailbroken & No Jailbreak required hacks: https://iosgods.com/forum/79-no-jailbreak-section/
      🤖 Modded Android APK(s): https://iosgods.com/forum/68-android-section/
        • Informative
        • Agree
        • Haha
        • Winner
        • Like
      • 17 replies
    • Alien Survivor: Survival Arena v1.39.1 [ +7 Jailed ] Currency Max
      Modded/Hacked App: Alien Survivor: Survival Arena By IMPONILOX LIMITED
      Bundle ID: world.playme.x
      iTunes Store Link: https://apps.apple.com/us/app/alien-survivor-survival-arena/id1669761844?uo=4


      🚀 Hack Features

      - ADS NO [ Rewards Free ]

      - Gems [ Achievements Rewards Only One Get ]

      - Energy [ Just Buy ]

      - HP [ Just Equip & Unequip ]

      - ATK [ Just Equip & Unequip ]

      - DEF [ Just Equip & Unequip ]

      - Skill CD [ First Get Then Use ]


      🍏 Jailbreak iOS hacks: https://iosgods.com/forum/5-game-cheats-hack-requests/
      🤖 Modded Android APKs: https://iosgods.com/forum/68-android-section/
        • Agree
        • Haha
        • Thanks
        • Winner
        • Like
      • 30 replies
×
  • Create New...

Important Information

We would like to place cookies on your device to help make this website better. The website cannot give you the best user experience without cookies. You can accept or decline our cookies. You may also adjust your cookie settings. Privacy Policy - Guidelines