Search the Community

Здравствуйте! Помогите, пожалуйста! Есть два блока (div): один с картинкой, а другой с текстом. Нужно реализовать: сначала блок с картинкой должен перекрывать блок с текстом, а потом блок с текстом должен перекрывать блок с картинкой. Для этого я делал в попытке реализации данного эффекта: .image { display: inline-block; Position: absolute; z-index: 1; } @Keyframes block_overlap { from { z-index: 0; } to { z-index: 2 } } .text { display: inline-block; position: absolute; animation-name: block_overlap; animation-duration: 1s; } Данный код не привёл к решению проблемы.

Особо не вдавался в подробности анимации, поэту прошу у вас. Нужно сделать так, чтобы буква при загрузки страницы, после 3с (ПРИМЕРНО) с центра экрана переместилась на 300px (ПРИМЕРНО) в любое из четырех направлений. P.S. Лишнего не пишите, и ссылки на темы не надо кидать.

Добрый день. Есть задача сделать анимацию как в примере по ссылке (видео на Youtube.com) - С подобным ни разу не сталкивался, но ужасно хочется понять, как это реализуется. Я не прошу готового решения, я лишь прошу чтоб меня направили в ту сторону, в которой можно в этом разобраться. Спасибо.

Здравствуйте. Прошу помочь в решении следующей задачи: Имеется родительский элемент со свойством clip-path и дочерний элемент с анимацией: Для примера: HTML <div id="logoimage-waves"> <div id="waves-animated"></div> </div> <svg> <clipPath id="WavesPolygon"> <polygon points="0 0,95 0,95 8,80 5,60 10,40 15,20 20"> </polygon> </clipPath> </svg> CSS #logoimage-waves { width: 100px; height: 100px; clip-path: url("#WavesPolygon"); -webkit-clip-path: polygon(0px 0px,95px 0px,95px 8px,80px 5px,60px 10px,40px 15px,20px 20px); position: absolute; } #waves-animated { width: 100px; height: 100px; position: absolute; background: url(/images/waves.png) no-repeat; animation: waves-animation 40s; } @keyframes waves-animation { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } Вопрос следующий: В Firefox всё работает как надо, дочерний анимированный элемент обрезается с помощью свойства clip-path родительского элемента. Но в других браузерах (проверял в Chrome 55 и Opera 41) обрезка не работает и элемент показывается полностью. Причём, что важно, это происходит только в том случае, если дочерний элемент анимирован с помощью свойства transform, а если анимируется другое свойство, например margin, то обрезка работает во всех браузерах. Короче говоря: дочерние элементы анимированные с помощью transform не обрезаются с помощью clip-path родительского элемента в Хроме и Опере. В общем задачка та еще. Второй день пытаюсь решить ) Благодарю за внимание!

Добрый день. Подскажите пожалуйста как правильно реализовать данное меню или список, не знаю как правильней назвать. Нужно чтобы при нажатии на город появлялся блок с информацией и загорался определенное место на карте. Если с появлением блока более менее понятно, то как позиционировать эти красные (активные) города, чтобы они не съезжали с карты на разных разрешениях. Буду благодарен ссылкам на демо и примеры. С меня кофе тому кто поможет мне найти хорошее решение =)

Добрый вечер , подскажите пожалуйста , как зациклить анимацию картинки , что бы она плавно увеличивалась и уменьшалась до тех пор пока не навести на неё курсор ? Есть такой код css <style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -o-transform:scale(0.9); -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; /opacity: 0.7;/ margin: 0 0px 0px 0; } .hovergallery img:hover{ -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); box-shadow:0px 0px 0px gray; -webkit-box-shadow:0px 0px 0px gray; -moz-box-shadow:0px 0px 0px gray; opacity: 1; } </style> Но он работает при наведении курсора - увеличивает , курсор убираем - уменьшает . Как сделать зацикленное плавное увеличение/уменьшение до наведении курсора на картинку ? Спасибо . Вот примерно как то так.webm

Доброго дня форумчане, ситуация такая- Есть сайт http://codex-themes.com/scalia/one-page/ где красиво реализована система смены слайдов. Как можно заметить, происход переход следующим образом : Элементы в слайде начинают анимацию свёртки -> происходит смена слайда -> происходит анимация развертки элементов нового слайда. Подскажите есть ли какие-нить уроки/статьи как такое сделать, и можете порекомендовать слайдер, где такое можно сделать через опции, ну хотя бы задержку перед переход на следующий слайд. Писать свой велосипед не хотелось бы, но видимо придется, если вы мне не поможете советом. Спасибо.

