|
Анимация и эффекты загрузки страниц сайта
|
|
| Kosten | Пятница, 04 Мая 2018, 17:54 | Сообщение 16 |
| Экран загрузки призмы должен напоминать один из фона LinkedIn для фотографий. Загрузчик удаленно выглядит как созвездия, которые движутся в пространстве с основным элементом в середине, который потенциально может иметь корпоративный логотип. Погрузчик можно использовать для предприятий, работающих с международными клиентами.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 04 Мая 2018, 18:04 | Сообщение 17 |
|
| Разве этот предварительный загрузчик не должен напоминать одну из змеиных игр? Эта анимация значков энергии со штекером может иметь смысл для интернет-провайдеров или любых других агентств, которые помогают компаниям и клиентам сотрудничать.
Предзагрузчик анимации
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 04 Мая 2018, 18:09 | Сообщение 18 |
|
| Если владелец бизнеса не придирчивы к своему предзагрузчику и хотел бы сохранить его простым, вот простой, с расщепляющимся прямоугольником.
Простой загрузчик
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 04 Мая 2018, 18:19 | Сообщение 19 |
|
| Вот прелоадер, применимый к компаниям для путешествий и аренды транспорта. Экран загрузки изменяет тип транспортного средства, сопровождаемого текстом, чтобы улучшить общее впечатление.
Предварительная загрузка
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 04 Мая 2018, 18:26 | Сообщение 20 |
|
| Этот вилочный погрузчик с приводом от SVG является еще одним нетрадиционным решением для веб-сайтов, которые продают автомобили. Однако, если принять образно, предварительный загрузчик можно использовать для веб-сайтов или приложений, связанных с различными социальными событиями, которые приносят людям волнение и создают неизгладимое впечатление.
Автомобильный дрифтерный погрузчик
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 04 Мая 2018, 21:11 | Сообщение 21 |
|
| Приложения, в которых используются службы путешествий или местоположения, могут сделать загрузку более привлекательной, используя маленький красочный геофизик, который переворачивается вперед и назад.
HTML
Код <div class='loader loader1'> <div> <div> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> <div class='loader loader2'> <div> <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> <div class='loader loader3'> <div> <div> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> <div class='loader loader4'> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
SCSS
Код $grey: rgba(0, 0, 0, .5);
$blue: rgba(0, 0, 255, .5);
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate2 {
0% {
transform: rotate(0deg);
border-top-color: $grey;
}
50% {
transform: rotate(180deg);
border-top-color: $blue;
}
100% {
transform: rotate(360deg);
border-top-color: $grey;
}
}
* {
box-sizing: border-box;
}
body {
background: #f9f9f9;
padding-bottom: 100px;
}
h1, h3 {
display: block;
margin: 0px auto;
text-align: center;
font-family: 'Tahoma';
font-weight: lighter;
color: $grey;
letter-spacing: 1.5px;
}
h1 {
margin: 50px auto;
}
@mixin loaderDivMixin {
border-radius: 50%;
padding: 8px;
border: 2px solid transparent;
animation: rotate linear 3.5s infinite;
}
.loader {
position: relative;
margin: 75px auto;
width: 150px;
height: 150px;
display: block;
overflow: hidden;
div {
height: 100%;
}
}
/* loader 1 */
.loader1, .loader1 div {
@include loaderDivMixin;
border-top-color: $grey;
border-bottom-color: $blue;
}
/*loader 2 */
.loader2, .loader2 div {
@include loaderDivMixin;
border-top-color: $blue;
border-left-color: $grey;
border-right-color: $grey;
}
/*loader 3 */
.loader3, .loader3 div {
@include loaderDivMixin;
border-top-color: $grey;
border-left-color: $blue;
animation-timing-function: cubic-bezier(.55, .38, .21, .88);
animation-duration: 3s;
}
/* loader 4 */
.loader4, .loader4 div {
@include loaderDivMixin;
border-radius: 50%;
padding: 4px;
animation: rotate2 4s infinite linear;
}
div:hover {
animation-play-state: paused;
}
.loader, .loader * {
will-change: transform;
}
Демонстрация
| | Страна: (RU) |
| |
