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

    • Swamp Attack 2 v1.0.80 [ +4 Cheats ] Currency Max
      Modded/Hacked App: Swamp Attack 2 By Voodoo
      Bundle ID: com.hyperdotstudios.swampattack2
      iTunes Store Link: https://apps.apple.com/us/app/swamp-attack-2/id1531686083?uo=4


      Hack Features:
      - Gems
      - Gold
      - Ammo
      - Monster ATK No


      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/
      • 37 replies
    • Swamp Attack 2 v1.0.80 [ +4 Jailed ] Currency Max
      Modded/Hacked App: Swamp Attack 2 By Voodoo
      Bundle ID: com.hyperdotstudios.swampattack2
      iTunes Store Link: https://apps.apple.com/us/app/swamp-attack-2/id1531686083?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:

      - Gems

      - Gold
      - Ammo
      - Monster ATK No


      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/
      • 42 replies
    • Spin Squad! v2.0.1 [ +2 Cheats ] Battle Coins
      Modded/Hacked App: Lucky Offense By Crater Co., Ltd.
      Bundle ID: com.percent.ios.luckyrolling
      iTunes Store Link: https://apps.apple.com/us/app/lucky-offense/id6511224968?uo=4


      🤩 Hack Features

      - Battle Coins
      - ATK
      - ATK Range
      - ATK Speed

      ATK Linked Enemy
      • 98 replies
    • Hello Kitty Merch Match v4.0.0 +1 Jailed Cheat [ Freeze Time ]
      Modded/Hacked App: Hello Kitty Merch Match By Applibot Inc.
      Bundle ID: jp.co.applibot.HelloKittyMerchMatch
      App Store Link: https://apps.apple.com/us/app/hello-kitty-merch-match/id6740388983?uo=4

       
       

      🤩 Hack Features

      - Freeze Time
      • 2 replies
    • Hello Kitty Merch Match v4.0.0 +1 Cheat [ Freeze Time ]
      Modded/Hacked App: Hello Kitty Merch Match By Applibot Inc.
      Bundle ID: jp.co.applibot.HelloKittyMerchMatch
      App Store Link: https://apps.apple.com/us/app/hello-kitty-merch-match/id6740388983?uo=4

       


      🤩 Hack Features

      - Freeze Time
      • 1 reply
    • Disney Magic Match 3D v5.0.0 +4 Jailed Cheats [ Unlimited Everything ]
      Modded/Hacked App: Disney Magic Match 3D By Jam City, Inc.
      Bundle ID: com.jamcity.pdt
      App Store Link: https://apps.apple.com/us/app/disney-magic-match-3d/id6468690398?uo=4

       


      🤩 Hack Features

      - Unlimited Coins
      - Unlimited Lives
      - Unlimited Pre-Game Boosters
      - Unlimited In-Game Boosters
      • 4 replies
    • Disney Magic Match 3D v5.0.0 +4 Cheats [ Unlimited Everything ]
      Modded/Hacked App: Disney Magic Match 3D By Jam City, Inc.
      Bundle ID: com.jamcity.pdt
      App Store Link: https://apps.apple.com/us/app/disney-magic-match-3d/id6468690398?uo=4

       
       

      🤩 Hack Features

      - Unlimited Coins
      - Unlimited Lives
      - Unlimited Pre-Game Boosters
      - Unlimited In-Game Boosters
      • 3 replies
    • Tactical Gambit v4.6 +3 Jailed Cheats [ Damage & Defence ]
      Modded/Hacked App: Tactical Gambit By Ys Games Co.,Ltd.
      Bundle ID: com.ysgames.pixelautobattler
      App Store Link: https://apps.apple.com/us/app/tactical-gambit/id6477808162?uo=4

       
       

      🤩 Hack Features

      - Damage Multiplier
      - Defence Multiplier
      - God Mode
      • 2 replies
    • Tactical Gambit v4.6 +3 Cheats [ Damage & Defence ]
      Modded/Hacked App: Tactical Gambit By Ys Games Co.,Ltd.
      Bundle ID: com.ysgames.pixelautobattler
      App Store Link: https://apps.apple.com/us/app/tactical-gambit/id6477808162?uo=4

       
       

      🤩 Hack Features

      - Damage Multiplier
      - Defence Mulltiplier
      - God Mode
      • 1 reply
    • Hunt Royale: Action RPG Battle v3.17.0 +3 Jailed Cheats [ Damage & Defence ]
      Modded/Hacked App: Hunt Royale: Action RPG Battle By BoomBit, Inc.
      Bundle ID: com.hunt.royale
      iTunes Store Link: https://apps.apple.com/us/app/hunt-royale-action-rpg-battle/id1537379121?uo=4

       
       

      🚀 Hack Features

      - Dumb Enemies

      VIP
      - Damage Multiplier
      - Defence Multiplier
      • 190 replies
    • Hunt Royale: Action RPG Battle v3.17.0 +3 Cheats [ Damage & Defence ]
      Modded/Hacked App: Hunt Royale: Action RPG Battle By BoomBit, Inc.
      Bundle ID: com.hunt.royale
      iTunes Store Link: https://apps.apple.com/us/app/hunt-royale-action-rpg-battle/id1537379121?uo=4

       


      🚀 Hack Features

      - Dumb Enemies

      VIP
      - Damage Multiplier
      - Defence Multiplier
      • 37 replies
    • Summoners War: Rush v1.8.32061 Jailed Cheats +4
      Modded/Hacked App: Summoners War: Rush By Com2uS Corp.
      Bundle ID: com.com2us.legion.ios.apple.global.normal
      App Store Link: https://apps.apple.com/us/app/summoners-war-rush/id6476949737?uo=4

       

      📌 Mod Requirements

      - Non-Jailbroken/Jailed or Jailbroken iPhone or iPad.
      - Sideloadly or alternatives.
      - Computer running Windows/macOS/Linux with iTunes installed.

       

      🤩 Hack Features

      - God Mode
      - Weak Enemies
      - Multiply ATK Speed
      - Multiply MOVE Speed

       

      DO NOT BUY VIP FOR THIS CHEAT AND DON'T EXPECT THIS CAN BE UPDATED

       

      ⬇️ iOS Hack Download IPA Link: https://iosgods.com/topic/196105-summoners-war-rush-v1425709-jailed-cheats-4/
      • 115 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