Codrops - отзывчивая функция Jmpress.js // Определение функции и метода

Question

Codrops - отзывчивая функция Jmpress.js // Определение функции и метода

0

Прежде всего, документы:

Сайт плагина: http://jmpressjs.github.io/jmpress.js/

Codrops статья: http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/

Демо-версия Codrops: http://tympanus.net/Tutorials/SlideshowJmpress/

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

Вопрос: Мне бы хотелось узнать, как это достигается (и, кстати, если я могу легко интегрировать его в Pixedelic Camera Plugin... это было бы просто плюсом)

Ребята выглядят, извините, если cuestion "редок". Я очень знаком с интерфейсом, но в будущем я пытаюсь ладить с jQuery и, вероятно, с AngularJS... В любом случае, это объясняет вопрос.

Пожалуйста, я знаю, что другой способ ладить с этим - это использовать запросы @media, но я считаю полезным и интересным то, как Jmpress.js справляется с этим.

заранее спасибо

Santiago Baigorria 06 окт. 2013, в 02:18

Источник

0

Он берет содержимое слайда, содержит его в div и применяет преобразования webkit ко всему слайду. Вы пытаетесь повторно разработать это решение или внедрить jmpress на своем WordPress-сайте? Или ваш вопрос - просто интерес к теории и обучению?
zyglobe 06 окт. 2013, в 02:54
0

О, круто! Так что это не решение jQuery, оно просто использует преобразования CSS3. Так что просто чтобы знать ... на самом деле, решение не очень обратно совместимо, верно? Вопрос для любопытства и изучения, как вы говорите, но я также хотел бы реализовать эти преобразования в плагине jQuery под названием Camera. Я на самом деле не знаю, что вызывает преобразования при изменении размера ... Мне нужно это понять. Большое спасибо!
Santiago Baigorria 06 окт. 2013, в 14:32

Теги:

jquery

css

1 ответ

Ещё вопросы

Он берет содержимое слайда, содержит его в div и применяет преобразования webkit ко всему слайду. Вы пытаетесь повторно разработать это решение или внедрить jmpress на своем WordPress-сайте? Или ваш вопрос - просто интерес к теории и обучению?
О, круто! Так что это не решение jQuery, оно просто использует преобразования CSS3. Так что просто чтобы знать ... на самом деле, решение не очень обратно совместимо, верно? Вопрос для любопытства и изучения, как вы говорите, но я также хотел бы реализовать эти преобразования в плагине jQuery под названием Camera. Я на самом деле не знаю, что вызывает преобразования при изменении размера ... Мне нужно это понять. Большое спасибо!

Santiago Baigorria · Accepted Answer · 2013-10-14T05-35-00.000Z

Решение, как отметил RedGlobe, является простым преобразованием CSS3.

Они применяются к полному контейнеру, и все просто масштабируется в процентах.

Я оставлю код CSS для масштабирования элементов:

.box_scale {
  -webkit-transform: scale(0.8);  /* Chrome, Safari 3.1+ */
     -moz-transform: scale(0.8);  /* Firefox 3.5+ */
      -ms-transform: scale(0.8);  /* IE 9 */
       -o-transform: scale(0.8);  /* Opera 10.50-12.00 */
          transform: scale(0.8);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

Для поддержки IE8 вы можете использовать Matrix Transforms. (подробнее здесь: http://peterned.home.xs4all.nl/matrices/)

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