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

    • What Duck v1.0.21 [ +6 Cheats ] Currency Max
      Modded/Hacked App: What Duck By Nexelon inc.
      Bundle ID: com.nexelon.duckwars
      App Store Link: https://apps.apple.com/us/app/what-duck/id6744432301?uo=4

      🤩 Hack Features

      - ADS No [ Rewards Free ]

      - Currency

      - Resources

      - Battle Coins

      - Energy

      - Free Pass [ Claim Unlimited ]
        • Winner
        • Like
      • 9 replies
    • What Duck v1.0.21 [ +6 Jailed ] Currency Max
      Modded/Hacked App: What Duck By Nexelon inc.
      Bundle ID: com.nexelon.duckwars
      App Store Link: https://apps.apple.com/us/app/what-duck/id6744432301?uo=4


      🤩 Hack Features

      - ADS No [ Rewards Free ]

      - Currency

      - Resources

      - Battle Coins

      - Energy

      - Free Pass [ Claim Unlimited ]
        • Agree
        • Like
      • 14 replies
    • Tiny Reaper: Reborn v1.0.4 +4 Jailed Cheats [ God Mode + More ]
      Modded/Hacked App: Tiny Reaper: Reborn By DAERI SOFT
      Bundle ID: com.daerigame.babysasin
      App Store Link: https://apps.apple.com/us/app/tiny-reaper-reborn/id6739761698?uo=4

       


      🤩 Hack Features

      - God Mode
      - One-Hit Kill
      - No Skill Cooldown
      - Dumb Enemies
        • Informative
        • Haha
        • Thanks
        • Winner
        • Like
      • 17 replies
    • Tiny Reaper: Reborn v1.0.4 +4 Cheats [ God Mode + More ]
      Modded/Hacked App: Tiny Reaper: Reborn By DAERI SOFT
      Bundle ID: com.daerigame.babysasin
      App Store Link: https://apps.apple.com/us/app/tiny-reaper-reborn/id6739761698?uo=4

       


      🤩 Hack Features

      - God Mode
      - One-Hit Kill
      - No Skill Cooldown
      - Dumb Enemies
        • Haha
        • Thanks
        • Winner
        • Like
      • 17 replies
    • FIFA Rivals - Mobile Football v1.0.2 +2 Jailed Cheats [ Auto Win ]
      Modded/Hacked App: FIFA Rivals - Mobile Football By Mythical Games
      Bundle ID: com.mythical.fifarivals
      iTunes Store Link:https://apps.apple.com/us/app/fifa-rivals-mobile-football/id6746578704

       
       

      🤩 Hack Features

      - Auto Win -> Linked to yourself & opponent. Every goal scored will result in a win.
      - Season Pass Unlocked -> Will let you claim all rewards from all passes.
        • Agree
        • Haha
        • Winner
        • Like
      • 26 replies
    • FIFA Rivals - Mobile Football v1.0.4 +2 Cheats [ Auto Win ]
      Modded/Hacked App: FIFA Rivals - Mobile Football By Mythical Games
      Bundle ID: com.mythical.fifarivals
      iTunes Store Link:https://apps.apple.com/us/app/fifa-rivals-mobile-football/id6746578704

       
       

      🤩 Hack Features

      - Auto Win -> Linked to yourself & opponent. Every goal scored will result in a win.
      - Season Pass Unlocked -> Will let you claim all rewards from all passes.
        • Thanks
        • Winner
        • Like
      • 24 replies
    • League of Dreamers - My Story v2.1.2 +3 Jailed Cheats [ Unlimited Currencies ]
      Modded/Hacked App: League of Dreamers - My Story By Story Inc. Company
      Bundle ID: com.storyincorporate.leagueofdreamers
      iTunes Store Link: https://apps.apple.com/us/app/league-of-dreamers-my-story/id1591679538
       

      Hack Features:
      - 666 Gems -> Earn some then restart the game.
      - 666 Keys -> Earn some then restart the game.
      - Free In-App Purchases -> Allows free in-app purchases.


      Jailbreak required hack(s): [Mod Menu Hack] League of Dreamers - My Story v1.54 +3 Cheats [ Unlimited Currencies ] - Free Jailbroken Cydia Cheats - iOSGods
      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
        • Haha
        • Thanks
        • Winner
        • Like
      • 166 replies
    • League of Dreamers - My Story v2.1.2 +3 Cheats [ Unlimited Currencies ]
      Modded/Hacked App: League of Dreamers - My Story By Story Inc. Company
      Bundle ID: com.storyincorporate.leagueofdreamers
      iTunes Store Link: https://apps.apple.com/us/app/league-of-dreamers-my-story/id1591679538
       

      Hack Features:
      - 666 Gems -> Earn some then restart the game.
      - 666 Keys -> Earn some then restart the game.
      - Free In-App Purchases


      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
        • Agree
        • Haha
        • Thanks
        • Winner
        • Like
      • 77 replies
    • Good Coffee, Great Coffee v1.2.1 +8 Jailed Cheats [ Unlimited Currencies ]
      Modded/Hacked App: Good Coffee, Great Coffee By TAPBLAZE, LLC
      Bundle ID: com.tapblaze.coffeebusiness
      iTunes Store Link: https://apps.apple.com/us/app/good-coffee-great-coffee/id1603584945?uo=4
       


      🤩 Hack Features

      - Unlimited Cash
      - Unlimited Gems
      - Unlimited Energy
      - Unlimited Brew Points
      - Unlimited Daily Rewards
      - All Decor Unlocked
      - All Equipment Unlocked
      - All Equipment Upgrades Unlocked
      - All Shop Upgrades Unlocked
      - Perfect Drinks
        • Informative
        • Agree
        • Haha
        • Thanks
        • Winner
        • Like
      • 93 replies
    • Good Coffee, Great Coffee v1.2.1 +8 Cheats [ Unlimited Currencies ]
      Modded/Hacked App: Good Coffee, Great Coffee By TAPBLAZE, LLC
      Bundle ID: com.tapblaze.coffeebusiness
      iTunes Store Link: https://apps.apple.com/us/app/good-coffee-great-coffee/id1603584945?uo=4

       
       

      🤩 Hack Features

      - Unlimited Cash
      - Unlimited Gems
      - Unlimited Energy
      - Unlimited Brew Points
      - Unlimited Daily Rewards
      - All Decor Unlocked
      - All Equipment Unlocked
      - All Equipment Upgrades Unlocked
      - All Shop Upgrades Unlocked
      - Perfect Drinks
        • Informative
        • Agree
        • Haha
        • Winner
        • Like
      • 53 replies
    • Heroes vs. Hordes v5.0.1 +6 Jailed Cheats [God Mode]
      Modded/Hacked App: Heroes vs. Hordes By Swift Games UG haftungsbeschraenkt
      Bundle ID: com.swiftgames.roguelikesurvival
      iTunes Store Link: https://apps.apple.com/us/app/heroes-vs-hordes/id1608898173?uo=4


      Hack Features:
      - Free iAP
      - Infinite Currency/Resources
      - Instant Kill


      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
        • Haha
        • Thanks
        • Winner
        • Like
      • 343 replies
    • Heroes vs. Hordes v5.0.1 +6 [God Mode]
      Modded/Hacked App: Heroes vs. Hordes By Swift Games UG haftungsbeschraenkt
      Bundle ID: com.swiftgames.roguelikesurvival
      iTunes Store Link: https://apps.apple.com/us/app/heroes-vs-hordes/id1608898173?uo=4


      Hack Features:
      - Free iAP
      - God Mode
      - Infinite Currency/Resources
      - Instant Kill
      - Kill All Enemies
      - Fast Enemies
      - Freeze Enemies
      - Poison Enemies


      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
        • Agree
        • Haha
        • Thanks
        • Winner
        • Like
      • 305 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