Автор

09 12.2014
Анимированная подгрузка элементов страницы

Анимированная подгрузка элементов страницы


В данном уроке мы рассмотрим как создать интересный эффект, а именно анимированную подгрузку элементов страницы для сайта с помощью javascript. Данная прокрутка будет напоминать скроллинг от интернет-гиганта Google. В чем же заключается идея спросите Вы, идея состоит в том, что у нас на странице есть блоки, в которых есть тестовая информация, по желанию можно разместить и мультимедийную, при прокрутке которой происходит сдвижение блоков, кроме этого есть подсказки выделенные синим блоком, при наведении курсора они также будут разворачиваться.

 

ДЕМО
ИСХОДНИКИ

 

Такое оформление отлично подойдет для оформления постовой ленты сайта, это весьма необычно, или к комментариям, реализация такого эффекта достаточно широка. И так, давайте приступим.

 

Шаг 1. HTML

Мы будем использовать множество повторяющихся блоков, чтобы создать древо последовательных столбцов, которые будут прогружаться анимированно. У нас будут артикул, в котором будет включены классы и спаны для каждого элемента столбца:

<article class="module">
<div class="inside-module">
<div class="bar-full">
<span class="bar"></span>
<div class="bar-box">
<span class="bar-flip">Подсказка</span>
</div>
</div>
<div class="pad">
<p>Описание</p></div>
</div>

Класс bar-flipу нас будет отвечать за отображение подсказки, класс pad будет выводить сам текст в блоке. Остальные вызывают сам контейнер, окантовку, и анимацию для нашего элемента.

 

Шаг 2. CSS

Теперь нам необходимо все это стилизовать, как Вы заметили, у нас будет анимация, это мы реализуем с помощью стилей, установив уровень трансформации по оси координат и градусный наклон элементов.

.module {
float: left;
position: relative;
clear: both;
width: 100%;
margin-bottom: 15px;
display: block;
background: #fff;
box-shadow: 0 1px 6px rgba(0,0,0, 0.1);}
.inside-module {
display: block;
position: relative;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);}
article .bar-full {
float: left;
position: relative;
width: 100%;
height: 4px;
background: #f7f7f6;}
article .bar {
display: block;
width: 50px;
height: 4px;
position: absolute;
top: 0;
left: 0;
background: #769ff4;}
article .bar-box {
display: none;
position: absolute;
top: 4px;
width: 160px;
height: 30px;}
article .bar-box .bar-flip {
display: block;
position: absolute;
top: 0px;
width: 120px;
height: 30px;
padding: 0 20px;
background: #6589d4;
font-family: "Open Sans", Arial, sans-serif;
font-weight: 600;
color: #fff;
line-height: 30px;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(250px) rotateX(-90deg);
-moz-transform: perspective(250px) rotateX(-90deg);
-ms-transform: perspective(250px) rotateX(-90deg);
-o-transform: perspective(250px) rotateX(-90deg);
transform: perspective(250px) rotateX(-90deg);
-webkit-transition: 0.2s linear 0.2s;
-moz-transition: 0.2s linear 0.2s;
-ms-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;}
article:hover .bar-flip {
-webkit-transform: perspective(350px) rotateX(0deg);
-moz-transform: perspective(350px) rotateX(0deg);
-ms-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-moz-transition: 0.2s linear 0s;
-ms-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;}
.come-in .bar,
.already-visible .bar {
width: 160px;
-webkit-transition: width 0.35s ease-in;
-moz-transition: width 0.35s ease-in;
-ms-transition: width 0.35s ease-in;
-o-transition: width 0.35s ease-in;
transition: width 0.35s ease-in;}
.come-in .bar-box,
.already-visible .bar-box{
display: block;}
.module.come-in {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-animation: google 0.4s ease forwards;
-moz-animation: google 0.4s ease forwards;
-o-animation: google 0.4s ease forwards;
animation: google 0.4s ease forwards;}
.module,
.module.already-visible {
-webkit-transform: translateY(0px) perspective(200px) rotatex(0deg);
transform: translateY(0px) perspective(200px) rotatex(0deg);
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;}
@-webkit-keyframes google {
0% { -webkit-transform: translateY(100px) perspective(200px) rotatex(30deg);}
100% { -webkit-transform: translateY(0px) perspective(200px) rotatex(0deg);}
}
@-moz-keyframes google {
0% { -moz-transform: translateY(100px) perspective(200px) rotatex(30deg);}
100% { -moz-transform: translateY(0px) perspective(200px) rotatex(0deg);}
}
@-o-keyframes google {
0% { -o-transform: translateY(100px) perspective(200px) rotatex(30deg);}
100% { -o-transform: translateY(0px) perspective(200px) rotatex(0deg);}
}
@keyframes google {
0% {
-webkit-transform: translateY(100px) perspective(200px) rotatex(30deg); // Chrome Fix
transform: translateY(100px) perspective(200px) rotatex(30deg);}
100% {
-webkit-transform: translateY(0px) perspective(200px) rotatex(0deg); // Chrome Fix
transform: translateY(0px) perspective(200px) rotatex(0deg);}
}

Также мы устанавливаем анимацию для подсказки, и добавляем линию, которая будет немного заходить за подсказку придавая ей немного неординарности и подчеркивая интерфейс.

 

Шаг 3. JS

Теперь нам необходимо скрыть невидимый контент пока пользователь не начнет прокрутку страницы, при обновлении страницы, позиция просмотра будет запоминаться, и анимация будет срабатывать относительно вверх или вниз:

(function($) {
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
var win = $(window);
var allMods = $(".module");
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
});
var poz = $(window).scrollTop();
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});

Такой эффект станет отличным дополнением для Вашего сайта, надеюсь эффект Вам был интересен, не забываем поддерживать наш замечательный проект.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

19 04.2013
Анимированная подгрузка элементов страницы

В последнее время мы то и делаем, что рассказываем об адаптивности и ее важности в веб-дизайне, если вы читаете наши уроки то вам не следует напоминать, что это такое и для чего оно нужно. Но что делать, если у вас под рукой нет возможности проверить ваше творение на наличие ошибок в адаптивности. Для этого существуют специальные онлайн сервисы проверки сайта, макета, на его адаптивность. Такие сервисы стали появляется как грибы после дождя, а самое главное, что они бесплатные, что повышает к ним интерес.


22 03.2013
Анимированная подгрузка элементов страницы

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


28 06.2011
Анимированная подгрузка элементов страницы

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


27 04.2013
Анимированная подгрузка элементов страницы

Все пользователи хотят, чтобы из персональные данные были в безопасности, но что сделать, если сам пользователь, сознательно, при регистрации указывает легкий пароль, который легко подобрать, или он состоит из нескольких символов. Для безопасности сайта и данных пользователя это серьезное упущение, в данном случае необходимо предупредить посетителя о надежности пароля, и сделать это можно с помощью анимированной проверки сложности пароля при вводе пароля. В данном уроке мы рассмотрим как сделать именно такой индикатор.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close