Создаем страницу-поздравление с Новым годом 2017!
- Получить ссылку
- Электронная почта
- Другие приложения
Автор:
Игорь Петренко
Всем привет! Как говориться, праздник к нам приходит, а что более звучно мне - свято наближається! Это я к чему - сегодня у меня новогодний пост, который посвящен необычной странице-поздравления. Никакого flash, только передовые технологии js, css и html! А что самое главное - это под силу каждому!
Как Вы увидели с демонстрации, главным эффектом нашей страницы являются разные снежинки, и то как они бесконечно падают. Весь секрет в спрайте (не в напитке) и в элементе HTML5 - canvas (холст).
Наш спрайт содержит пятнадцать разнообразных снежинок, а главной их особенностью является их одинаковый размер, что очень важно при работе скрипта. Суть его работы проста: он выделяет снежинку согласно координатам и "бросает" ее, создавая эффект падающего снега на сайте.
JavaScript- код
Теперь нужно наделить дизайном нашу будущую страницу. Здесь уже ничто не касается падающего снега, а самым главным параметром является background в элементе body, так как именно он отвечает за фон нашей страницы.
CSS-код
А теперь нам остается лишь всё это "сложить в одну коробку". Наша страница index.html будет содержать следующий код.
HTML-код
Как Вы заметили, файлы index.html, main.css, script.js должны лежать в одной директории - учтите это. Вот и всё, айда смотреть результат! Кстати, а что у Вас получилось? Кидайте ссылки в комментарии ниже - посмотрим, на что у вас хватит фантазии.
До новых встреч, йо-хо-хоу
Идея Андрю, автора Script Tutorials