Здравствуйте! Пытаюсь создать анимацию на сайте с использованием SVG изображения экспортированного с Corel Draw. Я в интернете нашел пример https://css-tricks.com/svg-line-animation-works/ где идет обрисовка изображения при помощи animation в css но когда я заменяю коде изображения в теги path - вставляю код экспортированного с Corel - а изображения в формате SVG то эта анимация не работает. Подскажите как с Corel Draw изображения SVG сделать анимацию в HTML

Здравствуйте! Делаю сайт на базе этого шаблона. По сравнению с исходным шаблоном добавил в разметку доп меню с желтыми пунктами Профсоюз и т.д. Это подменю c селектором .headerrow .cell_pad .moduletable:nth-child(2) спозиционировал абсолютно относительно верхнего края родительского элемента div.cell_pad, для чего последнему пришлось дать position:relative; После это вся анимация опустилась на высоту внедрённого элемента с селектором .headerrow .cell_pad .moduletable:nth-child(2). Почему? Ведь в мануале написано, что position:absolute должен заставлять соседние элементы, а именно первый div.moduletable, вести себя так, как будто следующего за ним позиционированного элемента нет совсем. Начал менять свойства top у колеблющихся шаров и пчёл, уменьшая их на 200 px у всех. В итоге получилось поднять два правых шарика на нормальную высоту. Зато пчёлы и первый слева шар ведут себя не как в оригинале: пчелы в конце траектории скачут, как впрочем и левый шар. Почему происходят такие скачки? Как их исправить?

Доброго времени суток, делаю прелоадер для сайта: http://codepen.io/karakym/pen/QNdvBj Есть несколько нюансов которые хотел бы узнать у знатоков. 1. На данный момент анимация простая, поворот нескольких элементов в противоположные стороны, так вот по окончанию загрузки сайта нужно остановить анимацию таким способом, что бы она доехала сначала до конца (все элементы прокрутились в исходные позиции) и лишь только тогда прелоадер можно плавно скрывать. Пробовал animation: paused; но это не совсем то что нужно, ведь анимация остановиться в последнем положении при котором загрузилась страница (то есть не докрутиться до изначального положения. Думал сделать способом убирания Infinite после загрузки страницы отловить когда элементы будут в исходных позициях после чего уже их можно скрывать, но с jQuery я пока что на "ВЫ". 2. С самого начала нужно сделать первую анимацию которая поочередно бы выполнилась для каждого элемента на примере этой анимации, но вот тут появляется новый вопрос по поводу SVG, изначально логотип был создан в CorelDRAW далее я сохраняю его в *.ai формат (Имхо иллюстратор лучше справляется с качеством svg при сохранении), так вот мне никак не удается сделать каждую букву на логотипе отдельным элементом (верней отдельными элементами делаю их в CorelDRAW, вот только когда уже экспортирую код SVG в HTML страницу то там отображается только основные элементы, как бы вывести каждую букву в отдельный path чтоле!? Да бы я смог сделать анимацию для каждой буквы отдельно!?

