4 динамични коледни украси за всеки ресурс, GeekBrains - образователен портал
Наближават новогодишните и коледните празници. Във въздуха се усеща празнично усещане: хората купуват коледна украса, окачват гирлянди и издълбават снежинки, създавайки празнично настроение и добавяйки ярки цветове към околното пространство. Виртуалната реалност е станала част от нашето ежедневие и също изисква декорация. Предлагам няколко прости и ефективни решения, които ще оживят вашия сайт, ресурс или блог, ще добавят цвят и новогодишно настроение към него. Ще видите, че декорирането на вашия сайт не е трудно - трябва желание, малко внимание и постоянство.
Често срещана коледна украса, защото зимата в северните ширини винаги е свързана със сняг. Примерът е реализиран с помощта на CSS, така че ще се показва във всички браузъри, независимо от настройките му. Ето как работи.
Създаваме три изображения със снежинки в png формат. Направете фона прозрачен. Това са кадри от нашата бъдеща анимация, плътността на снеговалежа зависи от броя на снежинките, така че не трябва да правите много снежинки. Направете снежинки с различни размери - това ще създаде усещане за перспектива, т.е. снеговалежът ще е триизмерен.
Изображения: (реален размер 400x400 px):
Във фоново изображение ние изброяваме всички използвани изображения, разделени със запетаи. Нека направим фон, върху който да вмъкваме изображения и да ги анимираме със свойството animation.
15s - време на анимация. Настройте рамки:
Нищо сложно, няколко снимки и малко код, и готово - снеговалежът на сайта ви е гарантиран. Какви ще бъдат снежинките и как ще се движат зависи от вашето въображение.
Друга обичайна коледна украса е да я окачите на нашия уебсайт. В примераjs се използва. Нека извадим самия гирлянд. Моля, обърнете внимание, че изображението е външно. Можете да вземете своя собствена, като не забравяте да коригирате размера, от който се нуждаете във височина, според логиката на кода.
position:fixed ще закачи гирлянда в горната част на прозореца и ще предотврати движението й заедно със съдържанието. Малък скрипт и гирляндът започва да мига.
Скоростта на мигане на светлините се задава от параметъра в setInterval.
Таймер за обратно броене.
Популярен сценарий "Колко време остава до Нова година." Ето един от вариантите за внедряването му в JS
Форматът е дни, часове, минути, секунди. Външният вид може да се персонализира с помощта на css, за да съответства на стиловете и цветовете на вашия сайт. Внедрено изключително в JS, така че ако скриптовете са деактивирани, няма да работи.
Коледна украса от Яндекс
По някакъв начин преди новата година Yandex красиво оформи входа на пощата и декорацията стана много популярна. Няма как да не споделя тази красота.
Трансформацията се използва със свойството rotate. Когато се задържите над топките на гирлянда, те започват да се люлеят и издават мелодични звуци. За съжаление функциите на JSFiddle не ви позволяват да качите външен файл, така че аз го качвам в облака. (Звуков файл ny2012.swf, 215 KB)
И ако в последната статия бяха разгледани скелети, базирани на CSS, сега виждате много реално използване на тези функции. Можете да видите резултата със звук тук. JSFiddle съдържа целия код. Не се страхувайте, че има много, там няма нищо сложно - използването на CSS за описание на класове и внедряване на анимация.
Когато инсталирате на сайта, не забравяйте да свържете:
Или използвайте внедрения скрипт като в JSFiddle.
Късмет! Нека вашият ресурс изглежда като ярка Нова година.
И можете да научите как да правите добри уебсайтовекато уеб разработчик.