Как Вы увидели с демонстрации, главным эффектом нашей страницы являются разные снежинки, и то как они бесконечно падают. Весь секрет в спрайте (не в напитке) и в элементе HTML5 - canvas (холст).
Наш спрайт содержит пятнадцать разнообразных снежинок, а главной их особенностью является их одинаковый размер, что очень важно при работе скрипта. Суть его работы проста: он выделяет снежинку согласно координатам и "бросает" ее, создавая эффект падающего снега на сайте.
JavaScript- код
/**
*
* Скрипт новогоднего праздника xD
*
* Licensed under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
*
* Идея Script Tutorials
* https://www.script-tutorials.com
*
* Адаптация
* https://www.ipetrenko.ru
*/
// canvas and context objects
var canvas, ctx;
//Snowflakes object
Snowflakes = (function () {
// sprites information
var sprCnt = 15;
var sprWidth = 80;
var sprHeight = 68;
// arrays of snowflakes and sprites
var snowflakes = [];
var snowflakeSprites = [];
// other inner params
var minScale = 0.2; // min scale for flakes
var maxScale = 1.2; // max scale for flakes
var minVerticalVelocity = 2; // min vertical velocity
var maxVerticalVelocity = 5; // max vertical velocity
var minHorizontalVelocity = -2; // min horizontal velocity
var maxHorizontalVelocity = 3; // max horizontal velocity
var minOpacity = 0.1; // min opacity
var maxOpacity = 0.9; // max opacity
var maxOpacityIncrement = 60; // opacity increment
// every flake swings in the interim between next deltas:
var minHorizontalDelta = 1;
var maxHorizontalDelta = 4;
var speed = 2; // speed
// get random number between x1 and x2
function getRandom(x1, x2) {
return Math.random() * (x2 - x1) + x1
}
// initialize sprites
function initializeSprites() {
var img = new Image();
img.onload = function () {
// fill snowflakeSprites with every sprite of sprite.png
for (var i = 0; i < sprCnt; i++) {
// create new canvas
var sprite = document.createElement('canvas');
sprite.width = sprWidth;
sprite.height = sprHeight;
var context = sprite.getContext('2d');
// and draw every sprite at this canvas
context.drawImage(img, i * sprWidth, 0, sprWidth, sprHeight, 0, 0, sprWidth, sprHeight);
// and fill array
snowflakeSprites.push(sprite);
}
}
img.src = 'https://nwo.ucoz.ua/demo/ny/sprite.png';
};
// initialize snowflakes
function initialize(number) {
// initialize sprites
initializeSprites();
// prepare a necessary amount of snowflakes
for (var i = 0; i < number; i++) {
snowflakes.push(initializeSnowflake());
}
};
// initialize snowflake
function initializeSnowflake() {
// get random scale
var scale = getRandom(minScale, maxScale);
return {
x: Math.random() * ctx.canvas.width, // x and
y: Math.random() * ctx.canvas.height, // y positions
vv: getRandom(minVerticalVelocity, maxVerticalVelocity), // vertical and
hv: getRandom(minHorizontalVelocity, maxHorizontalVelocity), // horizontal velocity
o: getRandom(minOpacity, maxOpacity), // opacity
oi: Math.random() / maxOpacityIncrement, // opacity increment
mhd: getRandom(minHorizontalDelta, maxHorizontalDelta), // maximum horizontal delta
hd: 0, // horizontal delta
hdi: Math.random() / (maxHorizontalVelocity * minHorizontalDelta), // horizontal delta increment
sw: scale * sprWidth, // scaled sprite width
sh: scale * sprHeight, // and height
si: Math.ceil(Math.random() * (sprCnt - 1)) // sprite index
}
};
// move flakes
function moveFlakes() {
for (var i = 0; i < snowflakes.length; i++) {
var osf = snowflakes[i];
// shift X and Y position
osf.x += (osf.hd + osf.hv) * speed;
osf.y += osf.vv * speed;
// swings
osf.hd += osf.hdi;
if (osf.hd < -osf.mhd || osf.hd > osf.mhd) {
osf.hdi = -osf.hdi;
};
// collision with borders
if (osf.y > ctx.canvas.height + sprHeight / 2) {
osf.y = 0
};
if (osf.y < 0) {
osf.y = ctx.canvas.height
};
if (osf.x > ctx.canvas.width + sprWidth / 2) {
osf.x = 0
};
if (osf.x < 0) {
osf.x = ctx.canvas.width
};
// toggle opacity
osf.o += osf.oi;
if (osf.o > maxOpacity || osf.o < minOpacity) {
osf.oi = -osf.oi
};
if (osf.o > maxOpacity)
osf.o = maxOpacity;
if (osf.o < minOpacity)
osf.o = minOpacity;
}
}
// render frame
function renderFrame() {
// move (shift) our flakes
moveFlakes();
// clear content
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// draw each flake
for (var i = 0; i < snowflakes.length; i++) {
var osf = snowflakes[i];
ctx.globalAlpha = osf.o;
ctx.drawImage(snowflakeSprites[osf.si], 0, 0, sprWidth, sprHeight, osf.x, osf.y, osf.sw, osf.sh);
}
}
return {
'initialize': initialize,
'render': renderFrame,
}
})();
// main initialization
function initialization() {
// create canvas and context objects
canvas = document.getElementById('panel');
ctx = canvas.getContext('2d');
// set canvas size - fullscreen
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
// loop main scene
setInterval(Snowflakes.render, 40);
Snowflakes.initialize(100);
}
// window onload event handler
if (window.attachEvent) {
window.attachEvent('onload', initialization);
} else {
if (window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
initialization();
};
window.onload = newonload;
} else {
window.onload = initialization;
}
}
Сохраните этот код в файле под названием script.js. Кстати, какой редактор Вы используете? Я ранее уже советовал три крутых редактора для вебмастера. Если сохраните спрайт себе на хостинг, то не забудьте поменять в вышеизложенном коде адрес картинки, который помечен красным, то есть это https://nwo.ucoz.ua/demo/ny/sprite.png.Теперь нужно наделить дизайном нашу будущую страницу. Здесь уже ничто не касается падающего снега, а самым главным параметром является background в элементе body, так как именно он отвечает за фон нашей страницы.
CSS-код
* {
margin: 0;
padding: 0;
}
body {
overflow:hidden;
background: url("https://nwo.ucoz.ua/demo/ny/christmas_tree1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Сохраняем этот код в файле под названием main.css. Опять таки, если захотите сохранить себе картинку или у вас будет своя - не забудьте поменять адрес изображения!А теперь нам остается лишь всё это "сложить в одну коробку". Наша страница index.html будет содержать следующий код.
HTML-код
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Новогоднее поздравление 2016 в HTML5 </title> <link rel="stylesheet" href="http://nwo.ucoz.ua/demo/ny/main.css" type="text/css"> <script src="https://nwo.ucoz.ua/demo/ny/script.js"></script> </head> <body> <canvas height="667" width="1360" id="panel">Сорян, ваш браузер не поддерживает HTML5 ;(</canvas> </body> </html>
Как Вы заметили, файлы index.html, main.css, script.js должны лежать в одной директории - учтите это. Вот и всё, айда смотреть результат! Кстати, а что у Вас получилось? Кидайте ссылки в комментарии ниже - посмотрим, на что у вас хватит фантазии.

До новых встреч, йо-хо-хоу

Идея Андрю, автора Script Tutorials
Ах да, друзья, чуть не забыл! Я недавно завел личный канал в Telegram, где делюсь своими мыслями по поводу продуктивности, отношений и жизни. Не блогерством единым живем. Буду рад каждому ;)
- Получить ссылку
- Электронная почта
- Другие приложения
Комментарии
Популярное
Установка и настройка модема Huawei HG532e (+ мини-обзор)
Автор:
Игорь Петренко
Всем привет! Сегодня у меня по всему дому хаос и многовластие! Вай-Фай, короче появился.
Иногда даже лень сесть за компьютерный стол, чтобы посмотреть новости, почитать Твиттер и тд. Но нужно быть в тренде (или просто убить время)! Поэтому вай-фай на весь дом - то что нужно, тем более что ранее у меня появился планшет, так что есть откуда по серфить в Интернете!
Ну что ж, не будем терять время и давайте установим и настроим модем Huawei HG532e!
А начну я с обзора содержимого коробки, которое я получил в отделении Укртелекома. Вот так, собственно, выглядит коробка от модема.
Да, сделано в Китае. Но, практически, вся электроника делается в Поднебесной, поэтому, надеюсь, это модем прослужит мне долго.
Очень полезная брошюра - "Инструкция по использованию".
А вот и самое интересное - содержимое коробки! Что туда входит?
1. Модем
2. Блок питания
3. Сплиттер
4. Телефонный кабель RJ-11 (2шт.)
5. Ethernet кабель RJ-45
6. Инструкция пользователя
7. Диск
8. Гарантийный талон (его нет…
Иногда даже лень сесть за компьютерный стол, чтобы посмотреть новости, почитать Твиттер и тд. Но нужно быть в тренде (или просто убить время)! Поэтому вай-фай на весь дом - то что нужно, тем более что ранее у меня появился планшет, так что есть откуда по серфить в Интернете!
Ну что ж, не будем терять время и давайте установим и настроим модем Huawei HG532e!
А начну я с обзора содержимого коробки, которое я получил в отделении Укртелекома. Вот так, собственно, выглядит коробка от модема.
Да, сделано в Китае. Но, практически, вся электроника делается в Поднебесной, поэтому, надеюсь, это модем прослужит мне долго.
Очень полезная брошюра - "Инструкция по использованию".
А вот и самое интересное - содержимое коробки! Что туда входит?
1. Модем
2. Блок питания
3. Сплиттер
4. Телефонный кабель RJ-11 (2шт.)
5. Ethernet кабель RJ-45
6. Инструкция пользователя
7. Диск
8. Гарантийный талон (его нет…
Страница обратной связи для блогов на платформе Blogger \ Blogspot.com
Автор:
Игорь Петренко
Добрый день, уважаемые читатели! Очень важно общаться с читателями, и по этому нужно на блоге иметь такую страничку, откуда Вам могли бы писать на почту. Ведь не факт, что все захотят копировать Ваш адрес, вводить в поисковою строку название своего почтового веб-клиента, и писать Вам письмо. Всё это, попросту, отобьет желание у читателя. Давайте же упростим жизнь всем, создадим форму обратной связи для Вас и Ваших читателей!
Виджет профиля Instagram на ваш сайт/блог
Автор:
Игорь Петренко
Приветствую!
Многие из Вас знают, что такое Instagram. Для тех кто не знает, то я кратко расскажу.
Instagram - кроссплатформенное мобильное приложение для публикации квадратных фото (как в фотоаппаратах Polaroid) с применением эффектов. Создали Инстаграм в 2010 году Кевин Систром и Майк Кригер. В 2012 сервис был продан в Facebook за $300 млн + 20 млн акций компании.
А теперь о главной теме заметки. Есть три хороших способа (сервиса) для вставки вашего Инстаграм-профиляна Ваш сайт или блог.
Многие из Вас знают, что такое Instagram. Для тех кто не знает, то я кратко расскажу.
Instagram - кроссплатформенное мобильное приложение для публикации квадратных фото (как в фотоаппаратах Polaroid) с применением эффектов. Создали Инстаграм в 2010 году Кевин Систром и Майк Кригер. В 2012 сервис был продан в Facebook за $300 млн + 20 млн акций компании.
А теперь о главной теме заметки. Есть три хороших способа (сервиса) для вставки вашего Инстаграм-профиляна Ваш сайт или блог.
Подскажите пожалуйста, насколько это утяжелит страницу?
ОтветитьУдалитьЗдравствуйте, Виктория!
УдалитьСам эффект "утяжелит" страницу чуть более чем на 100 Кб. Script.js (7Кб), Main.css (1 Кб), Sprite.png (98 Кб) = 106 Кб
Если будете делать на отдельной странице, то учитывать нужно и размер картинке на фоне.
А как такое в блоге на Blogger сделать?
ОтветитьУдалитьДовольно просто, если использовать выше указанную инструкцию. Даже адресс файлов (спрайта и js, css).
УдалитьНапример, я вот на странице отдельной сделал: http://www.ipetrenko.ru/p/happy-year-webmaster.html