Новорічна анімована шапка на css3
До нового року залишилося менше двох місяців, і я вважаю що вже необхідно готувати ваші сайти в цій події. А почнемо ми підготовку з шапки сайту, і в цьому уроці ми створимо анімовану новорічну шапку на CSS3.
Приклад анімації можна побачити тут:
Подивитися прімерСкачать
Ви, напевно, вже знаєте як створюється анімація на CSS3. Вона створюється за допомогою правила @keyframes. Але в уроці ми не будемо використовувати префікси (-webkit, -moz, -ms), щоб не писати багато коду.
HTML частина
Структура документа проста:
1234567891011 | lt;div class="Header"gt;lt;div class="Wrapper"gt;lt;div class="Christmas-tree tree1"gt; lt;/divgt;lt;div class="Christmas-tree tree2"gt; lt;/divgt;lt;div class="Christmas-tree tree3"gt; lt;/divgt;lt;div class="Snowman"gt; lt;/divgt;lt;div class="Christmas-tree tree4"gt; lt;/divgt;lt;div class="Christmas-tree tree5"gt; lt;/divgt;lt;div class="Christmas-tree tree6"gt; lt;/divgt;lt;/divgt;lt;/divgt; |
Необхідні зображення:
Той, хто йде сніг, але його тут не видно # 128578; |
CSS частина
Для того щоб була анімація йде снігу необхідно змінювати значення властивості background-position:
123456789101112131415 | .header {margin: 0 0 30px-background: url(../images/header-bg.jpg)-background: url(../images/snow-bg.jpg) repeat-y center, url(../images/header-bg.jpg)--webkit-animation: animate-snow 9s linear infinite--moz-animation: animate-snow 9s linear infinite--ms-animation: animate-snow 9s linear infinite-animation: animate-snow 9s linear infinite-}@keyframes animate-snow{0% { background-position: center 0, 0 0-}100% { background-position: center 885px, 0 0-}} |
А блок з класом wrapper буде містити фон, а також ялинки зі сніговиком:
12345678 | .wrapper {width: 960px-height: 315px-margin: auto-overflow: hidden-position: relative-background: url(../images/wrapper-bg.jpg) no-repeat bottom-} |
Потім ялинки з`являються не одночасно, що й створює такий гарний ефект:
Відео: HTML верстка на прикладі бізнес сайту: Урок 5 (шапка і верхнє меню)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 | @keyframes animate-drop {0% {opacity:0-transform: translate(0, -315px)-}100% {opacity:1-transform: translate(0, 0)-}}.christmas-tree, .snowman {position: absolute--moz-animation: animate-drop 1s linear--webkit-animation: animate-drop 1s linear--ms-animation: animate-drop 1s linear-animation: animate-drop 1s linear-}.christmas-tree {width: 112px-height: 137px-background: url(../images/christmas-tree.jpg)-}.snowman {width: 115px-height: 103px-top: 195px-left: 415px-background: url(../images/snowman.jpg)--moz-animation-duration: .6s--webkit-animation-duration: .6s--ms-animation-duration: .6s-animation-duration: .6s-}.tree1 {top: 165px-left: 35px--moz-animation-duration: .6s--webkit-animation-duration: .6s--ms-animation-duration: .6s-animation-duration: .6s-}.tree2 {left: 185px-top: 175px--moz-animation-duration: .9s--webkit-animation-duration: .9s--ms-animation-duration: .9s-animation-duration: .9s-}.tree3 {left: 340px-top: 125px--moz-animation-duration: .7s--webkit-animation-duration: .7s--ms-animation-duration: .7s-animation-duration: .7s-}.tree4 {left: 555px-top: 155px--moz-animation-duration: .8s--webkit-animation-duration: .8s--ms-animation-duration: .8s-animation-duration: .8s-}.tree5 {left: 710px-top: 170px--moz-animation-duration: .7s--webkit-animation-duration: .7s--ms-animation-duration: .7s-animation-duration: .7s-}.tree6 {left: 855px-top: 125px--moz-animation-duration: .6s--webkit-animation-duration: .6s--ms-animation-duration: .6s-animation-duration: .6s-} |
Браузери, які підтримують даний ефект: Firefox 5 +, IE 10+, Chrome 6+, Safari 5+.
висновок
Дійсно приголомшливий ефект. Ближче до нового року можна буде встановлювати :).
Відео: Speed Art I НОВОРІЧНА ШАПКА ДЛЯ КАНАЛУ! + Мініподкаст = 3
Успіхів!
джерело: red-team-design.com