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

    • Apocalypse Worm: Zombie Strike v0.3.0 [+2 Jailed Cheats]
      Modded/Hacked App: Apocalypse Worm: Zombie Strike By A Thinking Ape Entertainment Ltd.
      Bundle ID: ata.strike.worm.zombie.apocalypse
      iTunes Store Link: https://apps.apple.com/us/app/apocalypse-worm-zombie-strike/id6740106898?uo=4
       

      🤩 Hack Features

      - Never Die
      - Unlimited Resources (Earn Some)
      • 10 replies
    • Apocalypse Worm: Zombie Strike v0.3.0 [+2 Cheats]
      Modded/Hacked App: Apocalypse Worm: Zombie Strike By A Thinking Ape Entertainment Ltd.
      Bundle ID: ata.strike.worm.zombie.apocalypse
      iTunes Store Link: https://apps.apple.com/us/app/apocalypse-worm-zombie-strike/id6740106898?uo=4



      🤩 Hack Features

      - Never Die
      - Unlimited Resources (Earn Some)
       
      • 6 replies
    • Deus Myth v1.0.2 [+5 Cheats]
      Modded/Hacked App: Deus Myth By 24 HIT Riga SIA
      Bundle ID: com.deus.myth
      App Store Link: https://apps.apple.com/us/app/deus-myth/id6742408777?uo=4



      🤩 Hack Features

      - Free IAP
      - Never Die
      - Upgrade Tool
      - Upgrade Weapon
      - Higher Resource Gain
      • 13 replies
    • Deus Myth v1.0.2 [+5 Jailed Cheats]
      Modded/Hacked App: Deus Myth By 24 HIT Riga SIA
      Bundle ID: com.deus.myth
      App Store Link: https://apps.apple.com/us/app/deus-myth/id6742408777?uo=4



      🤩 Hack Features

      - Free IAP
      - Never Die
      - Upgrade Tool
      - Upgrade Weapon
      - Higher Resource Gain
      • 4 replies
    • Stick War: Saga v2025.4.1691 +5 Cheats
      Modded/Hacked App: Stick War: Saga By 1004319 Alberta Ltd
      Bundle ID: com.maxgames.stickwar3
      iTunes Store Link: https://apps.apple.com/us/app/stick-war-saga/id1548764863?uo=4


      Mod Requirements:
      - Jailbroken iPhone/iPad/iPod Touch.
      - iGameGod / Filza / iMazing or any other file managers for iOS.
      - Cydia Substrate, ElleKit, Substitute or libhooker depending on your jailbreak.
      - PreferenceLoader (from Cydia, Sileo or Zebra).


      Hack Features:
      - Instant Win → Battle Setting → Resign
      - Battle Gold → Spend/Gain
      - Unlimited Mana → Spend/Gain
      - Everything Unlocked
      - No Skills Cooldown


      Non-Jailbroken & No Jailbreak required hack(s): https://iosgods.com/forum/79-no-jailbreak-section/
      Modded Android APK(s): https://iosgods.com/forum/68-android-section/
      For more fun, check out the Club(s): https://iosgods.com/clubs/


      iOS Hack Download Link:

      Hidden Content

      Download Hack








      Installation Instructions:
      STEP 1: Download the .deb Cydia 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 necessary, tap on the downloaded file, and then, you will need to press 'Install' from the options on your screen.
      STEP 4: Let iGameGod/Filza finish the cheat installation. Make sure it successfully installs, otherwise see the note below.
      STEP 5: If the hack is a Mod Menu — which is usually the case nowadays — the cheat features can be toggled in-game. Some cheats have options that can be enabled from your iDevice settings.
      STEP 6: Turn on the features you want and play the game. You may need to follow further instructions inside the hack's popup in-game.

       

      NOTE: If you have any questions or problems, read our Troubleshooting topic & Frequently Asked Questions & Answers topic. If you still haven't found a solution, post your issue down 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
      • 101 replies
    • Stick War: Saga v2025.4.1691 +5 Jailed Cheats
      Modded/Hacked App: Stick War: Saga By 1004319 Alberta Ltd
      Bundle ID: com.maxgames.stickwar3
      iTunes Store Link: https://apps.apple.com/us/app/stick-war-saga/id1548764863?uo=4


      Mod Requirements:
      - Non-Jailbroken/Jailed or Jailbroken iPhone/iPad/iPod Touch.
      - Sideloadly / Cydia Impactor or alternatives.
      - A Computer Running Windows/macOS/Linux with iTunes installed.


      Hack Features:
      - Instant Win → Battle Setting → Resign
      - Battle Gold → Spend/Gain
      - Unlimited Mana → Spend/Gain
      - Everything Unlocked
      - No Skills Cooldown


      Jailbreak required hack(s): 


      iOS Hack Download IPA Link:

      Hidden Content

      Download via the iOSGods App








      PC Installation Instructions:
      STEP 1: If necessary, uninstall the app if you have it installed on your iDevice. Some hacked IPAs will install as a duplicate app. Make sure to back it up so you don't lose your progress.
      STEP 2: Download the pre-hacked .IPA file from the link above to your computer. To download from the iOSGods App, see this tutorial topic.
      STEP 3: Download Sideloadly and install it on your PC.
      STEP 4: Open/Run Sideloadly on your computer, connect your iOS Device, and wait until your device name shows up.
      STEP 5: Once your iDevice appears, drag the modded .IPA file you downloaded and drop it inside the Sideloadly application.
      STEP 6: You will now have to enter your iTunes/Apple ID email login, press "Start" & then you will be asked to enter your password. Go ahead and enter the required information.
      STEP 7: Wait for Sideloadly to finish sideloading/installing the hacked IPA. If there are issues during installation, please read the note below.
      STEP 8: Once the installation is complete and you see the app on your Home Screen, you will need to go to Settings -> General -> Profiles/VPN & Device Management. Once there, tap on the email you entered from step 6, and then tap on 'Trust [email protected]'.
      STEP 9: Now go to your Home Screen and open the newly installed app and everything should work fine. You may need to follow further per app instructions inside the hack's popup in-game.

      NOTE: iOS/iPadOS 16 and later, you must enable Developer Mode. For free Apple Developer accounts, you will need to repeat this process every 7 days. Jailbroken iDevices can also use Sideloadly/Filza/IPA Installer to normally install the IPA with AppSync. If you have any questions or problems, read our Sideloadly FAQ section of the topic and if you don't find a solution, please post your issue down below and we'll do our best to help! If the hack does work for you, post your feedback below and help out other fellow members that are encountering issues.


      Credits:
      - AlyssaX64


      Cheat Video/Screenshots:

      N/A
      • 117 replies
    • Arcana Blade : Idle RPG v1.8.05 +2 Jailed Cheats
      Modded/Hacked App: 아르카나 블레이드 : 3000 뽑기 증정 By SUPERBOX. Inc
      Bundle ID: com.superpixel.arcanablade
      iTunes Store Link: https://apps.apple.com/kr/app/%EC%95%84%EB%A5%B4%EC%B9%B4%EB%82%98-%EB%B8%94%EB%A0%88%EC%9D%B4%EB%93%9C-3000-%EB%BD%91%EA%B8%B0-%EC%A6%9D%EC%A0%95/id6474599813?uo=4


      Mod Requirements:
      - Non-Jailbroken/Jailed or Jailbroken iPhone/iPad/iPod Touch.
      - Sideloadly / Cydia Impactor or alternatives.
      - A Computer Running Windows/macOS/Linux with iTunes installed.


      Hack Features:
      - Damage Multiplier
      - Never Die


      Jailbreak required hack(s): 


      iOS Hack Download IPA Link:

      Hidden Content

      Download via the iOSGods App








      PC Installation Instructions:
      STEP 1: If necessary, uninstall the app if you have it installed on your iDevice. Some hacked IPAs will install as a duplicate app. Make sure to back it up so you don't lose your progress.
      STEP 2: Download the pre-hacked .IPA file from the link above to your computer. To download from the iOSGods App, see this tutorial topic.
      STEP 3: Download Sideloadly and install it on your PC.
      STEP 4: Open/Run Sideloadly on your computer, connect your iOS Device, and wait until your device name shows up.
      STEP 5: Once your iDevice appears, drag the modded .IPA file you downloaded and drop it inside the Sideloadly application.
      STEP 6: You will now have to enter your iTunes/Apple ID email login, press "Start" & then you will be asked to enter your password. Go ahead and enter the required information.
      STEP 7: Wait for Sideloadly to finish sideloading/installing the hacked IPA. If there are issues during installation, please read the note below.
      STEP 8: Once the installation is complete and you see the app on your Home Screen, you will need to go to Settings -> General -> Profiles/VPN & Device Management. Once there, tap on the email you entered from step 6, and then tap on 'Trust [email protected]'.
      STEP 9: Now go to your Home Screen and open the newly installed app and everything should work fine. You may need to follow further per app instructions inside the hack's popup in-game.

      NOTE: iOS/iPadOS 16 and later, you must enable Developer Mode. For free Apple Developer accounts, you will need to repeat this process every 7 days. Jailbroken iDevices can also use Sideloadly/Filza/IPA Installer to normally install the IPA with AppSync. If you have any questions or problems, read our Sideloadly FAQ section of the topic and if you don't find a solution, please post your issue down below and we'll do our best to help! If the hack does work for you, post your feedback below and help out other fellow members that are encountering issues.


      Credits:
      - AlyssaX64


      Cheat Video/Screenshots:

      N/A
      • 104 replies
    • Arcana Blade : Idle RPG v1.8.05 +2 Cheats
      Modded/Hacked App: 아르카나 블레이드 : 3000 뽑기 증정 By SUPERBOX. Inc
      Bundle ID: com.superpixel.arcanablade
      iTunes Store Link: https://apps.apple.com/kr/app/%EC%95%84%EB%A5%B4%EC%B9%B4%EB%82%98-%EB%B8%94%EB%A0%88%EC%9D%B4%EB%93%9C-3000-%EB%BD%91%EA%B8%B0-%EC%A6%9D%EC%A0%95/id6474599813?uo=4


      Mod Requirements:
      - Jailbroken iPhone/iPad/iPod Touch.
      - iGameGod / Filza / iMazing or any other file managers for iOS.
      - Cydia Substrate, ElleKit, Substitute or libhooker depending on your jailbreak.
      - PreferenceLoader (from Cydia, Sileo or Zebra).


      Hack Features:
      - Damage Multiplier
      - Never Die


      Non-Jailbroken & No Jailbreak required hack(s): https://iosgods.com/forum/79-no-jailbreak-section/
      Modded Android APK(s): https://iosgods.com/forum/68-android-section/
      For more fun, check out the Club(s): https://iosgods.com/clubs/


      iOS Hack Download Link:

      Hidden Content

      Download Hack








      Installation Instructions:
      STEP 1: Download the .deb Cydia 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 necessary, tap on the downloaded file, and then, you will need to press 'Install' from the options on your screen.
      STEP 4: Let iGameGod/Filza finish the cheat installation. Make sure it successfully installs, otherwise see the note below.
      STEP 5: If the hack is a Mod Menu — which is usually the case nowadays — the cheat features can be toggled in-game. Some cheats have options that can be enabled from your iDevice settings.
      STEP 6: Turn on the features you want and play the game. You may need to follow further instructions inside the hack's popup in-game.

       

      NOTE: If you have any questions or problems, read our Troubleshooting topic & Frequently Asked Questions & Answers topic. If you still haven't found a solution, post your issue down 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
      • 119 replies
    • Stick Cricket Clash v2.0.0 [ +3 Jailed ] Currency Freeze
      Modded/Hacked App: Stick Cricket Clash By Stick Sports Ltd
      Bundle ID: com.sticksports.stickcricketclash
      iTunes Store Link: https://apps.apple.com/us/app/stick-cricket-clash/id6444344271?uo=4


      Hack Features:
      - Currency Freeze
      - Score [ Win All Match ]
      - Ads Reward 


      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/
      • 16 replies
    • Stick Cricket Clash v2.0.0 [ +3 Cheats ] Currency Freeze
      Modded/Hacked App: Stick Cricket Clash By Stick Sports Ltd
      Bundle ID: com.sticksports.stickcricketclash
      iTunes Store Link: https://apps.apple.com/us/app/stick-cricket-clash/id6444344271?uo=4



      Hack Features:
      - Currency Freeze
      - Score Win All Match
      - Ads Reward 



      Non-Jailbroken & No Jailbreak required hack(s): https://iosgods.com/forum/79-no-jailbreak-section/
      Modded Android APK(s): https://iosgods.com/forum/68-android-section/
      For more fun, check out the Club(s): https://iosgods.com/clubs/
      • 42 replies
    • Idle pocket monster:pet island v1.0.14 [ +2 Cheats ] Currency Max
      Modded/Hacked App: Idle pocket monster:pet island By Oneorwa Technology Co.,Ltd.
      Bundle ID: com.oneorwa.idlepocketmonster
      App Store Link: https://apps.apple.com/us/app/idle-pocket-monster-pet-island/id6744893380?uo=4


      🤩 Hack Features

      - Currency
      - Resources

      • 7 replies
    • Idle pocket monster:pet island v1.0.14 [ +2 Jailed ] Currency Max
      Modded/Hacked App: Idle pocket monster:pet island By Oneorwa Technology Co.,Ltd.
      Bundle ID: com.oneorwa.idlepocketmonster
      App Store Link: https://apps.apple.com/us/app/idle-pocket-monster-pet-island/id6744893380?uo=4


      🤩 Hack Features

      - Currency
      - Resourecs
      • 4 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