Recently not far from Christmas, sorted out some of the Christmas related front-end special effects web page design and small game code to send you, directly on the effect.

Video demo:Click here for the full video demo.

Html5 Based on SVG to draw naughty Santa Claus:

<![CDATA[      @import url('https://fonts.googleapis.com/css?family=Luckiest+Guy'); .bg {fill: #4285f4} .footprint{fill:#4285f4} .pink{fill:#ffafd4} .red{fill:#900f10} .white{fill:#fff} .black{fill:#000} .stroke{stroke:#000; stroke-width:1} .txt{fill:#f0f7ff; font-family:'Luckiest Guy', cursive; font-size:60px; text-transform:uppercase; } .hidden{opacity:0} svg{width:100%; Padding - bottom: 55.55%; height:1px; overflow: visible; visibility:hidden; }]]>
    </style>
  </defs>
  <script xlink:href="js/TweenMax.min.js" type="text/javascript"></script>
  <script type="text/javascript">
Copy the code

Sleeping Santa Claus animation background:

   <div class="santa">
            <div class="disc"></div>

            <div class="hat">
                <div class="hat-space"></div>
            </div>
            <div class="furr"></div>

            <div class="face">
                <div class="eyebrows eyebrows--left"></div>
                <div class="eyebrows eyebrows--right"></div>
                <div class="nose"></div>
                <div class="beard">
                    <div class="beard--left"></div>
                    <div class="beard--right"></div>
                </div>
                <div class="mouth"> </div>
            </div>
            <div class="hand--up">
                <div class="arm--right"></div>

                <div class="hand--right"></div>

            </div>
            <div class="hand--left"></div>
            <div class="stomach">
                <div class="belt-buckle"></div>
            </div>
            <div class="leg--up"></div>
            <div class="leg--down"></div>

        </div>
Copy the code

Rotating Christmas Tree dynamic effects:

Christmas tree generation animation production:

<div id="container" class="parallax-container snow">
        <ul id="christmas_scene" class="christmas-scene">
            <li class="layer" data-depth="0.80">
                <div class="layer-5 layer-photo photo-zoom"></div>
            </li>
            <li class="layer" data-depth="0.60">
                <div class="layer-4 layer-photo photo-zoom"></div>
            </li>
            <li class="layer" data-depth="0.40">
                <div class="layer-3 layer-photo photo-zoom"></div>
            </li>
            <li class="layer" data-depth="0.20">
                <div class="layer-2 layer-photo photo-zoom"></div>
            </li>
            <li class="layer" data-depth="0.00">
                <div class="layer-1 layer-photo"></div>
            </li>
        </ul>
        <! -- Countdown Container -->
        <div id="countdown_container"></div>

        <! -- Merry Christmas Text -> You can replace with anything you like! -->
        <div class="merry-christmas-text">Merry Christmas</div>

        <! -- Happy new year 2017 photo -->
        <div class="happy-new-year"></div>

        <! -- Contact Pole Image -> From here the E-mail modal is triggered -->
        <div id="mail_pole">
            <img src="images/pole.png" class="img-responsive" alt="mail-pole" data-toggle="modal" data-target="#contact_modal">
        </div>
        <! -- Christmas Tree -->
        <img src="images/christmas-tree.png" alt="christmas-tree" id="christmas_tree">
    </div>
Copy the code

Fullpage Scrolling snow JS effect template:

 

Christmas gift grabbing games:

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    elfImage = document.getElementById("elf");
greenGiftImage = document.getElementById("green_gift");
redGiftImage = document.getElementById("red_gift");
blueGiftImage = document.getElementById("blue_gift");
bombImage = document.getElementById("bomb");
bangImage = document.getElementById("bang");

var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
const elfHeight = 70;
const elfWidth = 55;
var elfX = (canvas.width - elfWidth) / 2;
const elfSpeed = 10;
var rightPressed = false;
var leftPressed = false;
var spacePressed = false;
var spawnInterval;
var spawnTimer = 50;
Copy the code

Css3 Snow Christmas Tree animation effects:

Cartoon Color Christmas Tree animation effects:

If you pass by, give it a thumbs up.