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

    • Night Hunt: The Vampire Tower v1.2.3 +3 Jailed Cheats [ God Mode ]
      Modded/Hacked App: Night Hunt: The Vampire Tower By Mirrormagic Games Ltd
      Bundle ID: com.mirrormagic.vampires
      App Store Link: https://apps.apple.com/us/app/night-hunt-the-vampire-tower/id6746669165?uo=4

       
       

      🤩 Hack Features

      - God Mode
      - No Skill Cooldown
      - All Skills Unlocked In-Game
      • 5 replies
    • Night Hunt: The Vampire Tower v1.2.3 +3 Cheats [ God Mode ]
      Modded/Hacked App: Night Hunt: The Vampire Tower By Mirrormagic Games Ltd
      Bundle ID: com.mirrormagic.vampires
      App Store Link: https://apps.apple.com/us/app/night-hunt-the-vampire-tower/id6746669165?uo=4

       


      🤩 Hack Features

      - God Mode
      - No Skill Cooldown
      - All Skills Unlocked In-Game
        • Informative
      • 4 replies
    • Dawn of Ages: Medieval Games v2.1.3 +5 Jailed Cheats [ Damage & Defence ]
      Modded/Hacked App: Dawn of Ages: total war battle By BoomBit, Inc.
      Bundle ID: com.stratospheregames.dawnofages
      App Store Link: https://apps.apple.com/us/app/dawn-of-ages-total-war-battle/id6477473268?uo=4

       


      🤩 Hack Features

      - Damage Multiplier
      - Defence Multiplier
      - God Mode
      - Dumb Enemy
      - Premium Enabled
      • 34 replies
    • Dawn of Ages: Medieval Games v2.1.3 +5 Cheats [ Damage & Defence ]
      Modded/Hacked App: Dawn of Ages: total war battle By BoomBit, Inc.
      Bundle ID: com.stratospheregames.dawnofages
      App Store Link: https://apps.apple.com/us/app/dawn-of-ages-total-war-battle/id6477473268?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
      - Defence Multiplier
      - God Mode
      - Dumb Enemy
      - Premium Enabled

       

      ⬇️ 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

      - @Puddin
      - @Laxus

       

      📷 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.
      • 39 replies
    • Dream Resort - Match 3 Games v1.6.0 [ +7 Jailed ] Auto Win
      Modded/Hacked App: Dream Resort - Match 3 Games By F.O.G LIMITED
      Bundle ID: com.dream.resort.candy.match.mania.ios
      iTunes Store Link: https://apps.apple.com/us/app/dream-resort-match-3-games/id6737011572?uo=4
       

      🚀 Hack Features

      - Auto ADS Disable

      - Coins

      - Diamonds

      - Lives Cost

      - Moves Freeze

      - Booster [ Buy Get Unlimited After use Then work ]

      - Auto win 


      🍏 Jailbreak iOS hacks: https://iosgods.com/forum/5-game-cheats-hack-requests/
      🤖 Modded Android APKs: https://iosgods.com/forum/68-android-section/
      • 22 replies
    • Dream Resort - Match 3 Games v1.6.0 [ +7 Cheats ] Auto Win
      Modded/Hacked App: Dream Resort - Match 3 Games By F.O.G LIMITED
      Bundle ID: com.dream.resort.candy.match.mania.ios
      iTunes Store Link: https://apps.apple.com/us/app/dream-resort-match-3-games/id6737011572?uo=4

       

      🔧 Mod Requirements

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

       

      🚀 Hack Features

      - Auto ADS Disable

      - Coins

      - Diamonds

      - Lives Cost

      - Moves Freeze

      - Booster [ Buy Get Unlimited After use Then work ]

      - Auto win 


      🍏 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/
      • 22 replies
    • Merge & Blast: Dream Island v2.25.0 [ +2 Cheats ] Auto Win
      Modded/Hacked App: Merge & Blast: Dream Island By Dreamo, Inc.
      Bundle ID: com.dreamo.woodyblast
      iTunes Store Link: https://apps.apple.com/us/app/merge-blast-dream-island/id1668748189?uo=4


      🤩 Hack Features

      - Auto Win
      - Coin + Moves [ Disable After Get ]




      🍏 For Non-Jailbroken & No Jailbreak required hacks: https://iosgods.com/forum/79-no-jailbreak-section/
      🤖 Modded Android APKs: https://iosgods.com/forum/68-android-section/
      • 16 replies
    • Merge & Blast: Dream Island v2.25.0 [ +2 Jailed ] Auto Win
      Modded/Hacked App: Merge & Blast: Dream Island By Dreamo, Inc.
      Bundle ID: com.dreamo.woodyblast
      iTunes Store Link: https://apps.apple.com/us/app/merge-blast-dream-island/id1668748189?uo=4

       

      🤩 Hack Features

      - Auto Win
      - Coin + Moves [ Disable After Get ]




      🍏 Jailbreak iOS hacks: https://iosgods.com/forum/5-game-cheats-hack-requests/
      🤖 Modded Android APKs: https://iosgods.com/forum/68-android-section/
      • 23 replies
    • Pocket Necro v1.6.4 [ +11 Cheats ] Gold Unlimited
      Modded/Hacked App: Pocket Necromancer By Sandsoft Publishing Company
      Bundle ID: com.quicksand.pocketnecromancer
      iTunes Store Link: https://apps.apple.com/us/app/pocket-necromancer/id6450004790?uo=4


      Hack Features:
      - ADS NO [ Reward Fee ]

      - Premium Active

      - Energy Cost 0

      - Energy Increaser

      - Gold Unlimited [ Win Battle ] Rewards

      - Stage Unlocked

      - Chapter Unlocked +2

      - Play Any [ Stage & Ch ]

      - Never Die

      - DMG

      - Speed Mov

      - Bullet Max [ Works With Weapon Only Just Equip ]


      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/
        • Informative
      • 59 replies
    • Pocket Necro v1.6.4 [ +11 Jailed ] Gold Unlimited
      Modded/Hacked App: Pocket Necromancer By Sandsoft Publishing Company
      Bundle ID: com.quicksand.pocketnecromancer
      iTunes Store Link: https://apps.apple.com/us/app/pocket-necromancer/id6450004790?uo=4


      Hack Features:

      - ADS NO [ Reward Fee ]

      - Premium Active

      - Energy Cost 0

      - Energy Increaser

      - Gold Unlimited [ Win Battle ] Rewards

      - Stage Unlocked

      - Chapter Unlocked +2

      - Play Any [ Stage & Ch ]

      - Never Die

      - DMG

      - Speed Mov

      - Bullet Max [ Works With Weapon Only Just Equip ]

       
      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/


      iOS Hack Download IPA Link:

      Hidden Content

      Download via the iOSGods App
      • 65 replies
    • RiftCraft v2.43.15 [ +4 Cheats ] Auto Win
      Modded/Hacked App: RiftCraft By Sneaky Panda LTD
      Bundle ID: com.sneakypanda.riftcraft
      App Store Link: https://apps.apple.com/us/app/riftcraft/id6744392381?uo=4 

      🤩 Hack Features

      - Auto Win [ PvP & Stage ]
      - ADS [ Rewards Free ]
      - Gems
      - Tokens
      • 4 replies
    • RiftCraft v2.43.15 [ +4 Jailed ] Auto Win
      Modded/Hacked App: RiftCraft By Sneaky Panda LTD
      Bundle ID: com.sneakypanda.riftcraft
      App Store Link: https://apps.apple.com/us/app/riftcraft/id6744392381?uo=4
       

      🤩 Hack Features

      - Auto Win [ PvP & Stage ]
      - ADS [ Rewards Free ]
      - Gems
      - Tokens
      • 3 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