Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 24
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

valentin10Привіт всім відвідувачам Zura – Blog, сьогодні 14 лютого, сьогодні відмічають день усіх закоханих, сьогодні свято, сьогодні День Святого Валентина.

Можна сказати, що це вже стало як традиція, коли на календарі намічається один з святкових днів, на Zura – Blog зявляється якийсь з красивих ефектів.

І на цей день до вашої уваги, на Zura – Blog для вас знайдеться інформація а також демонстрація і можливість скачати красиво оформлену музикальну сторінку, яка присвчена Дню Святого Валентина.

Сторінка яку ви можите переглянути, і якщо вам сподобається, в цій публікації знайдеться посилання а також можливість скачати собі її, і крім того, кому цікаво як створити таку сторінку, то також до вашої уваги, знайдеться в публікації “пару слів” яким чином можна самому зробити щось подібне.

Скажем так, у кожного з нас різні смаки, таким чином, графічний файл який відображає фон сторінки, може комусь з вас і не підходити, і взагалі не подобатись.

В когось можливо буде бажання отримати для свого проекту скажем тільки анімацію, але відсутній досвід в вирішені подібних завдань, тому звісно що для таких відвідувачів необхідне додаткове розянення, для того щоб прочитавши тлумачення, а саме як на такій сторінці, і які зробити зміни, щоб все підналаштувати для свого проекту.

Отож, основа сторінки це скрипт, написаний на мові програмування JavaScript, саме цей скрипт відображає анімацію, анімація це сердечко, точніше шаріки які рухаються по спеціально вибраній траекторії, траекторія яка відображає таке сердечко.

Сюда також входять рядки коду, з каскадних таблиць стилей CSS, саме в цих рядках можна де що “підшаманити” під ваш проект, також для такої сторінки потрібні папки, в яких повинен знаходитись аудіо файл, і графічний файл, разом вся ця комбінація і складає музикальну сторінку, яка стосується сьогоднішнього свята.

Таке “середечко” звичайно можна і для інших цілей застосувати, можна і для сторінки, наприклад на день народження, зробити так сказати сторінку подарунок.

Знаєте, до речі почав я писати ці рядки, коли до дня “Валентина” ще більше місяця, і ця публікація буде чекати до свого виходу, більше як цілий місяць, хоча можливо таким способом, пишуть свої  публікації  більшість блогерів.

Я також можна сказати, що сам вже практикую такий спосіб для публікацій, (правда інші публікації не місяць очікують, щоб їх опублікували) спочатку використовую чорновик, а потім коли настане момент, щоб не сидіти над текстами, а опублікувати вже готовий матеріал.

Що цікаво, зараз коли пишу ці рядки, погода просто жахлива, не знаю яка вона буде чотирнадцятого лютого, не щодавно прийшли люті морози, а за ними і снігопади, просто жах а не зима.

А я ще й на всю біду я “грип” підхватив, прямо на 31 грудня, на Новий рік, зараз відійшов вроді би, а тут на тобі, ще й морози.

Звичайно, що святкування в мене обходяться без “спиртного”, вживання спиртного може бути чревато для мене, адже послаблює імунітет, хоча таблетки вже я і не пю, останню приписану лікарем сьогодні випив.

Зима не спорю, якраз для зимових свят, супер, але багато з нас вже мабуть відвикли від таких морозів і снігопадів, хоча памятаю були і ще більші.

Сніг можливо комусь з вас настрою святкового додає, але не в моєму випадку, адже сніг потрібно буде відкидати, а мені то якраз вдихати холодне повітря не бажано, а ще й в поліклініку через день мандрувати, а скільки то снігу може за цей час нападати.

Автобусом добиратись, також не дуже хороший варіант, ну нічого не зробиш, отож відволікся я від теми, деякі деталі по цій сторінці я вже вказав, ну що ж, дальше до вашої уваги повністю код сторінки.

Хто з вас любитель посидіти з різними програмами, кодами, і тому подібне, тоді розбираємо код по частинках, та і в принципі дальше публікація буде стосуватись саме вас, це любителів “попаритись” з кодами.

Також на цій сторінці внизу, присутня можливісь скачати повністю готовий проект, хто не любитель з цим всім “бавитись”, можите скачати і використовувати для ваших сайтів.

