Весёлый снеговик, фиксированные новогодние снежинки и дед мороз

Доброго времени суток, друзья. Как быстро летит время и опять приближаются Новогодние праздники. Уже украшают улицы и дома. Давайте и мы подумаем, как создать новогоднюю атмосферу на наших блогах для себя и для свои читателей. 

За всё время у меня было много статей, как украсить блог к Новому году. Мне пришлось все публикации объединить в одно сообщение, для вашего удобства, чтобы не искать в списке статей. Там масса вариантов украшения страниц. Есть возможность  подобрать для себя что - то интересное.

Вот подборка вариантов оформления блога на Новый год

Сегодня покажу ещё три решения, как украсить страничку или весь блог к празднику.

Первые 2 варианта пристроила для просмотра на этом тестовом блоге (снеговик в самом низу).

Улыбающийся весёлый снеговик. 

Он прыгает и радуется, а при наведении курсора падает и поднимается с испорченным настроением. 

<style>

#scene{

position: fixed;

width: auto;

height: 40%;

bottom:0px;

}

canvas{

opacity:0;

position:fixed;

}</style>

<canvas id="canvas" width="300" height="200">

Canvas is not supported.

</canvas>

<svg id="scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 100" opacity="0">

<path id="shadow" fill="#D9E2E8" d="M42,99c-39.8,0.1-25.5-9.4,0-8.1C89.8,93.4,66.5,98.9,42,99z"></path>

<g id="snowman" cursor="pointer">

<path id="body" fill="#EAF5F9" d="M35.6,53.2c23-2.6,42.2,41.9,3.4,44.3C0.2,99.9,6.7,56.4,35.6,53.2z"></path>

<path id="neck" fill="#1A92B7" d="M36,63c-12.8,0-18.4-2.9-16.8-6.2c1.4-2.8,12.6-1,17.1-1c8.4,0,14.5-4.3,17,0

C55.5,59.7,47,63,36,63z"></path>

<path id="scarf" fill="#1A92B7" d="M49.4,76.9c-0.7-4.2-3.2-18.3-7.1-17.3c-3.5,0.9-1.7,10.8-0.7,15.4c0.3,1.5,1.5,3.1,3,3.4

c1.3,0.3,2.6,0.3,3.9,0.2C49.2,78.5,49.6,77.5,49.4,76.9z"></path>

<g id="head">

<path id="top" fill="#EAF5F9" d="M33.5,26.5c17.7-0.2,30.2,33.8,0.9,32.2C6,57.3,15.7,26.7,33.5,26.5z"></path>

<path id="eye1" d="M41.9,38c0.2,2-3.4,3.9-3.6,0.6C38.1,35.3,41.7,36,41.9,38z"></path>

<path id="eye2" d="M27.8,40.6c0.8,1.8,5.2,1.4,3.6-1.5C30,36.2,27,38.7,27.8,40.6z"></path>

<path id="mouth" fill="none" stroke="#000000" stroke-miterlimit="10" d="M27.4,49c0.4,0.3,0.8,0.6,1.2,0.9c0.4,0.3,0.8,0.6,1.1,1

c0.3,0.4,0.6,0.8,1.1,0.9c0.5,0.1,0.9-0.3,1.4-0.4c0.8-0.2,1.7,0.2,2.6,0.4c1.3,0.3,2.6-0.1,3.9,0.1c0.4,0.1,0.9,0.2,1.3,0.1

c0.4-0.1,0.7-0.5,1.1-0.6c0.3-0.1,0.6-0.1,0.9-0.1c0.5-0.1,1-0.4,1.4-0.7c0.3-0.3,1.3-1.2,1.6-1.5"></path>

<path id="nose" fill="#DB7816" d="M35.4,43c-0.6,0.6-0.9,1.2-0.8,1.9c0.1,1,1,1.9,2,2c1.7,0.2,3.3,0.3,4.7,0.4

c2.9,0.3,5.5-0.9,8.3-0.9c0.7,0,0.9-0.8,0.3-1.2c-1.6-1-3.3-1.6-5.3-1.8c-1.5-0.2-2.5,0.2-4.2-0.1c-1-0.2-1.9-0.8-2.8-1

