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

За всё время у меня было много статей, как украсить блог к Новому году. Мне пришлось все публикации объединить в одно сообщение, для вашего удобства, чтобы не искать в списке статей. Там масса вариантов украшения страниц. Есть возможность подобрать для себя что - то интересное.
Вот подборка вариантов оформления блога на Новый год
Сегодня покажу ещё три решения, как украсить страничку или весь блог к празднику.
Первые 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 в любом месте макета. Только запомните где, чтобы после праздника легко можно было их удалить.
Вот пока и всё. Всем приятных предновогодних хлопот, настроения и здоровья. До встречи.
идеи подсказали здесь
С наступающим праздником Вика!
ОтветитьУдалитьСпасибо, Саша. И тебя тоже. Всяческих благ.
ОтветитьУдалитьИнтересно, Виктория! Но я блоги свои как-то побаиваюсь украшать в подобной форме. Помню одну свою блогоподругу, которая установила себе снежинки, и они у нее и летом падали в постах, т.к. она забыла, как их убрать.
ОтветитьУдалитьА потом из-за этого она и блог удалила.
Ирина, я не понимаю твоей боязни. И подругу твою не понимаю. У кого - то ведь она брала код снежинок, обратилась бы к автору. Тут не в снежинках, видимо дело было. Вставил в гаджет, запомнил где он и потом удалить.Это как дважды два. Ты же помню ставила обратный отсчёт времени.
УдалитьСпасибо, Викуличка! Всё очень понравилось. Установила парочку, правд,а хотела уменьшить снежинки, цвет изменила, а снежинки никак.. я их правда не все попробовала, потом еще попробую... С наступающим!!!
ОтветитьУдалитьЛена, тебя тоже с наступающим. Поиграйся со всеми значениями font-size.
УдалитьВсё, как всегда, превесело. Однако. Новый Год не то, что не на пороге. Дедушка Мороз, полагаю, еще не запряг оленей в сани!
ОтветитьУдалитьСемён, не на пороге - это да. но как говорится, кто празднику рад, тот накануне пьян. А если серьёзно, меня через неделю поглатит предновогодняя суета уже. Не до того будет.
УдалитьС наступающим! Самое время веселым штучкам))))
ОтветитьУдалитьLight Knight, и Вас с наступающим. Да, уже думаю пора. Потом и мне не до того будет, да и тем, кто блоги украшает к празднику. Я уже и на окно гирлянду прицепила. Веселее подготовка пойдет. Ой, а в городе - то как красиво уже!!!
УдалитьСпасибо за новогодние полезности ! ))))
ОтветитьУдалитьВикуля и тебе спасибо. Успехов в блоговедении.
ОтветитьУдалитьМатушка Виктория! К тебе в блог надо приходить в последнюю очередь!!!!!...Зашла...поработать...Но,.... у тебя вот уже час сижу рассматриваю снежинки и иже с ними!!!! Как всегда интересно! Долго думала, но Снеговичок победил!!! Поехал он в Библиомир!!!!!!
ОтветитьУдалитьКакой веселый код у Снеговика. Целая поэма!!!
ОтветитьУдалитьСНЕГОВИЧОК ОЧЕНЬ ВЕСЕЛЫЙ ОКАЗАЛСЯ! НЕ РАБОТАЕТ У МЕНЯ. Я ПРАВИЛЬНО ПОНЯЛА, ЧТО ЭТОТ ВЕСЬ КОД ДЛЯ СНЕГОВИКА?
ОтветитьУдалитьИрина, может ты не весь код (поэму, как ты пишешь, скопировала. Дело в том что все эти коды без всяких джава и библиотек других, очень лёгкие. Ну заюежала к тебе гирляндочка уже стоит красивая.
УдалитьВика. А снежинки и впрямь выглядят по-новогоднему и ненавязчиво. Твоё предложение не проходить мимо актуально. Спасибо
ОтветитьУдалитьЛюба, як тебе тоже в гости сбегала. Твоя гирляндочка тоже милая и ненавязчивая. Много пихать мишуры не стоит. Я вот только приветствие организовала ещё одну плюшку небольшую добавлю и думаю будет достаточно.
ОтветитьУдалитьЗдравствуйте, Вика!
ОтветитьУдалитьВот и я решила свой блог украсить к Новому году. Понравилась Ваша идея с мерцающими снежинками. Теперь снежок у меня в Блокноте! Спасибо!
Здравствуйте, Татьяна. Забежала к вам на снежинки. Очень уютно и ни капли не раздражает. Мне понравилось.
УдалитьПривет, Вика! С наступающим! Да, видимо не все у меня в блоге работает. Код копировала весь аж 2 раза проверяла! Гирляндочка к сожалению не от тебя, но повесилась хоть такая. А за курсором бегают слова у меня, если с твоей стороны заходить. У меня бегают, а у др читателей?
ОтветитьУдалитьВсё равно спасибо тебе за то, что ты у нас есть- не устану это повторять!
Ирина, привет. Поигралась с твоим курсором. слова бегают - счастья, здоровья и удачи. Чего и тебе желаю.
УдалитьВика, Спасибо большое!
ОтветитьУдалить