Как сделать анимацию цикличной? Есть блок, который маячит, привлекает, но делает он это всего 1 раз. Как и можно ли с помощью всего лишь css придать ему цикличность с заданными пробелами (остановками). Пример: .info-box {background : #c2ddf9;border : #CD0000 solid 1px;color : #CD0000; font-weight : 700; animation: spin 0.050s linear 3s alternate;animation-iteration-count: 10;}@keyframes spin { 0% {transform: scale(1.05, 1.05);}100% {transform: scale(0.9, 0.9);}} Спасибо!

Доброго времени суток! Учусь делай сайты на Джумла, сейчас переделываю свой. Скачала шаблон, установила, мне все нравится. Только возникла небольшая проблема с анимацией. Вроде и понимаю что нужно дописать.. но не понимаю как и куда. При помощи Firebug нашла где что находится и почти сделала как нужно.. только вот анимацию не могу добавить. Установила для пользователей community builder и там другая форма входа была (не такая красивая). Верхняя форма - новая. Нижняя оригинальная. Мне нужно чтобы в новой форме при наведении тоже кнопочка меняла цвет на фиолетовый. Скрин В коде это выглядит так: та что не меняет цвет: body, select, input, textarea, button { font-family: "DroidSerifRegular";}button, input[type="button"], form.style input[type="submit"] { background-color: #f0f0f0; border-color: #d3d3d3; border-radius: 5px; border-style: solid; border-width: 1px; color: #68615d; padding: 7px;}select, input, textarea, button { font: 12px Arial,sans-serif;}button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer;}*::-moz-selection { background: none repeat scroll 0 0 #95add4; color: #fff;та что меняет цвет: form.box fieldset, form.style input, form.style textarea, form.style select, form.style button, form.style input[type="button"] { border-color: #d3d3d3;}form.style input, form.style textarea, form.style select, form.style button, form.style input[type="button"] { color: #68615d;}form.style button, form.style input[type="button"], form.style input[type="submit"] { background-color: #f0f0f0;}form.style input, form.style textarea, form.style select, form.style button { border-color: #ebebeb; border-radius: 5px; border-style: solid; border-width: 1px; padding: 7px;}body, select, input, textarea, button { font-family: "DroidSerifRegular";}button, input[type="button"], form.style input[type="submit"] { background-color: #f0f0f0; border-color: #d3d3d3; border-radius: 5px; border-style: solid; border-width: 1px; color: #68615d; padding: 7px;}select, input, textarea, button { font: 12px Arial,sans-serif;}button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer;}*::-moz-selection { background: none repeat scroll 0 0 #95add4; color: #fff;а это код самой анимации: form.style input,form.style select,form.style textarea,form.style button:hover,form.style input[type="button"]:hover,form.style input.button:hover,form.style #submit:hover {-webkit-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;-moz-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;-o-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;}в общем.. я что-то дико туплю и не понимаю куда чего надо добавить =(((((

Здравствуйте! Возникли проблемы с адаптацией данного эффекта http://codepen.io/Sonick/pen/HthaI Пытаюсь прикрепить этот эффект к отдельной section лендинга, а никак не получается. Похоже, что он работает только когда есть position:fixed. А мне нужно применить его по сути только к одному отдельному диву...Вот и вышла задача которую я никак не могу решить. Подскажите, пожалуйста, возможно кто-то сталкивался с подобной проблемой)))

Собственно все видно в примере. Нажимаем на кнопку "push" и зрим. http://jsbin.com/bujayufibobi/1/ Как избавится от этого дёрганья при начале анимации? Колонки конечно же не фиксированные и видимо это одна из проблем такого дерганья. Значит предполагаю, что надо заранее как-то считать ширину и куда-то ее передавать. Также, если использовать fadeIn, вместо show, то подобного дерганья не наблюдается. Откуда возникла проблема. Проблема возникла из-за того, что в одном из модулей DLE используется функция ShowOrHide() (эта функция идет вместе с DLE в одной из js библиотек) и я собственно думаю сейчас, как в этой библиотеке правильно заменить функции show() и hide() на те, которые дрожания анимации не вызывают. Или же не заменить, а дописать, если такая возможность имеется.

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

Здравствуйте! Подскажите, пожалуйста, как сделать чтобы на главной странице сайта в качестве фона была видеозапись со звуком и и т.д.? Как, например, на сайте http://www.questpistols.com/ Спасибо за помощь!

Есть пример: http://jsfiddle.net/WqZGF/ . Возможно ли сделать плавный раскрывание и закрывание на CSS без явного указания высоты и JavaScript?

Здравствуйте! Вот есть сайт - dollarforukraine.com, посмотрите, пожалуйста, как при открытии появляется заголовок, описание и кнопка, так вот, как сделать чтобы эти элементы не двигались сверху и снизу, а просто появлялись из прозрачного в нормальный. Т.е. при открытии/обновлении сайта как бы стояли на месте, но появлялись постепенно. Спасибо

Всем привет! Имеется вот такое вот меню. Хотелось бы сделать плавное наполнение заднего фона пунктов меню при наведении, но так, как задний фон сделан из "спрайта" выглядит фигово. Можно ли как-то сделать красивое, плавное наполнение (насыщение). http://jsfiddle.net/eW3YR/1/

Как можно сделать чтобы текст из iframe плавно исчезал? Ну или предложите другие способы анимации ))

Доброго времени суток. Возникла проблема при анимации переворота блоков, а если точнее - неправильное отображение перспективы. Суть проблемы словами описать сложновато, так что выкладываю код: http://jsbin.com/uGaFihE/4/edit?html,css,js,output и картинки, описывающие: 1) Перспективу такой, какая она есть сейчас: 2) И такой, какой должна быть в идеале (все внимание - на углы в центре изображения ): Как можно реализовать данную анимацию, не помещая эти два блока в один контейнер?