C36.7,42.2,35.9,42.4,35.4,43z"></path>

</g>

</g>

</svg>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

<script type="text/javascript">

///////////

// Snowman

TweenMax.to("#head", 1.5, {

startAt: {

rotation: -10

},

rotation: 10,

yoyo: true,

transformOrigin: "50% 50%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#nose", 1.5, {

startAt: {

rotation: -10

},

rotation: 10,

scaleX: .8,

yoyo: true,

transformOrigin: "5% 95%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#scarf", 1.5, {

startAt: {

rotation: 20

},

rotation: -20,

yoyo: true,

transformOrigin: "50% 10%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#shadow", 1.5, {

startAt: {

x: -5

},

x: 0,

yoyo: true,

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#snowman", 1.5, {

startAt: {

rotation: -5

},

rotation: 7,

yoyo: true,

transformOrigin: "50% 90%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#snowman", .3, {

scaleX: .95,

scaleY: 1.05,

yoyo: true,

transformOrigin: "50% 95%",

repeat: -1,

ease: Sine.easeInOut

});

blink();

document.getElementById("snowman").addEventListener("click", knockHimDown);

 

function knockHimDown() {

TweenMax.to("#snowman", .5, {

rotation: -50,

ease: Sine.easeOut

});

TweenMax.to("#snowman", 1.2, {

delay: 1.2,

rotation: 0,

ease: Sine.easeInOut

});

TweenMax.set("#mouth", {

scaleY: -1,

transformOrigin: "50% 80%"

});

TweenMax.to("#snowman", 1.5, {

delay: 3,

rotation: 7,

yoyo: true,

transformOrigin: "50% 90%",

repeat: -1,

ease: Sine.easeInOut

});

TweenMax.to("#shadow", .5, {

x: -15,

ease: Sine.easeOut

});

TweenMax.to("#shadow", 1.2, {

delay: 1.2,

x: -5,

ease: Sine.easeInOut

});

TweenMax.to("#shadow", 1.5, {

delay: 3,

x: 0,

yoyo: true,

repeat: -1,

ease: Sine.easeInOut

});

}

 

function blink() {

TweenMax.to(["#eye1,#eye2"], .1, {

delay: 5 * Math.random(),

scaleY: .2,

yoyo: true,

repeat: 1,

transformOrigin: "50% 50%",

onComplete: blink

});

}

////////////////

// Snow

 

var numFlakes = 1000;

var minScale = .15;

var maxScale = .5;

var minDuration = .3;

var maxDuration = 2;

var wind = 600;

var wiggle = 60;

var canvas = document.querySelector("canvas");

var context = canvas.getContext("2d");

var snowflakeImage = new Image();

snowflakeImage.src = "https://dl.dropboxusercontent.com/u/1256960/ Research/JS/Snowman/snowflake.png";

var snowflakes = [];

snowflakeImage.onload = init;

onResize();

window.onresize = onResize;

 

// wait until the snowflake image loads

function init() {

TweenMax.to("#scene", 0.3, {

opacity: 1

});

TweenMax.to("canvas", 7, {

delay: .3,

opacity: 1

});

for (var i = 0; i < numFlakes; i++) {

// create a snowflake object and its properties

var snowflake = {

initX: (canvas.width * 2 * Math.random()) - (canvas.width * .5),

y: -16,

scale: (Math.random() * (maxScale - minScale)) + minScale,

angle: Math.random() * Math.PI * 2,

drift: 0,

radius: (Math.random() * wiggle) - (wiggle * 0.5)

};

snowflakes.push(snowflake);

// create a tween that animates the angle and y properties - call update each frame

tween = TweenMax.to(snowflake, (Math.random() * (maxDuration - minDuration)) + minDuration, {

repeat: -1,

angle: Math.random() * 20,

drift: (Math.random() * wind),

y: window.innerHeight,

ease: Linear.easeNone,

onUpdate: update,

onUpdateParams: [snowflake]

});

tween.progress(Math.random());

}

}

 

function update(snowflake) {

// modify the x value based on cos of the angle

snowflake.x = (snowflake.initX + Math.cos(snowflake.angle) * snowflake.radius) + snowflake.drift;

}

 

// create a render loop that fires approximately every 16ms

TweenMax.ticker.addEventListener("tick", render);

 

function render() {

// clear old canvas

context.clearRect(0, 0, window.innerWidth * 2, window.innerHeight);

for (var i = 0; i < numFlakes; i++) {

var snowflake = snowflakes[i];

if (snowflake) {

// draw snowflakes to canvas

context.drawImage(snowflakeImage, snowflake.x, snowflake.y, 16 * snowflake.scale, 16 * snowflake.scale);

}

}

}

 

function onResize(e) {

//readjust size of canvas

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

kill();

init();

}

 

function kill() {

// shut down all currently running tweens

for (var i = 0; i < numFlakes; i++) {

var snowflake = snowflakes[i];

TweenMax.killTweensOf(snowflake);

}

snowflakes = [];

}

</script>

Мерцающие фиксированные снежинки. 

Не торопитесь проходить мимо этих снежинок. В отличии от других кодов они совсем не раздражают посетителей. Можно настроить их размеры, период мерцания. Попробуйте.

<div class="fixed-snow">

    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>

</div>

<style>

.fixed-snow span::after {

    position:fixed;

    color:#BFE2FF;

    font-weight:bold;

}

.fixed-snow span:nth-child(even)::after {

    content: "\2744";

}

.fixed-snow span:nth-child(odd)::after {

    content: "\2745";

}

.fixed-snow span:nth-child(1)::after {

    font-size:40px;

    bottom:4%;

    left:4%;

    animation: snowzoom 2s linear infinite;

}

.fixed-snow span:nth-child(2)::after {

    font-size:48px;

    bottom:6%;

    right:6%;

    animation: snowzoom 3s ease-in infinite;

}

.fixed-snow span:nth-child(3)::after {

    font-size:32px;

    bottom:10%;

    left:45%;

    animation: snowzoom 4s linear infinite;

}

.fixed-snow span:nth-child(4)::after {

    font-size:44px;

    bottom:40%;

    left:20%;

    animation: snowzoom 3s ease-in-out infinite;

}

.fixed-snow span:nth-child(5)::after {

    font-size:42px;

    top:16%;

    left:8%;

    animation: snowzoom 3.2s ease-out infinite;

}

.fixed-snow span:nth-child(6)::after {

    font-size:30px;

    top:20%;

    right:8%;

    animation: snowzoom 2.2s ease infinite;

}

.fixed-snow span:nth-child(7)::after {

    font-size:50px;

    top:50%;

    left:50%;

    animation: snowzoom 2.4s linear infinite;

}

.fixed-snow span:nth-child(8)::after {

    font-size:32px;

    top:26%;

    right:28%;

    animation: snowzoom 1.8s ease-in-out infinite;

}

.fixed-snow span:nth-child(9)::after {

    font-size:42px;

    top:12%;

    left:58%;

    animation: snowzoom 3.2s linear infinite;

}

.fixed-snow span:nth-child(10)::after {

    font-size:46px;

    bottom:30%;

    right:24%;

    animation: snowzoom 2s ease infinite;

}

.fixed-snow span:nth-child(11)::after {

    font-size:38px;

    bottom:22%;

    left:14%;

    animation: snowzoom 3s ease-in infinite;

}

.fixed-snow span:nth-child(12)::after {

    font-size:28px;

    bottom:28%;

    left:40%;

    animation: snowzoom 2.8s ease-out infinite;

}

.fixed-snow span:nth-child(13)::after {

    font-size:22px;

    top:24%;

    left:20%;

    animation: snowzoom 2.4s ease infinite;

}

.fixed-snow span:nth-child(14)::after {

    font-size:42px;

    top:30%;

    left:38%;

    animation: snowzoom 2.4s ease-in infinite;

}

@keyframes snowzoom {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(2);

    }

    100% {

        transform: scale(1);

    }

}

</style>

Дед Мороз приветствует вас

 Симпатичное решение для оформления блога к Новому году. Установить можно над сообщениями, под шапкой или над ней. Беспроигрышный вариант. Посмотрите у меня на  этом блоге. Задержите внимание на 10 секунд.

<style>

   .dedMoroz{

    position: relative;

    z-index: 2;

    background: url('http://inverser.pro/images/Ded_Moroz.png') 50% 0 no-repeat;

    width: 341px;

    height: 233px;

    margin: 0 auto -36px auto

}

.dedMoroz_ryka {

    position: absolute;

    z-index: 4;

    bottom: 15px;

    left: 3px;

    width: 66px;

    height: 57px;

    will-change: transform;

    border-radius: 42%;

    background: #B61313;

    box-shadow: -2px 2px rgba(0, 0, 0, .2), inset 2px -2px 7px rgba(0, 0, 0, .3);

    animation: a1 7s ease infinite 7s

}

.dedMoroz_overlay{

    position: absolute;

    z-index: 1;

    bottom: 23px;

    left: 59px;

    width: 22px;

    height: 13px;

    background: #fff;

}

.dedMoroz_palets {

    position: absolute;

    z-index: -1;

    bottom: 32px;

    left: 58px;

    width: 22px;

    height: 13px;

    will-change: transform;

    border-radius: 35%;

    background: #A61110;

    animation: a2 7s ease infinite 7s

}

.dedMoroz_rykav {

    position: absolute;

    z-index: -1;

    bottom: 36px;

    left: 0;

    width: 73px;

    height: 44px;

    border-radius: 31px 31px 7px 7px;

    background: #F1EFEF

}

.dedMoroz_ryka_all {

    position: absolute;

    bottom: 0;

    will-change: transform;

    animation: a3 7s ease infinite 7s

}

/*If we use translate3d, then we will use a video card

*/

@keyframes a1 {

    40% {

        border-radius: 42%;

        transform: translate3d(0, 0, 0);

        height: 57px

    }

    50% {

        border-radius: 42% 42% 6px 6px;

        transform: translate3d(0, -30px, 0);

        height: 69px

    }

    60% {

        border-radius: 42% 42% 6px 6px;

        transform: translate3d(0, -30px, 0);

        height: 69px

    }

    80% {

        border-radius: 42%;

        transform: translate3d(0, 0, 0);

        height: 57px

    }

}

@keyframes a2 {

    40% {

        transform: translate3d(0, 0, 0)

    }

    50% {

        transform: translate3d(0, -15px, 0)

    }

    60% {

        transform: translate3d(0, -15px, 0)

    }

    80% {

        transform: translate3d(0, 0, 0)

    }

}

@keyframes a3 {

    50% {

        transform: translate3d(0, 0, 0)rotate(0)

    }

    51% {

        transform: translate3d(-15px, 0, 0)

    }

    52% {

        transform: translate3d(15px, 0, 0)

    }

    53% {

        transform: translate3d(-15px, 0, 0)

    }

    54% {

        transform: translate3d(15px, 0, 0)

    }

    55% {

        transform: translate3d(-15px, 0, 0)

    }

    56% {

        transform: translate3d(15px, 0, 0)

    }

    57% {

        transform: translate3d(0, 0, 0)

    }

}

/*end Santa*/

/*all*/

.all {

    position: relative;

    z-index: 1;

    background: rgba(0, 0, 0, .4);

    padding: 10px;

}

.main {

    position: relative;

    z-index: 1;

    padding: 10px;

    margin: 0 auto;

    background: #fff;

    width: 700px;

    height: 150px

}

h1 {

    text-align: center

}

div,

h1,

* {

color: rgb(49, 151, 116);

    font-family: 'Exo 2' 

}</style>

<div class="dedMoroz">

<div class="dedMoroz_ryka_all">

<div class="dedMoroz_rykav"></div>

<div class="dedMoroz_palets"></div>

<div class="dedMoroz_ryka"></div>

    <div class="dedMoroz_overlay"></div>

  </div>

</div>

  <main class="main">

    <div class="yourcontent">

      <h1>C Новым годом, дорогие друзья! С новым счастьем!</h1>

      <div>Дед Мороз сейчас Вас поприветсятвует</div>

    </div>

  </main>

</div>

Каждый из этих кодов устанавливаем в разделе Дизайн в гаджет HTML/JavaScript в любом месте макета. Только запомните где, чтобы после праздника легко можно было их удалить.

Вот пока и всё. Всем приятных предновогодних хлопот, настроения и здоровья. До встречи.

идеи подсказали здесь

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email