03:33 Эффекты для заставки на сайт или страницы «Скоро открытие» на CSS3 | |
| Технология CSS3 открыла нам бесчисленные возможности, и сегодня мы хотим представить вам руководство по разработке привлекательных страниц, предназначенных для оповещения посетителей о скором открытии веб-сайта, а также о создании заставок на сайт, реализованных посредством анимации в CSS3. Мы немного поиграем с анимацией и постараемся придать жизнь некоторым простым элементам. Милые фотографии обуви, использованные в первом демо, были сделаны Амирой Алмаджид (Amira Almajid), и полный набор вы можете найти здесь. Пожалуйста, учтите, что анимации будут работать только в современных браузерах. Дабы сократить объемы руководства, мы опустили использование CSS-префиксов производителей браузеров, но они прописаны в файле, который вы можете скачать с этой страницы. Итак, приступим! Пример 1  Пожалуйста, учтите, что в данном примере мы выставили долгое время загрузки, чтобы изображения успели загрузиться. В первом примере у нас есть несколько элементов, которые мы будем «оживлять». Шаблон данного примера будет выполнять задачу страницы-оповещения о скором открытии ресурса. Здесь у нас есть основной контейнер с областью контента. Внутри него мы расположим несколько ячеек для миниатюр. У нас также есть ячейка контента, предназначенная для основных заголовков. После того, как будет отображена основная область с контентом, на страницу «подъедет» сторонний элемент, содержащий форму ввода адреса электронной почты: Разметка [img]images/example1/1.png[/img] [img]images/example1/2.png[/img] [img]images/example1/3.png[/img] [img]images/example1/4.png[/img] [img]images/example1/5.png[/img] [img]images/example1/11.png[/img] [img]images/example1/12.png[/img] Coming SoonDesinger Shoes that you dream of for incredible pricesLittle Blue Shoe[img]images/example1/13.png[/img] [img]images/example1/14.png[/img] [img]images/example1/6.png[/img] [img]images/example1/7.png[/img] [img]images/example1/8.png[/img] [img]images/example1/9.png[/img] [img]images/example1/10.png[/img] Be the first to know:Хорошо, теперь приступим к захватывающей части – к CSS! CSS-код Основная идея данного примера заключается в следующем цикле анимации: * Миниатюры появляются при помощи fromBack. * Первый H1 появляется при помощи fromBack. * Подзаголовок H2 появляется при помощи fromBack. * Первый H1 и подзаголовок H2 исчезают при помощи fadeOut. * Миниатюры начинают последовательно исчезать посредством fadeOut и второй H1 появляется при помощи fadeInColor. Также, контент двигается в левую сторону и немного уменьшается посредством sizeDownMove. * Стрелка и сторонний контент выезжают с левой стороны посредством slideIn. Теперь давайте центрируем основной контейнер и зададим контенту абсолютное позиционирование: .sp-container {position: relative;width: 1000px;height: 600px;margin: -40px auto 0 auto;}.sp-content {position: absolute;z-index: 100;width: 800px;height: 600px;left: 0px;top: 0px;animation: sizeDownMove 0.9s ease-in-out 6s backwards;transform: scale(0.6);transform-origin: 0% 50%;} Как видно, мы применяем ту анимацию к контенту, которая сдвигает его и уменьшает, но лишь по истечении 6 секунд. Мы вернемся к данной анимации позже. Стрелка также будет позиционирована абсолютно, и к ней будет задано фоновое изображение: .sp-arrow {background: transparent url(../images/arrow.png) no-repeat top left;position: absolute;top: 50%;margin-top: -77px;left: 82%;width: 198px;height: 155px;animation: slideIn 0.6s ease-in-out 6s backwards;z-index: 100;} Сторонний элемент будет содержать поле ввода e-mail, и мы разместим его в правой части экрана: .sp-side {width: 460px;height: 300px;position: absolute;right: 10px;top: 25%;animation: slideIn 0.6s ease-in-out 6s backwards;} Стрелка и сторонний элемент будет выезжать, но мы вернемся к этому позже. Давайте оформим заголовок: .sp-side h2 {font-size: 70px;padding: 20px 0px;text-align: center;color: #fff;text-transform: uppercase;text-shadow: 1px 1px 2px rgba(0,0,0,0.2);font-family: 'Unlock', Arial, sans-serif;} …а также оболочку для формы ввода и кнопки: .sp-input {background-color: rgba(255,255,255,0.3);height: 30px;padding: 20px;border-radius: 10px;margin: 0 auto;width: 260px;}.sp-input input[type="text"] {width: 210px;padding: 6px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;float: left;font-family: 'Cookie', serif;font-size: 18px;}.sp-input input[type="text"]:focus {outline-color: #acdacf;}.sp-input a {float: left;background-color: #418e7b;color: #fff;width: 30px;height: 30px;border: none;border-radius: 50%;margin-left: 5px;text-align: center;line-height: 30px;cursor: pointer;font-family: 'Unlock', Arial, sans-serif;}.sp-input a:hover {background-color: #fff;color: #418e7b;} Теперь давайте обратимся к наполнению основной области контента. Для начала мы оформим заголовок, которому будет задана анимация, за счет которой он будет появляться сзади, а затем исчезать: .sp-content h1:first-child {font-size: 100px;text-align: center;color: #fff;text-transform: uppercase;text-shadow: 1px 1px 2px rgba(0,0,0,0.2);line-height: 80px;padding: 30px 0px 20px 0px;font-family: 'Unlock', Arial, sans-serif;animation:fromBack 1.2s ease-in-out 1.5s backwards,fadeOut 0.5s linear 4.5s forwards;} Второй заголовок будет появляться чуть позже, после того как первый исчезнет: .sp-content h1.sp-title {font-size: 90px;line-height: 80px;position: absolute;top: 50px;left: 160px;width: 470px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.3);padding-top: 155px;height: 305px;text-transform: uppercase;text-align: center;color: #518f7e;text-shadow: 1px 1px 1px rgba(255,255,255,0.9);font-family: 'Unlock', Arial, sans-serif;animation: fadeInColor 1.2s linear 5.2s backwards;}.sp-content h1:last-child em {font-family: 'Cookie', serif;text-transform: none;} Подзаголовок, как и первый H1, будет появляться, а затем исчезать: .sp-content h2 {font-size: 36px;text-align: center;color: #518f7e;font-family: 'Cookie', serif;text-shadow: 1px 1px 1px rgba(255,255,255,0.9);opacity: 0;animation:fromBack 0.6s ease-in-out 2.6s backwards,fadeOut 0.5s linear 4.5s backwards;} Теперь давайте оформим ячейки для миниатюр: .sp-content-row {width: 466px;height: 300px;float: left;}.sp-side-row {width: 150px;float: left;}.sp-row img {display: block;z-index: 1000;position: relative;} Каждый из span’ов для миниатюр буде также появляться за счет увеличения в размере от значения 0 до 1, что создаст впечатление, будто они «приезжают» изнутри экрана. Далее нам нужно, чтобы они исчезли: .sp-row span {position: relative;float: left;margin: 2px;z-index: 100;transform: scale(1);opacity: 0;animation:fromBack 0.4s linear backwards,fadeOut 0.3s linear backwards;} Нам нужно создать цикл, где каждая последующая миниатюра появляется и исчезает с задержкой. Мы берем каждую ячейку, и указываем задержку для каждого дочернего span-элемента. Учтите, что 4-я ячейка находится в правой части страницы, так что мы можем следовать ходу часовой стрелки: .sp-row:nth-child(1) span:nth-child(1) {animation-delay: 0s, 5s;}.sp-row:nth-child(1) span:nth-child(2) {animation-delay: 0.1s, 5.1s;}.sp-row:nth-child(1) span:nth-child(3) {animation-delay: 0.2s, 5.2s;}.sp-row:nth-child(1) span:nth-child(4) {animation-delay: 0.3s, 5.3s;}.sp-row:nth-child(1) span:nth-child(5) {animation-delay: 0.4s, 5.4s;}.sp-row:nth-child(4) span:nth-child(1) {animation-delay: 0.5s, 5.5s;}.sp-row:nth-child(4) span:nth-child(2) {animation-delay: 0.6s, 5.6s;}.sp-row:nth-child(5) span:nth-child(5) {animation-delay: 0.7s, 5.7s;}.sp-row:nth-child(5) span:nth-child(4) {animation-delay: 0.8s, 5.8s;}.sp-row:nth-child(5) span:nth-child(3) {animation-delay: 0.9s, 5.9s;}.sp-row:nth-child(5) span:nth-child(2) {animation-delay: 1s, 6s;}.sp-row:nth-child(5) span:nth-child(1) {animation-delay: 1.1s, 6.1s;}.sp-row:nth-child(2) span:nth-child(2) {animation-delay: 1.2s, 6.2s;}.sp-row:nth-child(2) span:nth-child(1) {animation-delay: 1.3s, 6.3s;} Давайте сделаем небольшой псевдо элемент с окружностью на фоне для украшения миниатюр: .sp-row span:before {content: '';position: absolute;background-color: rgba(255,255,255,0.3);width: 100px;height: 100px;top: 50%;left: 50%;margin: -50px 0 0 -50px;border-radius: 50%;} Теперь давайте перейдем к анимации. Первая анимация просто отвечает за исчезновение элемента, и регулируется за счет значений уровня плотности отображения от 1 до 0: @keyframes fadeOut{0%{opacity: 1;}100%{opacity: 0;}} fadeInColor будет отвечать за появление элемента, и позволит нам задавать параметр цвета и прозрачности RGBa. Но уровень плотности отображения RGBa будет достигать лишь 0, когда уровень плотности отображения самого элемента будет достигать отметки в 0,5. Это позволит нам отобразить сначала контент, а затем «явить» фон. Перейдем ко второму заголовку: @keyframes fadeInColor{0%{opacity: 0;background-color: rgba(255,255,255,0);}50%{opacity: 0.5;background-color: rgba(255,255,255,0);}100%{opacity: 1;background-color: rgba(255,255,255,0.3);}} Следующая анимация отвечает за скольжение элемента из левой части экрана: @keyframes slideIn{0%{opacity: 0;transform: translateX(-200px);}100%{opacity: 1;transform: translateX(0px);}} sizeDownMove уменьшит элемент и сместит его с позиции left 100px к left 0px. Здесь мы также можем применить translate, но, так как наш элемент позиционирован абсолютно, мы можем «играть» лишь по левой стороне: @keyframes sizeDownMove{0%{transform: scale(1);left: 100px;}100%{transform: scale(0.6);left: 0px;}} Следующая анимация отвечает за появление элемента из внутренней части видимой области за счет изменения значения с 0 до 1. Уровень плотности отображения также меняется с 0 на 1: @keyframes fromBack{0%{transform: scale(0);opacity: 0;}100%{transform: scale(1);opacity: 1;}} И на этом мы завершили всю анимацию в первом примере! Теперь давайте перейдем к следующим интересным примерам. Они будут полегче! Пример 2  Как насчет страницы-заставки, на которой мы отобразим содержательные заголовки в красивой анимации? В данном примере мы просто отобразим предложения одно за другим, которые будут оформлены красивым эффектом размытия. Верстка Здесь у нас снова будет контейнер и div с контентом, в котором будет размещено несколько кадров – каждый для отдельного предложения. Вдобавок у нас будет глобус и ссылка, которые появятся лишь в самом конце: It's destroying the planetIt's mass, mechanized murderYou can stop itNow!Save the planet.Love life.Go vegan.Join us!Давайте перейдем к стилизации. CSS-код Каждый заголовок будет центрирован, и все они будут сменяться один за другим посредством анимации blurFadeInOut: .sp-container h2 {position: absolute;top: 50%;line-height: 100px;height: 100px;margin-top: -50px;font-size: 100px;width: 100%;text-align: center;color: transparent;animation: blurFadeInOut 3s ease-in backwards;} Давайте укажем задержку для каждого заголовка: .sp-container h2.frame-1 {animation-delay: 0s;}.sp-container h2.frame-2 {animation-delay: 3s;}.sp-container h2.frame-3 {animation-delay: 6s;}.sp-container h2.frame-4 {font-size: 200px;animation-delay: 9s;} У последнего кадра не будет анимации, но вместо этого мы анимируем span-элементы: .sp-container h2.frame-5 {animation: none;color: transparent;text-shadow: 0px 0px 1px #fff;}.sp-container h2.frame-5 span {animation: blurFadeIn 3s ease-in 12s backwards;color: transparent;text-shadow: 0px 0px 1px #fff;}.sp-container h2.frame-5 span:nth-child(2) {animation-delay: 13s;}.sp-container h2.frame-5 span:nth-child(3) {animation-delay: 14s;} Элемент с глобусом будет позиционирован абсолютно, и ему будет задано фоновое изображение. Он появится после по истечении 14 секунд с момента завершения остальной анимации. Размеры его будут такими, чтобы она занял всю область контента: .sp-globe {position: absolute;width: 282px;height: 273px;left: 50%;top: 50%;margin: -137px 0 0 -141px;background: transparent url(../images/globe.png) no-repeat top left;animation: fadeInBack 3.6s linear 14s backwards;opacity: 0.3;transform: scale(5);} Ссылка «join us» («присоединяйтесь») будет реализована в виде окружности, которая, вращаясь, появится: .sp-circle-link {position: absolute;left: 50%;bottom: 100px;margin-left: -50px;text-align: center;line-height: 100px;width: 100px;height: 100px;background: #fff;color: #3f1616;font-size: 25px;border-radius: 50%;animation: fadeInRotate 1s linear 16s backwards;transform: scale(1) rotate(0deg);}.sp-circle-link:hover {background: #85373b;color: #fff;} А теперь давайте перейдем к разделу с анимацией: Первая анимация предназначена для всех заголовков, которые должны появиться и исчезнуть. Мы имитируем эффект размытия за счет параметров text-shadow и scale: @keyframes blurFadeInOut{0%{opacity: 0;text-shadow: 0px 0px 40px #fff;transform: scale(1.3);}20%,75%{opacity: 1;text-shadow: 0px 0px 1px #fff;transform: scale(1);}100%{opacity: 0;text-shadow: 0px 0px 50px #fff;transform: scale(0);}} Следующая анимация почти такая же, только нам не нужно, чтобы текст исчезал (это нужно для последнего заголовка, который остается): @keyframes blurFadeIn{0%{opacity: 0;text-shadow: 0px 0px 40px #fff;transform: scale(1.3);}50%{opacity: 0.5;text-shadow: 0px 0px 10px #fff;transform: scale(1.1);}100%{opacity: 1;text-shadow: 0px 0px 1px #fff;transform: scale(1);}} Глобусу будет задана та же анимация, которая масштабирует элемент, и сначала повышает, а затем понижает уровень плотности отображения: @keyframes fadeInBack{0%{opacity: 0;transform: scale(0);}50%{opacity: 0.4;transform: scale(2);}100%{opacity: 0.2;transform: scale(5);}} Следующая анимация нужна для ссылки. Она сделает так, что ссылка появится, при этом вращаясь: @keyframes fadeInRotate{0%{opacity: 0;transform: scale(0) rotate(360deg);}100%{opacity: 1;transform: scale(1) rotate(0deg);}} Пример 3  В третьем примере мы поэкспериментируем с передвижением текста для предложения продукции или приложения. В конце анимации посетители будут наблюдать элемент, призывающий к действию. Верстка Здесь у нас снова имеется 2 контейнера, и 2 оболочки. Наша цель – разделить область и обыграть тексты обеих сторон: What if you wouldn't getspamanymore?Wouldn't that be absolutelygreat!?Yeah, it would!A great way to get rid of spam!Sign up now!Давайте перейдем к стилизации. CSS-код Сначала нам нужно анимировать область контента, в которой есть псевдо элемент, представляющий собой линию в середине. Мы «откроем» его и произведем увеличение линии. Затем нам нужно отобразить текст по левую сторону путем его последовательного движения от правой стороны. Затем то же самое происходит и с правой стороны, только текст должен выдвигаться от левой стороны. Span’ы с классом «sp-mid» будут иметь увеличенный размер шрифта, и это именно те элементы, которые должны остаться, когда остальные элементы исчезнут. Два увеличенных текста мы сместим вверх и немного сдавим область контента. Другими словами, мы уменьшим её высоту, что немного «сожмет» линии в середине. После этого мы дополним страницу кнопкой подписки.  У контейнера будет фиксированная ширина и высота, а оболочка контента сначала появится в сопровождении заданной анимации, а затем уменьшится в размере за счет применения сжатия. Последнее действие будет реализовано только после того, как исчезнут остальные тексты – отсюда и получается длительная задержка анимации: .sp-container {width: 900px;height: 400px;position: relative;margin: 80px auto 0px auto;}.sp-content {width: 100%;height: 400px;position: relative;animation:open 0.4s linear forwards,squeeze 0.6s linear 5.5s forwards;} Линия в середине будет создана за счет псевдо элемента: .sp-content:after {content: '';width: 4px;background: #000;height: 100%;position: absolute;left: 50%;} Оболочки заголовков не будут отображать то, что окажется лишним, поэтому мы можем быть уверенными в том, что при скольжении не случится какого-либо наложения: .sp-wrap {width: 400px;padding: 0px 25px;height: 100%;text-align: right;font-size: 70px;line-height: 80px;float: left;position: relative;background: #ffdd00;overflow: hidden;} Элементы H2 со span’ами внутри будут оформлены следующими стилями: .sp-container h2 {color: #000;text-shadow: 0px 0px 1px rgba(0,0,0,0.9);}.sp-wrap span {display: block;background: #ffdd00;opacity: 0;}.sp-wrap span.sp-mid {opacity: 1;}.sp-container .sp-right h2 {color: #fff;text-shadow: 0px 0px 1px rgba(255,255,255,0.9);}.sp-wrap span.sp-mid {font-family: 'MisoBold';text-transform: uppercase;font-size: 160px;line-height: 130px;position: relative;} «sp-top» и «sp-bottom» будут скользить из правой части, а затем исчезать, а «sp-mid» будет скользить вверх вместо того чтобы исчезнуть: .sp-left span.sp-top {animation:slideLeft 0.5s ease-in 0.6s backwards,fadeOut 1s linear 4s backwards;}.sp-left span.sp-mid {animation:slideLeft 0.5s ease-in 1s backwards,moveUp 0.6s linear 5s forwards;}.sp-left span.sp-bottom {animation:slideLeft 0.5s ease-in 1.4s backwards,fadeOut 1s linear 4.2s backwards;} В правой части будет происходить то же самое, только в зеркальном порядке: .sp-right span {text-align: left;}.sp-right span.sp-top {animation:slideRight 0.5s ease-in 2s backwards,fadeOut 1s linear 4.4s backwards;}.sp-right span.sp-mid {animation:slideRight 0.5s ease-in 2.4s backwards,moveUp 0.6s linear 5s forwards;}.sp-right span.sp-bottom {animation:slideRight 0.5s ease-in 3.2s backwards,fadeOut 1s linear 4.6s backwards;} Знак вопроса будет расположен поверх восклицательного знака, и когда мы сдвинем два центральных span’а вверх, вопросительный знак исчезнет, оставив после себя восклицательный: .sp-wrap i {position: absolute;background: #ffdd00;width: 60px;}.sp-wrap i:first-child {color: #000;}.sp-wrap i:last-child {opacity: 0;animation: fadeOut 1s linear 6s backwards;} Появляющийся в самом конце текст будет обрамлен в оболочку sp-full, и мы сделаем так, чтобы он постепенно появлялся и «увеличивал» ссылку на подписку: .sp-full {position: absolute;font-size: 67px;top: 142px;width: 700px;left: 145px;animation: fadeIn 1s linear 6.6s backwards;}.sp-full a {background: #000;color: #fff;border-radius: 4px;padding: 10px 40px;display: inline-block;font-size: 40px;margin-top: 40px;animation: zoomIn 0.7s ease-in-out 7s backwards;}.sp-full h2 {width: 400px;padding: 0px 50px 0px 0px;float: left;text-align: right;}.sp-full a:hover {opacity: 0.8;} Теперь давайте перейдем к анимации: Первая анимация отвечает за «открытие» области контента. Это можно реализовать за счет увеличения её высоты: @keyframes open{0%{transform: scale(1,0);}100%{transform: scale(1,1);}} Анимация сжатия (squeeze) на самом деле ничего не сжимает, так как здесь мы не используем параметр масштабирования. Нам это не нужно, так как в момент применения данного эффекта у нас все еще есть немного текста внутри области контента. Так что, мы просто уменьшим его высоту: @keyframes squeeze{0%{height: 400px;}100%{height: 120px;}} Следующие две анимации отвечают за появление и исчезновение элементов: @keyframes fadeOut{0%{opacity: 1;}100%{opacity: 0;}}@keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}} slideLeft и slideRight перемещают элементы с одного места на другое: @keyframes slideLeft{0%{transform: translateX(120%);}100%{transform: translateX(0%);}}@keyframes slideRight{0%{transform: translateX(-120%);}100%{transform: translateX(0%);}} И moveUP перемещает элемент вверх: @keyframes moveUp{0%{transform: translateY(0px);}100%{transform: translateY(-170px);}} Последняя анимация просто «увеличивает» элемент за счет масштабирования от 0 до 1: @keyframes zoomIn{0%{transform: scale(0);}100%{transform: scale(1);}} И на этом всё! Надеемся, что вам понравились наши сегодняшние эксперименты, и вы найдете им применение в своих собственных проектах! Смотреть демо | Скачать архивом Внимание! У вас нет прав для просмотра скрытого текста. | |
|
| |
| Всего комментариев: 0 | |
