Рубрика «slideshow»

В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.

JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.
Читать полностью »

imageУчитывая уровень развития современных технологий вещания и мобильных устройств, организаторы встреч и «презентаторы» во всех сферах бизнеса должны навсегда забыть о проекторе.
Читать полностью »

4-я .NETconf прошла 28 апреля 2012 и первый раз была в онлайн формате. Это позволило принять участие разработчикам, которые не могли прилететь на 3 предыдущие встречи. За время трансляции 7-ми выступлений в конференции приняли активное участие 508 человек.

Ниже выложены 6 докладов и один мастер-класс с видео, слайдами и ссылками на исходный код.

Читать полностью »

Введение

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

Как это работает

Принцип работы прост: в блок, совпадающий с размерами слайда засовываю блок «подлиннее», в который буду упаковывать изображения, выровненные по левой стороне(float:left), и у которого будет плавно меняться левый отступ(margin-left) благодаря jquery функции animate.

Читать полностью »