Rolling DIV - CSS с JavaScript

Question

Rolling DIV - CSS с JavaScript

0

Я пытаюсь понять эффект катания, который имеет этот веб-сайт.

Я новичок в веб-разработке, я хотел бы знать, если это просто css или у него есть помощь от javascript/jQuery... Если да, кроме <div id="rotator"... каком файле javascript следует обратить внимание к?

Я говорю о эффекте качения, когда пользователь выбирает каждый пункт меню, START, O NAS, OFERTA и т.д....

user3033302 20 фев. 2014, в 02:36

Источник

1

Общий подход, который я бы использовал, - открыть инструменты dev в chrome с помощью F12 и выполнить поиск файлов CTRL+SHIFT+F для rotator строк. Вы увидите, что сайт использует комбинацию jQuery и CSS для достижения эффекта
roo2 20 фев. 2014, в 01:04

Теги:

javascript

jquery

css3

1 ответ

Ещё вопросы

Общий подход, который я бы использовал, - открыть инструменты dev в chrome с помощью F12 и выполнить поиск файлов CTRL+SHIFT+F для rotator строк. Вы увидите, что сайт использует комбинацию jQuery и CSS для достижения эффекта

Papa · Accepted Answer · 2014-02-19T22-20-00.000Z

Он использует анимацию CSS, изменяя положение фонового изображения содержащего div с использованием перехода. Само изображение имеет эту угловую линию.

.col-4-set > li .note {
-o-transition-property: background-position;
-o-transition-duration: 0.5s;
-ms-transition-property: background-position;
-ms-transition-duration: 0.5s;
-webkit-transition-property: background-position;
-webkit-transition-duration: 0.5s;
-moz-transition-property: background-position;
-moz-transition-duration: 0.5s;
transition-property: background-position;
transition-duration: 0.5s;
background: transparent url('images/box_hover.jpg') no-repeat -600px -600px;
position: absolute;
left: -1px;
top: -1px;
width: 184px;
height: 222px;
padding: 9px 18px;
}

Некоторые дополнительные сведения об ослаблении фоновых переходов:

http://css-tricks.com/almanac/properties/t/transition/