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

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

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

Ваш ip адрес:54.198.210.67

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

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

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

efectПривіт всім відвідувачам Zura — Blog, в сьогоднішній публікації до вашої уваги коротеньке розяснення до ефекту музикальної  сторінки “Новорічна ніч”,

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

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

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

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

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

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

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

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

old new year4

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

А далі власне тлумачення, що можите поміняти.  

Ітак всі зміни робляться в папці “examples”

old new year

в цій папці присутні дві папки, це “images” і “audio”, не має сенсу пояснювати які файли там знаходяться, в папці “images” графічний файл “flake.png” не чіпаємо, це сніжинка, а остальні це фон, можите ваш виставити, але назви графіних файлів які будуть відображати фон, даєте ті самі, це —  “smashing.jpg” і “snow.jpg”.

old new year2

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

old new year3

В іншому випадку, нікого з вас мабудь (не закортить ритись в кодах), і там міняти назви файлів.

В папці “audio” можна дати свою композицію, назва файлу та сама, або можите свою залишите, але тоді в коді потрібно вказати вашу назву.

Рядки кодів які стосуються програванню аудіокомпозиції, знаходяться в файлі “index.html”, в самому кінці перед тегом </body>.

<audio autoplay loop>
    <source src="audio/zvuki-christmas_message.mp3.ogg" type="audio/ogg; codecs=vorbis">
    <source src="audio/zvuki-christmas_message.mp3" type="audio/mpeg">
    </audio>

Якщо зняти в коді атрибут “loop” то мелодія не буде постійно програватись, слова в рядках кодів які стосуються аудіо, “zvuki-christmas_message.mp3” як ви розумієте, то це назва моєї аудіокомпозиції, цю назву в коді міняєте на свою.

Далі, вище в кодах сторінки йде текст віршів, між тегами “<p></p>” вставляєте ваш текст.

<div class=”collectonme”>
<p>Хай буде Новий Рік у вас схожий на диво</p>
</div>
<div class=”collectonme”>
<p>Щоб кожен день жилося радісно й щасливо!</p>
</div>
<div class=”collectonme”>
<p>Щоб здійснилися задуми і мрії, і щастям повнились надії!
</p>
</div>
<div class=”collectonme”>
<p>Zura – blog вітає всіх вас З новим 2017 роком</p>
</div>

В коді це 19 – 29 рядок, саме там міняєте і додаєте хоть двадцять колонок з текстом, хоть сто, правда на кожну колонку додаєте рядок коду, приклад нижче. 

<div class=”collectonme”>
<p>ваш тект</p>
</div>

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

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

Ну що ж на цьому все, і вітаю всіх вас з Старим Новим Роком!

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

До речі цей вечір називається — Щедрий вечір.


user_97

Демнонстрація ефекту “Новорічна ніч”

Скачати ефект “Новорічна ніч” з музикою можна тут

 

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


Leave a Reply

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