Недавно нашел в интернете одну замечательную программу для создания фотоальбомов. Причем не просто фотоальбомов, а Flash-альбомов, в которых присутствует Такой альбом можно выложить на Youtube в формате swf и на свой сайт, как html-страницу, можно создать из него файл-exe и т. д... Да что говорить, смотрите что получилось у меня, за каких-то 20 минут!
Просто нажмите на картинку для просмотра:
Flip Album - программа, которая модифицирует обычные фотографии в отличные flash-альбомы + эффект перелистывания страниц! Теперь Вы можете создавать замечательные онлайн-фотоальбомы из коллекции своих фото и изображений.
Так как программа на "ноу-рашине" представляю небольшое руководство к действию:
1. Запустив программу нажимаем "Background" (фон), выбираем "Select from Background..." - если будем использовать встроенный фон программы.
Если есть свой фон, выбираем "Select from your computer" .И вставляем свое фото.
2. Нажимаем "Photo" и добавляем нужную нам фотографию. Ее можно растягивать, уменьшать и поворачивать.
3. Нажав на "Mask" выбираем какой-нибудь из эффектов обрамления.
4. Кликнув "Text" можно добавить подпись к фото, поставив галочку "Shadow" добавляем тень к тексту
Получаем первую готовую страницу.
5. Таким-же образом добавляем столько страниц, сколько нам надо. Далее нажимаем на "Publish"
6. Попадаем в новое окно, под надписью "Templates" выбираем шаблон, в настройках (Options) можно поменять качество фотографий и т. д. Далее нажимаем "Convert To Flipping Book"
7. В окне конвертации выбираем формат выходного файла, например EXE . Выбираем папку сохранения, название файла и нажимаем "Convert"
Вот в принципе и все...
Разработчик: Flip PDF Studio
Платформа: Windows XP/ Vista/ 7
Язык интерфейса: English
Размер файла: 17,05 MB
Многие сайты используют подобные jQuery-плагины для предоставления каталогов продукции, продающих брошюр и так далее, и все это не просто так. jQuery-решения, позволяющие вам листать блоки контента, предлагают вам пользователям очень удобный способ ознакомиться с тем, что вы готовы предложить им. Если все сделать правильно, но такие электронные брошюры будут работать не хуже настоящих напечатанных, которые можно держать в руках. При помощи специальных плагинов, вы можете позволить посетителям вашего сайта без труда перелистывать страницы и чувствовать, будто они читают настоящую книгу.
Использование jQuery-плагинов с эффектом перелистывания позволит вам представлять содержимое вашего сайта в более привлекательной манере. Перед тем, как выбрать подходящее вам решение, вам следует получить некоторый технический навык. Некоторые плагины до сих пор основываются на Flash, и поэтому они не позволяет пользователям осуществлять поиск материала соответствующим образом и, к тому же, они не будут работать на iOS-устройствах. Это отрицательно сказывается на seo-оптимизации, а также приведет к тому, что пользователи просто не найдут интересующую их информацию. Плагины перелистывания на базе jQuery позволяют вам избежать всех этих проблем. Чтобы помочь вам найти подходящий скрипт, сегодня мы решили предложить вам подборку одних из лучших jQuery-плагинов для реализации эффекта перелистывания.
Эта подборка состоит из более, чем 20 jQuery-плагинов соответствующего предназначения, которые позволят вам реализовать механизм перелистывания страниц. У каждого представленного плагина есть свои уникальные свойства, поэтому мы предлагаем вам ознакомиться со всеми по очереди. После чего, хотелось бы, чтобы вы высказали свое мнение о выбранном вами плагине, чтобы помочь другим читателям избежать рутинных поисков. Заранее предупреждаем, что часть предоставленных решений являются платными.
Данный плагин создает галерею изображению в виде журнала. Вы можете перелистывать страницы книги, чтобы просматривать предыдущие или следующие изображения, просто перетягивая анимированные углы, отображаемые при наведении курсора на галерею.
Booklet представляет собой jQuery-инструмент для отображения контента на перелистываемых страницах. Он был разработан на базе библиотеки jQuery. Распространяется он под лицензионным соглашением MIT и GPL.
jPageFlip представляет собой jQuery-плагин для имитации процесса перелистывания страниц. Чтобы использовать jPageFlip, вам придется внедрить файл jQuery.js. jPageFlip хорошо поддается настройке. В последующие версии планируется добавить больше опций настроек. jPageFlip на данный момент базируется на основе «canvas», который поддерживается только в Firefox, Chrome, Opera и Safari (причем, в свежих версиях).
Flippy представляет собой jQuery-плагин для создания кросс-браузерного эффекта перелистывания страниц, который позволяет вам «перелистывать» любой HTML-элемент, какой только захочется.
Плагин imBookFlip умеет подгружать книгу в iframe, либо прямо на странице. Страницы книги можно переключить на ручное перелистывание, включить автоматическое перелистывание сразу после того, как страница будет загружена, либо установить функцию включения перелистывания после того, как будет произведен клик по обложке. Вы также без труда сможете добавить звук при помощи Sound Manager.
Flip – это jQuery-плагин, который без труда сможет перелистывать элементы на ваших страницах в 4-х направлениях.
FlipPage представляет собой jQuery-плагин, который создает имитацию перелистывания страниц будто в книге.
Изначально плагин был разработан для проведения презентаций, он также нашел свое место в таком устройстве как электронная книга. Этот плагин был разработан таким образом, чтобы использовать мощь графического аппаратного оснащения для воспроизведения плавных анимаций на HTML5/CSS3.
Слайдер способен менять изображения из портфолио, перелистывая их тогда, когда пользователь кликает по элементам управления. То есть, когда пользователь кликает по изображению, оно начинает вращаться на 360 градусов, и по окончании анимации пользователь видит новое изображение.
Turn.js – это javascript-библиотека, которая превратит ваш контент в почти настоящую книгу или журнал со всеми преимуществами HTML5. Интернет сильно преобразился с появлением интерфейсов, основанных на HTML5. turn.js идеально подойдет для публикации журналов, книг или каталогов на базе HTML5.
Этот плагин создает эффект перелистывания страницы поверх или внутри отображенных изображений, и это напоминает 2D-графику.
С каждым днем jQuery становится все более популярной ввиду удобства, гибкости и скорости. Такая анимация в стиле блокнота идеально подойдет для презентации информации на сайте.
BookBlock представляет собой jQuery-плагин, который можно использовать для создания компонентов в стиле буклетов, которые дадут вам возможность реализовать навигацию с перелистыванием страниц. Здесь можно использовать любой контент, будь то изображения или текст. Плагин трансформирует структуру только при необходимости (например, при перелистывании страницы), и использует наложения в виде теней для страниц, что придает ощущение реалистичности.
FlipBook способен собирать несколько изображений, а затем анимировать их. Каждое изображение отображается на короткий промежуток времени, а затем заменяется другим изображением по списку. Анимация начинается тогда, когда первое изображение полностью загружено, а изображения, которые еще не загрузились с сервера, просто пропускаются. Они включаются в анимацию только после того, как будут полностью загружены браузером.
Metro JS представляет собой javascript-плагин для jQuery, разработанный для того, чтобы у вас была возможность создавать интерфейсы в стиле Metro. Данный релиз сосредоточен вокруг Live Tiles, Application Bar и Theming. На данный момент он находится на ранней стадии разработки, но все функции должны работать на IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera и Safari(OSX/iOS).
Антикварные вещи и стилизованные под старину предметы всегда вызывают интерес. Поэтому виртуальный альбом в стиле ретро это не только отличный шанс привлечь к фотографиям внимание, но и беспроигрышный способ выделиться на YouTube, Вконтакте и других интернет-площадках. Сделать такой проект можно «ФотоШОУ PRO»:
Понравилось слайд-шоу? В статье мы детально остановимся на всех этапах создания такого ролика в редакторе «ФотоШОУ PRO». Вооружившись базовыми правилами, вы создадите подобное из своих снимков буквально за полчаса.
Секреты создания эффектной заставки
Хотите, чтобы слайд-шоу увлекало зрителей с самых первых секунд? В таком случае особое внимание уделите заставке. Например, в начале фотоальбом может лежать на столе, а затем плавно открываться. Добиться такого эффекта достаточно просто.
Шаг 1. Выберите фон для слайда. В идеале он должен ассоциироваться со стариной. Это может быть коллаж из винтажных снимков, замысловатый ретро-узор или любое другое подходящее изображение. Если фон кажется вам скучным, оживите его при помощи эффектов из коллекции программы: добавьте снежинки, листья или нотную азбуку. Настраивайте количество и размер задействованных элементов по своему усмотрению.
Шаг 2. Добавьте обложку. Настройте её размер и положение в начале показа, затем переходите к разработке анимации. В одноименной вкладке добавим четыре ключевых кадра и настроим их:
- первые два ключевых кадра остаются без изменений;
- на третьем кадре увеличиваем масштаб обложки и выравниваем ее по центру;
- в четвертом ключевом кадре добавляем 3D-поворот влево на 180 градусов.
Шаг 3. Загрузите подложку альбома и фотографию. Важно проследить за тем, чтобы обложка и подложка (задняя обложка и страница в данном случе - один слой) имели одинаковый размер и находились чуть ли не вплотную друг к другу. С фото проще: вы можете поместить его на любое место и даже «вклеить в альбом» сразу несколько снимков. При желании добавьте декор: уголки, узоры и прочие элементы, которые сочтете уместными.
Для этих слоев настройте одинаковую анимацию. В первой и второй точках они будут полностью невидимыми. Этого можно добиться, поставив в графе «Прозрачность» 0. Третий ключевой кадр расположите рядом со вторым и выставите в качестве прозрачности 100%. Отрегулируйте время показа слоев так, чтобы они появлялись после открытия обложки.
Шаг 4. Настройте приближение слайда. Воспользуйтесь функцией «Управление камерой». Принцип работы с инструментом прост: вам нужно добавить ключевые кадры и подобрать параметры для них. Пусть камера начинает движение только после полного открытия обложки: первый и второй ключевые кадры мы не изменяем. В третьей ключевой точке добавляем плавное приближение.
При необходимости вы можете подписывать фотографии. Для этого вновь щелкните по кнопке «Добавить слой» и выберите тип текста - в ФотоШОУ PRO можно реализовать любые и надписей.
Как создать страницы альбома
Сохраните все настройки в редакторе слайда и вернитесь в основное рабочее меню программы. Настало время создать другие листы с фотографиями.
Шаг 1. Дублируйте первый слайд. Для этого правой кнопкой мыши кликните по нему и выберите «Правка» > «Дублировать слайд».
Отредактируйте его:
- удалите анимацию обложки. Для первого ключевого кадра задайте поворот на 180 градусов. Так альбом будет уже открыт в начале показа этого слайда на экране.
- поменяйте фотографию и клипарт (при желании). Уберите всю настроенную анимацию для них.
- скорректируйте настройки 3D-камеры. Выставите для первого ключевого кадра приближение, которое было прописано у третьего. Остальные отметки на таймлинии удалите.
Шаг 2. Сохраните внесенные изменения. Создайте столько копий слайда, сколько фотографий хотите добавить. Замените снимки на новые через редактор.
Шаг 3. Добавьте анимацию перелистывания страниц. Откройте раздел «Переходы». Подходящие варианты анимации вы найдете в группе «3D-переходы». Выделите пресет щелчком мыши и кликните по кнопке «Применить ко всем».
При желании в последнем слайде вы можете добавить эффект «закрывающейся обложки». Для этого в редакторе слайда для соответствующего слоя в графе «3D-поворот налево» пропишите 0.
Вы значительно улучшите слайд-шоу, если встроите в него подходящую музыку: трек можно подобрать в коллекции программы или загрузить с компьютера.
Теперь вы знаете, как создать эффектный ретро альбом, который надолго запомнят ваши близкие и друзья. Установите ФотоШОУ PRO и начните работу над ним уже сегодня! Готовый видеоальбом можно сохранить на компьютере, записать на диск или подготовить к загрузке в интернет.
CSS3 анимация перелистывания страниц
В буржунете я подсмотрел технику перелистывания страниц реализованную на CSS3. Очень эффектно! На основе этой техники я решил сделать свой пример демонстрацию такой CSS3 книги с анимацией перелистывания страниц.
В основе этой техники лежат такие CSS3 свойства как transform
и transition
а так же нестандартное использование тега input
с флажком (checkbox). Реализация получилась кривенькая, потому как браузеры ещё полноценно не поддерживают самые эффектные CSS3 свойства в прямом виде. Но, благодаря , мы можем этими свойствами попробовать воспользоваться уже сейчас.
Получилось эффектно, радует то что возможно в скором будущем браузеры начнут понимать новые стандарты CSS3 и вебмастера смело смогут реализовывать подобную красоту на своих сайтах, стало возможно листать страницы на CSS3.
Пример лучше всего смотреть браузером Mozilla Firefox
последней версии - работает всё без проблем. В Safari и Chrome пример работает, но уже со скрипом. Opera при анимации сжирает процессор, поэтому на слабых компьютерах пример просто не потянет. IE - это IE ради прикола можно и им посмотреть.
Смотрим браузером Mozilla Firefox
- не портим впечатление!
Сodrops — это самый лучший блог по веб дизайну. На нём всегда можно найти много самых креативных вещей для веб дизайнера. Огромным плюсом является то, что ещё и рассказывают как прикрепить или сделать тот или иной эффект. Он очень популярен за рубежом, но почему то не столь сильно в русском интернете. В общем очень полезный сайт для дизайнера, там можно получить кучу вдохновения и много чему научиться, так как там действительно продвинутые CSS уроки.
Сегодня я Вам хочу представить 15 классных уроков с этого чудо сайта. Всё «фишки» совершенно бесплатны и Вы их с лёгкостью сможете скачать. Ну а сейчас давайте подробнее.
Так же Вам будут интересно вот это:
Динамическая сетка с красивой анимацией
Это отличное решение для расположения Ваших блоков на сайте, так же эту сетку можно с лёгкостью использовать для изображений. Сделана эта сетка на чистом CSS.
Как сделать классные эффекты для картинок при наведении на CSS
В этом уроке рассказано как сделать супер эффекты при наведении на изображении. В примере есть целых 7 совершенно разных примеров, а так же инструкция, как сделать данное чудо на CSS.
Отличные кнопки с красивым эффектом на CSS
Множество примеров CSS кнопок с замечательным эффектом при наведении, эти кнопки по желанию можно изменить под Ваш вкус.
Как сделать пианино
Отличный урок, в котором рассказывается как сделать для сайта самое настоящее электронное пианино.
Красивый эффект при наведении для иконок
В этом уроке есть 9 примеров, которые имеют разные стили при наведении на иконки, смотрится всё очень стильно и современно. Например эти эффекты Вы можете свободно использовать для иконок социальных закладок на сайте.
Эффектное перелистывание для блока
Тут Вы узнаете как сделать с помощью CSS эффектное перелистывание для блока. Так же присутствует целых совершенно разных 5 примеров.
Крутые примеры использования CSS анимации
Здесь 4 примера, которые подробно показывают на что способна CSS анимация.
Необычная форма поиска
Например я такого ещё не видел, например, Вы хотите поесть в ресторане, соответственно Вы ищете желаемый ресторан в Гугле, вписываю в поле поиска желаемое место. А теперь посмотрите как это можно реализовать на много креативней и удобней.
Как показать разные изображения для разных устройств
Тут Вы узнаете как реализовать показ разных картинок, в зависимости от того на каком устройстве просматривают Ваш ресурс.
Делаем адаптивное меню с поддержкой Ретина дисплеев
Отличный урок, в котором Вы узнаете как сделать красивое и адаптивное меню на CSS с поддержкой Ретина экранов.
Несколько CSS эффектов перелистывания для страниц
Красивые эффекты, с помощью которых можно реализовать полноэкранное перелистывание страниц