Отож які дії виконуються, щоб створити цей або подібний проект самому, створюєте папку, даєте назву папці, в цій папці створюєте ще дві папки, але з такими назвами “images1” і “audio”, по самих назвах не тяжко зрозуміти, що в одній знаходиться графічний файл який відображає фон сторінки, а в іншій аудіокомпозиція.

До речі, і графічний і аудіофайл, ці файли мені приходилось самому “підшаманти”, в редакторах, програми від компанії “Adobe” — “Photoshop CC x64” і “Adobe Audition”.

Прийшлось ще й з музикою повозитись, для новачка порада, якщо вирішили серйозно займатись веб дизайном, то без подібних програм вам не обійтись.

Аудіофайл, це була частинка пісні, її початок, мелодія до перших слів одної з пісень, коли шукав підходячу аудіокомпозицію під цю музикальну сторінку, сподобався початок мелодії, вирішив завантажити, правда то була ціла пісня.

До речі скачати на ресурсі, на якому знаходився музикальний файл, як виявилось можна було на цілу “дулю”.

Я чуть було не “лоханувся” на тому ресурсі, там хитра система закачки, кнопка вказувала на те, що безкоштовно на малій швидкості у вас є можливіть скачати файл, думаю не біда — почекаю, в загальному клацаю на кнопку, далі ще на одну, і так далі лише “гуляю” по рекламних сторінках, на ту перейти, на іншу.

І ось, чуть було не допереходився. Клацнувши ще раз, ледь було до себе на “ноут”, не завантажив якесь вибачте на слові “лайно”. То була програма для швидкої закачки файлів з інтернету. Йшли би ви з вашою програмою “та й в широку”, я і без скачування знаю як вийти з такого положення.

Якраз прога “Adobe Audition” прийшла на виручку, потужна прога по роботі з аудіо, власне можливість прослухати аудіотрек на тому ресурсі було без всяких там “підколок”, включив трек з того ресурсу на програвання, за допомогою “Adobe Audition” записав, до речі  якість запису в цій “прозі” відмінна, за одно є можливість в композиції “обрізати” лишнє, далі зберіг готовий файл.

Так що раджу звернути увагу на цю “прогу”, та й взагалі компанія “Adobe” лідер мабуть зараз по програмному забезпеченню, до речі “Adobe Audition” вважається самим крутим по роботі з аудіо, скадніший редактор по рівняно з безкоштовним “Audacity”, але можливостей набагато більше.

До речі, якщо відсутня можливісь отримати “Adobe Audition”, тоді “Audacity” — безкоштовний аудіоредактор, суперовий буде варіант, все що потрібно, також знайдеться в ньому.

Ну і як тут ще раз не наголосити на безкоштовному редакторі по програмуванню “Notepad++”, адже “Adobe Dreamweaver CC 2017” від “Adobe” в мене зависав, із за анімованого “сердечка”, і за цього “Dreamweaver”, мені два рази приходилось перезапускати комп   ❓

Так що не завжди, така можливість як бачити код і результат заодно в інтерфейсі програми, буває доцільніше, можна сторінку перезапускати в браузері, після того коли вносили і зберігали зміни в простому редакторі, в крайньому разі так нічого не зависне.

Скрипт який відображає “Сердечко” — “підгружав” Dreamweaver, тому з змінами які ви будите вносите в цій сторінці, краще робити в “Notepad++”, “Adobe Dreamweaver CC 2017” зависає, або відключити в цій прозі можливість перегляду коду і результату.

Отже щоб зробити таку сторінку, вам потрібен буде редактор по програмуванню, і можливо також аудіоредактор, і графічний редактор, мабуть і “пошуковик”, щоб знайти прийнятний для вас графічний файл, і аудіокомпозицію.

Код музикальної сторінки присвяченої дню Святого Валентина.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Valentin</title>
	<style>
	body
	{
    background-image:url(images1/8.jpg);
	width: 600px;
	}
	#c {
display: block;
margin: 50px auto;
margin: calc(50vh - 175px) auto;
}
	</style>
</head>
<body>
 <audio autoplay loop>
    <source src="audio/valentin_02.mp3.ogg" type="audio/ogg; codecs=vorbis" loop>
    <source src="audio/valentin_02.mp3" type="audio/mpeg">
    </audio>
<canvas id="c"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 500;
var ch = c.height = 500;
var cx = cw / 2, cy = ch / 2;
var rad = Math.PI / 180;
var howMany = 500;
var p = [];
var colors = ["242,41,41", "222,80,80", "247,111,111", "255,145,145", "252,199,199"];
ctx.strokeStyle = "white";
ctx.globalAlpha = .7;

