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

    • Hero Z: Idle defense v0.0.7 [+2 Cheats]
      Modded/Hacked App: Hero Z: Idle defense By CYBERJOY LIMITED
      Bundle ID: com.cyberjoy.heroz
      App Store Link: https://apps.apple.com/us/app/hero-z-idle-defense/id6478379131?uo=4



      🤩 Hack Features

      - Never Die
      - Activate Priv Pass (You can't claim diamonds but all the features enabled. Skip ads, More stamina cap etc.)
       
        • Winner
      • 1 reply
    • Hero Z: Idle defense v0.0.7 [+2 Jailed Cheats]
      Modded/Hacked App: Hero Z: Idle defense By CYBERJOY LIMITED
      Bundle ID: com.cyberjoy.heroz
      App Store Link: https://apps.apple.com/us/app/hero-z-idle-defense/id6478379131?uo=4



      🤩 Hack Features

      - Never Die
      - Activate Priv Pass (You can't claim diamonds but all the features enabled. Skip ads, More stamina cap etc.)
        • Winner
      • 0 replies
    • Jolly Match 3 - Puzzle Game v1.0.1884 [ +5 Cheats ] Auto Win
      Modded/Hacked App: Jolly Match 3 - Puzzle Game By Jollyco LLC
      Bundle ID: com.jollyco.jollybattlematch3
      App Store Link: https://apps.apple.com/us/app/jolly-match-3-puzzle-game/id1554274735?uo=4


      🤩 Hack Features

      - Auto Win

      - Coins

      - Stars

      - Lives

      - Booster
      • 1 reply
    • Jolly Match 3 - Puzzle Game v1.0.1884 [ +5 Jailed ] Auto Win
      Modded/Hacked App: Jolly Match 3 - Puzzle Game By Jollyco LLC
      Bundle ID: com.jollyco.jollybattlematch3
      App Store Link: https://apps.apple.com/us/app/jolly-match-3-puzzle-game/id1554274735?uo=4


      🤩 Hack Features

      - Auto Win

      - Coins

      - Stars

      - Lives

      - Booster
      • 0 replies
    • Cannon Heroes X v1.2.19 [+3 Jailed Cheats]
      Modded/Hacked App: Cannon Heroes X By Zego Global Pte Ltd
      Bundle ID: com.ig.cannon.heroes
      App Store Link: https://apps.apple.com/us/app/cannon-heroes-x/id6744356657?uo=4



      🤩 Hack Features

      - Free IAP
      - Never Die
      - Debug Menu (Enable once then restart game. Enable again you'll see debug menu)
        • Winner
        • Like
      • 1 reply
    • Cannon Heroes X v1.2.19 [+3 Cheats]
      Modded/Hacked App: Cannon Heroes X By Zego Global Pte Ltd
      Bundle ID: com.ig.cannon.heroes
      App Store Link: https://apps.apple.com/us/app/cannon-heroes-x/id6744356657?uo=4



      🤩 Hack Features

      - Free IAP
      - Never Die
      - Debug Menu (Enable once then restart game. Enable again you'll see debug menu)
       
        • Winner
        • Like
      • 1 reply
    • Archero Cheats v6.14.0 +5 [ God Mode & More ]
      Modded/Hacked App: Archero by HABBY PTE. LTD.
      Bundle ID: com.habby.archero
      iTunes Store Link: https://apps.apple.com/us/app/archero/id1453651052?uo=4&at=1010lce4



      Hack Features:
      - Multiply Defense to
      - Multiply Damage to
      - God Mode
      - OHK (Must use with God Mode)
      - Freeze Enemies

      NOTE: If you want to use god mode and ohk turn off multiply damage and defense first. I added multiply damage and defense there to avoid ban


      Non-Jailbroken & No Jailbreak required hack(s): https://iosgods.com/topic/100710-archero-v210-enemies-dont-attack-x30-attack/


      Hack Download Link: https://iosgods.com/topic/96783-arm64-archero-cheats-v220-5/
        • Informative
        • Agree
        • Haha
        • Thanks
        • Winner
        • Like
      • 15,860 replies
    • Galaxy Defense: Fortress TD v0.9.2 [+2 Cheats]
      Modded/Hacked App: Galaxy Defense: Fortress TD By CYBERJOY LIMITED
      Bundle ID: com.cyberjoy.galaxydefense
      App Store Link: https://apps.apple.com/us/app/galaxy-defense-fortress-td/id6740189002?uo=4



      🤩 Hack Features

      - One Hit Kill
      - Activate SVIP
       
        • Agree
        • Thanks
        • Winner
        • Like
      • 29 replies
    • Galaxy Defense: Fortress TD v0.9.2 [+2 Jailed Cheats]
      Modded/Hacked App: Galaxy Defense: Fortress TD By CYBERJOY LIMITED
      Bundle ID: com.cyberjoy.galaxydefense
      App Store Link: https://apps.apple.com/us/app/galaxy-defense-fortress-td/id6740189002?uo=4



      🤩 Hack Features

      - One Hit Kill
      - Activate SVIP
        • Informative
        • Agree
        • Haha
        • Thanks
        • Winner
        • Like
      • 7 replies
    • Bounce Defense v1.4.0 [+5 Jailed Cheats]
      Modded/Hacked App: Bounce Defense By Voodoo
      Bundle ID: com.minigamelab.bouncedefense
      App Store Link: https://apps.apple.com/us/app/bounce-defense/id6740627201?uo=4



      🤩 Hack Features

      - Add Currency
      - Add Battle Currency (Enable inside battle)
      - Never Die
      - Unlock All Towers
      - Unlimited Tower Cards
        • Informative
        • Like
      • 14 replies
    • Bounce Defense v1.4.0 [+5 Cheats]
      Modded/Hacked App: Bounce Defense By Voodoo
      Bundle ID: com.minigamelab.bouncedefense
      App Store Link: https://apps.apple.com/us/app/bounce-defense/id6740627201?uo=4



      🤩 Hack Features

      - Add Currency
      - Add Battle Currency (Enable inside battle)
      - Never Die
      - Unlock All Towers
      - Unlimited Tower Cards
        • Like
      • 9 replies
    • Slay the Titan : Deckbuild RPG v1.4.2 +2 Cheats
      Modded/Hacked App: Slay the Titan : Deckbuild RPG By Dreamplaygames Inc.
      Bundle ID: com.dreamplay.slaythetitan.apple
      App Store Link: https://apps.apple.com/us/app/slay-the-titan-deckbuild-rpg/id6741893290?uo=4

       

       

      📌 Mod Requirements

      - Jailbroken iPhone or iPad.
      - iGameGod / Filza / iMazing.
      - Cydia Substrate, ElleKit, Substitute or libhooker depending on your jailbreak (from Sileo, Cydia or Zebra).

       

      🤩 Hack Features

      - Damage Multiplier
      - Defense Multiplier

       

      ⬇️ iOS Hack Download Link


      Hidden Content

      Download Hack







       

      📖 iOS Installation Instructions

      STEP 1: Download the .deb hack file from the link above. Use Safari, Google Chrome or other iOS browsers to download.
      STEP 2: Once the file has downloaded, tap on it and then you will be prompted on whether you want to open the deb with iGameGod or copy it to Filza.
      STEP 3: If needed, tap on the downloaded file again, then select ‘Normal Install’ from the options on your screen.
      STEP 4: Let iGameGod/Filza finish the cheat installation. If it doesn’t install successfully, see the note below.
      STEP 5: Open the game, log in to your iOSGods account when asked, then toggle on the features you want and enjoy!

       

      NOTE: If you have any questions or problems, read our Jailbreak iOS Hack Troubleshooting & Frequently Asked Questions & Answers topic. If you still haven't found a solution, post your issue below and we'll do our best to help! If the hack does work for you, please post your feedback below and help out other fellow members that are encountering issues.

       

      🙌 Credits

      - AlyssaX64

       

      📷 Cheat Video/Screenshots

      N/A

       

      More iOS App Hacks
      If you’re looking for Non-Jailbroken & No Jailbreak required iOS IPA hacks, visit the iOS Game Cheats & Hacks or the iOSGods App for a variety of modded games and apps for non-jailbroken iOS devices.

      Modded Android APKs
      Need modded apps or games for Android? Check out the latest custom APK mods, cheats & more in our Android Section.
        • Agree
        • Thanks
        • Winner
      • 7 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