Metro JS - интересный JavaScript плагин для создания живых плиток как в Windows 8

Metro JS - интересный JavaScript плагин для создания живых плиток как в Windows 8

Операционная система Windows 8, со своим появлением, принесла новый вид интерфейса в Metro стиле и живые плитки, подобный дизайнерский ход перешел и в веб. Metro JS - это JQuery плагин, при помощи него можно реализовать подобный дизайнерский ход на своем сайте.

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

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

$(".live-tile").liveTile({
    swap:'html,image',
    frontContent: ['some html content', 'i dont want random>'],
    frontIsRandom: false,
    frontImages: [
        {src: 'img1.gif', alt:'some images'},
        // note: you can also pass attr and css values directly for images
        { attr: { src:'img2.gif', alt:'i want random' } }
    ],
    imgSwap: { frontIsRandom: true }
});

Онлайн генератор позволяет выбрать размер плиток, цвет, а также отступ друг от друга. Сгенерированным текстом нужно будет заменить содержимое CSS файла плагина. Для редактирования плиток с помощью кода, всё же понадобится обладать некоторыми знаниями CSS.

Скачать:

Для загрузки файла необходима регистрация

 

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 1

  1. dark4dead Офлайн 1 февраля 2016 22:16
    У меня этот плагин давненько в закромах. Столько идей на счет его применения, но времени нет реализовать ((

Новые обсуждения на Форуме