function particles()
{
this.r = randomIntFromInterval(2, 12);
var innerR = Math.round(Math.random() * 130) + 1;
var innerA = Math.round(Math.random() * 360) + 1;
this.x = cx + innerR * Math.cos(innerA * rad);
this.y = cy + 20 + innerR * Math.sin(innerA * rad);
this.ix = (Math.random()) * (Math.random() < 0.5 ? -1 : 1);
this.iy = (Math.random()) * (Math.random() < 0.5 ? -1 : 1);
this.alpha = Math.random();
this.c = "rgba(" + colors[Math.round(Math.random() * colors.length) + 1] + "," + this.alpha + ")";
}

for (var i = 0; i < howMany; i++)
{
p[i] = new particles();
}

function Draw()
{
ctx.fillStyle = "rgba(255,255,255,.1)";
ctx.fillRect(0, 0, cw, ch);
for (var i = 0; i < p.length; i++)
{
ctx.fillStyle = p[i].c;
// Текущий путь для isPointInPath
thePath(p[i].r);

if (ctx.isPointInPath(p[i].x, p[i].y))
{
p[i].x += p[i].ix;
p[i].y += p[i].iy;
ctx.beginPath();
ctx.arc(p[i].x, p[i].y, p[i].r, 0, 2 * Math.PI);
ctx.fill();

} else {
p[i].ix = -1 * p[i].ix;
p[i].iy = -1 * p[i].iy;
p[i].x += p[i].ix;
p[i].y += p[i].iy;
}
}
window.requestAnimationFrame(Draw);
}
window.requestAnimationFrame(Draw);

function thePath(r)
{
//Рисуем наше сердечко
ctx.beginPath();
ctx.moveTo(250, 200);
ctx.arc(350, 200, 100 - r, Math.PI, Math.PI * 0.23);
ctx.lineTo(250, 450);
ctx.arc(150, 200, 100 - r, Math.PI * 0.77, 0);
}

function randomIntFromInterval(mn, mx)
{
return ~~(Math.random() * (mx - mn + 1) + mn);
}
</script>
</body>
</html>

Почнемо з редактора по програмуванню, створюємо в редакторі новий файл, копіюємо вміст вище, і зберігаємо, розширення виставляємо html, отож після збереження, ми зможемо зразу запустивши файл в браузері, побачити результат у вигляді середечка.

Далі розбираємо сам код сторінки.

Стилі css — складаються з двох частин, перша частина, там знаходиться посилання на графічний файл, файл який буде відображати фон сторінки, як самі бачите в коді, що файл повинен знаходитись в папці “images1”, отож створюєте папку, і в папку ваш файл, тут його назва “8”, розширення “jpg”.

background-image:url(images1/8.jpg);

Можите зробити по своєму, в такому разі потрібно вносити зміни в цій частинці коду стилей css.

Друга частинка коду стилей css, вказує на індентифікатор “#c “, відповідає за положення сердечка, де в якому місці воно відображається на сторінці.

#c {
display: block;
margin: 50px auto;
margin: calc(50vh – 175px) auto;
}

“Анімоване сердечко” — може у вас в любому місці відображатись, в цій частинці коду виставляєте свої координати.

Дальше в коді сторінки розташовані рядки кодів які мають відношення до аудіокомпозиції, атрибут “loop” призначений щоб музика програвалась постійно.

<audio autoplay loop></audio>

Між цими тегами “audio”, знаходиться посилання на мелодію, “valentin_02.mp3”, це назва моєї мелодії, щоб програвалась ваша, міняєте ці значення, ну і звісно що в папці “audio” повинен знаходитись аудіофайл, розширення mp3.

Рядок коду <canvas id=”c”></canvas> — між тегами <body></body>, в мене на початку виставлений індентифікатор, а знизу скрипт на мові програмування JavaScript.

Ось і все, зовсім не складно, щоб зробити свою музикальну сторінку, можливо прийдеться вам також,  трошки  “попаритись” з “Photoshop CC x64” і аудіоредакторами   😉 


user_97

Переглянути музикальну сторінку Валентин

Скачати музикальну сторінку присвячену дню Святого Валентина можна тут


Leave a Reply

Your email address will not be published. Required fields are marked *