Генератор 3D книг на jQuery
В данном уроке мы сделаем плагин - генератор книг. Основная идея заключается в автоматической генерации интерфейса книги на основе текста (с картинками). Книга состоит из страниц, каждая страница состоит из 2 сторон (как в обычной книге), есть кнопки для перехода на следующую/предыдущую страницу, при переходе на другую страницу используется 3D эффект (на основе CSS3). Для эффекта используются трансформации CSS3 transform (rotate3d, preserve-3d и rotateY) вместе с эффектом перехода.
<div class="book"> <img src="/book.jpg" alt="JavaScript Programmer's Reference" style="display:block" /> <h2>JavaScript Programmer's Reference</h2> <h4>Cliff Wootton</h4> <h4>Wrox Press Ltd.</h4> <div>JavaScript Programmer's Reference</div> <h3>About the Author</h3> <div>Cliff Wootton lives in the south of England and works on multimedia systems and content management software for large data driven web sites. Currently he is developing interactive TV systems for BBC News Online in London ( http://www.bbc.co.uk/news ) and previously worked for other commercial broadcasters on their web sites. Before that he spent several years developing geophysical software and drawing maps with computers for oil companies.</div> <div>Cliff is married with three daughters and a growing collection of bass guitars.</div> <h3>Acknowledgements</h3> <div>It's hard to believe I've actually reached the stage of writing the introductory pages to this book. It's been a long process and I don't think I would have reached this point without the help of Tim Briggs at Wrox, who very gently urged me onwards and gave me encouragement when I needed it.</div> </div>
body { background: url('background.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /* CSS3 перспектива и трансформации */ -webkit-perspective: 1800px; -moz-perspective: 1800px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .book { left: 530px; position: absolute; top: 70px; width: 400px; /* CSS3 трансформация */ -webkit-transform: rotate3d(0, 0, 1, 0deg); -moz-transform: rotate3d(0, 0, 1, 0deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; } .page { background-color: #fff; position: absolute; /* CSS3 трансформация */ -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; } .side:first-child { background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent; background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent; border-left: 2px solid #000; height: 500px; overflow: hidden; padding: 30px 35px 80px 35px; position: absolute; width: 400px; /* CSS3 трансформация */ -webkit-transform: translate3d(0px, 0px, 0.5px); -moz-transform: translate3d(0px, 0px, 0.5px); } .side:last-child { background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent; background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent; border-right: 2px solid #000; height: 500px; overflow: hidden; padding: 30px 35px 80px 35px; position: absolute; width: 400px; /* CSS3 трансформация */ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } button { margin-top:10px; float:right; cursor:pointer; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #050505; padding: 10px 20px; background: -moz-linear-gradient( top, #fff 0%, #ebebeb 50%, #dbdbdb 50%, #b5b5b5); background: -webkit-gradient( linear, left top, left bottom, from(#fff), color-stop(0.50, #ebebeb), color-stop(0.50, #dbdbdb), to(#b5b5b5)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #949494; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.2), 0px 1px 0px rgba(255,255,255,1); }
Основной функционал реализуется кодом JavaScript.
/** * * 3D CSS3 генератор для книг на jQuery * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2012, Script Tutorials * http://www.script-tutorials.com/ */ // Переход на страницу function gotoPage(i) { $('.page').eq(i).removeClass('active'); if ((i-1) >= 0) { $('.page').eq(i-1).addClass('active'); } } // Весь код будет представлен плагином jQuery (function($){ $.fn.extend({ EbookTransformer: function(options) { var defaults = { height: 400 }; var options = $.extend(defaults, options); // Объект книги var objBook = $(this); // Внутренние переменные var vPages = new Array(); var vSides = new Array(); var vSubObj = new Array(); var iTmpHeight = 0; // Инициализация init = function() { // Проходим по всем объектам в книге и подготовливаем страницы (стороны) objBook.children().each(function(i){ if (iTmpHeight + this.clientHeight > options.height && vSubObj.length) { vSides.push(vSubObj); vSubObj = new Array(); iTmpHeight = 0; } iTmpHeight += this.clientHeight; vSubObj.push(this); }); if (iTmpHeight > 0) { vSides.push(vSubObj); } $(vSides).wrap('<div class="side"></div>'); // Готовим страницы (каждая станица имеет две стороны) var iPage = 1; var vCouples = Array(); objBook.children().each(function(i){ // Добавляем кнопки переход на страницы if (vCouples.length == 0) { $(this).append('<button onclick="gotoPage('+iPage+')">Следующая страница</button>'); } if (vCouples.length == 1) { $(this).append('<button onclick="gotoPage('+(iPage-1)+')">Предыдущая страница</button>'); } vCouples.push(this); if (vCouples.length == 2) { vPages.push(vCouples); vCouples = new Array(); iPage++; } }); if (vCouples.length == 1) { vCouples.push($('<div class="side"><h2>Конец</h2><button onclick="gotoPage('+(iPage-1)+')">Предыдущая страница</button></div>')[0]); vPages.push(vCouples); } $(vPages).wrap('<div class="page"></div>'); // Добавляем код CSS для страниц var sExtraCSS = ''; objBook.children().each(function(i){ //alert(i); // 0 .. 2 sExtraCSS += ''+ '.page:nth-child('+(i+1)+') {'+ '-moz-transform: translate3d(0px, 0px, -'+i+'px);'+ '-webkit-transform: translate3d(0px, 0px, -'+i+'px);'+ '}'+ '.active:nth-child('+(i+1)+') {'+ '-moz-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+ '-webkit-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+ '}'; }); $('.book').append('<style>'+sExtraCSS+'</style>'); }; // Инициализация init(); } }); })(jQuery); // Запуск плагина jQuery(window).load(function() { $('.book').EbookTransformer({height: 480}); });
Идея заключается в анализе входных данных (простого текста) и построении новой структуры HTML для 3D книги. На первом этапе мы проходим по всем внутренним элементам и конвертируем их в стороны страницы. Нужно проверять высоту внутренних элементов и при необходимости строить несколько сторон. На втором этапе мы составляем страницы. Каждая страница имеет две стороны. Также добавляем кнопки навигации. И в завершении для позиционирования страниц одна поверх другой используем дополнительные стили CSS. Для всех генерированных страниц устанавливаем свойство CSS3 translate3d.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/du5pBfqLXqs/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.