Объект раздвигается, толкает другие блоки по горизонтали и меняет положение — jQuery, CSS3

0
414
 3

code_with_me

Урок jQuery для продвинутых.

Открываем демо:  http://moodo.co/

Или здесь: project106.digiproduct.co.il

Внимание! Это коммерческий сайт, копировать и дублировать его ЗАПРЕЩЕНО!

Скроллим до блока с бейджиками — такие круглые этикетки а-ля парфюм (сайт про домашнюю ароматизацию через приложение). Кликаем на кругляшок.

Oh my God! It’s alive! Alive!!!

Тут у нас несколько задач, которые мы рассмотрим по отдельности.

  1. Если вы кликните на бейдж из правой колонки, вы увидите, что он (и ВЕСЬ ряд) сдвигается влево, активный бейдж встает на одну и ту же точку в веб-пространстве
  2. Разворот объекта по кругу вокруг своей оси — это язычки бейджиков;
  3. Вывод html-текста по окружности (html, jQuery).

Вы можете открыть инспектор (кликаем правой кнопкой мыши на объект в Хроме, выбираем последний пункт Inspect) и посмотреть в динамике, как это работает.

Я объясню здесь общий принцип работы, как подходить к решению подобной задачи.

Если у нас есть ряд свернутых объектов (это могут быть квадраты, прямоугольники и прочее), которые разворачиваются по горизонтали, то содержащий их контейнер должен быть в какой позиции?


.row_of_fragrancies {

position: absolute;

overflow: hidden;

width: 7777px;

}

b1

Весь ряд, который сдвигается целиком, должен быть absolute внутри relative. Relative у нас — синий блок.

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

overflow: hidden; — чтобы не появлялся горизонтальный скролл при заезде объекта за правую или левую границу экрана.

width: 7777px; — даем ширину с запасом, так как бейджи раскрываются и занимают больше ширины. Если не дать запас, то левый бейджик будет сталкивать правый вниз (как если бы они не влезали в одну корзину)…

Если это урок — то, что вам нужно — продолжайте чтение здесь! Не будем зря засорять МэйДэй ).

 3