Двери которые открываются анимация

Двери которые открываются анимация

Форум профессиональных мебельщиков PROMEBELclub > Программы для мебельщиков > Программы для конструирования и дизайна мебели > Система БАЗИС > Базис-мебельщик 8
БАЗИС 8. Анимация открывания дверей и выдвижения ящиков

Страница 1 из 10 1 2 3 4 5 > Последняя »

НЕ МОГУ МОЛЧАТЬ. (Л. Н. Толстой)
«А мужики-то не знают!» (А.Семчев. Из рекламы пива «Три толстяка».

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

Уже оказывается давно есть в Базисе одна фишка. Ее сделали, а в пресс-релизах обновлений забыли отметить. А она оч-ч-ч-ч-ень зрелищная и полезная.

Так вот! Есть у нас тумбочка с дверью и выдвижным ящиком. Выделяем дверь и ручку на ней. Петли не выделяем. Создать блок. В появившемся окне задания имени блока есть поле Тип блока (для модуля Салон). Я думал это заготовка на будущее для Салона8. Но установите тип Дверь левая (или правая). Автоматически появляется галочка в поле Блок для салона. Нажмите Ок.
Выделите все элементы входящие в ящик. Нажмите Создать блок. Тип блока укажите Ящик. Снимите выделение. Внешне ничего не изменилось. Станьте на ящик курсором и нажмите среднюю кнопку мыши (колесико). Ящик ВЫДВИГАЕТСЯ. Станьте на дверь и нажмите среднюю кнопку мыши. Дверь ОТКРЫВАЕТСЯ. Еще раз нажмите. Дверь ЗАКРЫВАЕТСЯ. Ящик ЗАДВИГАЕТСЯ. Есть анимация в Базисе.

Но и это еще не все!

Если выделить одну(!) панель, то по ее краям выделяются 8 точек. За них панель можно увеличивать/уменьшать и т.д. Если выделить такой блок для салона, например ящик, то появляется всего две точки. Если взять на виде слева, щелкнуть по правой точке и передвинуть ее вправо, то при щелкани по ящику средней кнопкой мыши он выдвинется от начальной к конечной точке. Т.е. можно делать ящики полного выдвижения и т.д. По сути эти две точки задают вектор, вдоль которого будет выдвигаться ящик и на какую длину. Этот вектор может быть направлен в пространстве как угодно. Ящик тогда будет выдвигаться по «дикому» направлению.
Для открывающейся двери то же есть две точки. Это ось, вдоль которой будет поворачиваться дверь. Если поиздеваться, то угловую радиусную дверь можно отрыть вверх или под углом 30 градусов к вертикали.

Читайте также:  Разобрать дверь саньенг кайрон

Двери купе тоже могут двигаться. Двери открываться влево (дверь левая), вправо (дверь правая), вверх (дверь подъемная), вниз (дверь откидная).

Источник

Пять интересных эффектов при наведении с использованием нескольких фоновых изображений

Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств hover и transition .

Ниже приведены пять различных примеров, которыми вы можете воспользоваться для создания собственных удивительных эффектов.

Что должно получиться

Посмотрим на то, что должно получиться в итоге. Подумайте, как можно реализовать эти эффекты чисто на одном CSS.

Множественные фоны (мультифон)

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

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

На самом деле можно придумать миллион различных примеров, но мы рассмотрим только пять, что бы понять суть эффекта.

Концепция

В основном, при наведении курсора на объекты происходит обычная анимация. Например, одно изображение перекрывает другое, что-то вращается или отскакивает, блекнет цвет и так далее.

При использовании мультифона появляется много вариантов анимации. Не прилагая больших усилий можно создать, на первый взгляд, сложную анимацию, используя только CSS-свойство transition , которое на данный момент подерживается браузерами лучше, чем свойство animate .

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

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

Читайте также:  Вмял дверь что делать

Анимация горизонтально открывающихся дверей

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

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

Базовая разметка

Создадим на странице блок div с классом circles . Этот класс так же применим к остальным примерам.

Все примеры будут располагаться на одной странице, поэтому я добавил стили для позиционирования элементов. Но самое важное, это применение свойства border-radius для создания формы круга.

Наши фоновые изображения будут располагаться в одном ряду, здесь они показаны уже с применением скругления.

Применяем мультифон

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

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

Порядок расположения логичен: первое изображение будет находится наверху, последнее будет находится внизу, то есть оно будет перекрываться всеми остальными изображениями.

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

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

Как вы могли заметить, я разделил окружность с деревом на две части, а машину оставил без изменений.

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

Анимируем изображения

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

Для этого, не забывая указывать префиксы для браузеров, зададим время анимации длительностью в 1 секунду. Затем благодаря свойству hover , переместим одну часть текстуры влево, а другую часть — вправо.

Вместе с этим, мы реализовали первый пример. При наведении мыши двери раскроются в разные стороны и мы увидим машину.

Читайте также:  Форестер sf5 как снять обшивку двери

Анимация вертикально открывающихся дверей

Теперь, когда мы рассмотрели первый пример, сделать этот будет легче. Здесь мы используем те же свойства transition и background-image . Изменим только положение частей текстуры. В этот раз при наведении они будут раскрываться вертикально.

Квадратное разъединение частей

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

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

Округлое разъединение частей

Немного сложнее будет повторить этот же эффект с округлым разъединением, так как во-первых, необходимо использовать прозрачное изображение, и во-вторых, нужно сделать так, чтобы они накладывались друг на друга в обозначенном месте. Здесь могут возникнуть проблемы из-за использования текстуры дерева. Но если использовать более простую текстуру с шумом, проблем быть не должно.

Поворот и разъединение

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

Это включает в себя несколько нюансов. Проблема заключается в том, что поворачивается все фоновые изображения, в том числе изображение машины под ними. Учитывая это, я заранее повернул машину в обратную сторону, чтобы при повороте она возвращалась в нужное положение.

Еще одна интересная вещь, это время, за которое происходит анимация. Обратите внимание, что для эффекта поворота и эффекта перемещения я указал разное время. Благодаря этому можно сделать невероятно большое количество примеров.

Дополнение от psywalker
Оригинал статьи был опубликован в ноябре 2011 г. Сообщение об отмене префиксов для многих CSS-свойств, включая transition и transform, в IE10 появилось после ее выхода. Поэтому мы оставили в статье авторский вариант кода, но для практических задач имейте в виду, что префикс -ms- для наиболее популярных свойств CSS3 — таких как transition,transform, animation, linear-gradient и т.п. — уже не нужен.

Источник

Поделиться с друзьями