Використовуємо презентацію Google Docs на своєму сайті
Google Docs - онлайн інструмент, розроблений "корпорацією добра", містить сервіс, що рідко використовується - повноцінний додаток для створення презентацій. Як і все розроблене Google, презентації засновані на HTML5 і можуть вбудовуватись у будь-який веб-сайт. Вони також підтримують переходи та ефекти, які є звичайним явищем у Powerpoint, але все реалізовано на CSS3. Такі характеристики перетворюють презентації Google Docs на чудовий інструмент для представлення продукту!
Підготовка
Ось що потрібно зробити:
Виводимо презентацію
Залишилось лише показати презентацію людям, які відвідують нашу сторінку. Будемо використовувати скрипт лайтбоксу. У демонстрації застосовується fancybox2.
Після завантаження плагіна потрібно включити файли стилів і скрипта в HTML код. Потім додаємо посилання, яке запускатиме лайтбокс:
Посилання має id та два класи. Перший клас вказує плагіну fancybox використовувати iframe. Другий клас визначає стиль кнопки (стилі можна переглянути у файлі assets/css/styles.css). Атрибут href вказує на URL, яку ми скопіювали раніше.
Ініціалізація плагіна fancybox:
Тут передаються опції плагіну fancybox і запускається подія click для виведення після завантаження. Готово! Потужність HTML5 використовується для виведення презентації, а на вашому сайті залишається вільний простір.
Цей урок підготовлений для вас командою сайту ruseller.com Джерело уроку: tutorialzine.com/2012/10/use-a-google-docs-presentation-as-a-product-tour/ Переклав: Сергій Фастунов Урок створено: 11 Лютого 2013 Переглядів: 30699 Правила передруку
5 останніх уроків рубрики "Для сайту"
Ефекти блочного розкриття
Сьогодні ми хотіли бподілитися декількома ідеями щодо ефекту блочного розкриття, яку ви можете використовувати для своїх проектів.
Якщо ви хочете суттєво підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки вберегтися від цілого ряду атак хакерів, але і організувати перенапрямки, а також вирішити завдання пов'язані з кешем.
20 безкоштовних тем для WordPress у стилі Material Design
Material Design - це тренд, що набирає обертів від Google. У цій збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.
20 сайтів з креативним ефектом MouseOver
Ефекти на те й існують, щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.
Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб-дизайнерів за минулий місяць.