Времето не стои неподвижно и с него прогресът. Това се отрази и на интернет. Вече можете да видите промяната външен видсайтове, особено популярни адаптивен дизайн. И в резултат на това много нови отзивчиви плъзгачи на jquery, галерии, въртележки или подобни добавки.
1. Отзивчив плъзгач за хоризонтални публикации

Отзивчива хоризонтална въртележка с подробна инструкциячрез монтаж. Направен е в семпъл стил, но можете да го стилизирате за себе си.

2. Плъзгач на Glide.js

Този слайдер е подходящ за всеки сайт. Използва Glide.js с отворен код. Цветовете на плъзгача могат лесно да се променят.

3. Слайдшоу с наклонено съдържание

Плъзгач за адаптивно съдържание. Акцентът на този плъзгач е 3D ефектът на изображенията, както и различни произволни анимации.

4. Плъзгач с помощта на HTML5 платно

Много красив и впечатляващ слайдер с интерактивни частици. Направено с HTML5 платно

5. Плъзгач за преобразуване на изображението

Плъзгач с морфинг ефект (плавна трансформация от един обект в друг). AT този примерслайдерът е много подходящ за портфолиото на уеб разработчик или уеб студио под формата на портфолио.

6. Кръгъл плъзгач

Плъзгач под формата на кръг с ефект на обръщане на изображението.

7. Плъзгач за замъглен фон

Отзивчив плъзгач с превключване и замъгляване на фона.

8. Отзивчив моден плъзгач

Опростен, лек и отзивчив плъзгач на уебсайт.

9. Slicebox - плъзгач за 3D изображения на jQuery(АКТУАЛИЗИРАН)

Актуализирана версия на слайдера Slicebox с корекции и нови функции.

10. Безплатна решетка с анимирано адаптивно изображение

Добавка jQuery за създаване на гъвкава решетка с изображения, която ще превключва снимки с помощта на различни анимации и времена. Това може да изглежда добре като фон или декоративен елемент на сайта, тъй като можем да зададем селективния външен вид на новите изображения и техните преходи. Плъгинът е направен в няколко версии.

11.Гъвкав плъзгач

Универсален безплатен плъгин за вашия уеб сайт. Този плъгин се предлага в множество опции за плъзгач и въртележка.

12. Фоторамка

Фоторамае универсален плъгин. Има много настройки, всичко работи бързо и лесно, има възможност за преглед на слайдове на цял екран. Плъзгачът може да се използва както във фиксиран размер, така и в адаптивен, с и без миниатюри, с и без кръгово превъртане и много други.

P.S.Слайдера го слагам няколко пъти и смятам, че е един от най-добрите

13. Безплатен и чувствителен 3D плъзгач за галерия с миниатюри.

Експериментална галерия с плъзгачи 3DPanelLayoutс мрежа и интересни ефектианимации.

14. Плъзгач на css3

Отзивчив слайдер, направен с помощта на css3, с плавен външен вид на съдържанието и лека анимация.

15. WOW плъзгач

WOW плъзгаче плъзгач за изображения с невероятни визуални ефекти.

17.Еластичен

Еластичен плъзгач с пълна реакция и миниатюри на слайдове.

18. Прорез

Това е отзивчив плъзгач на цял екран, използващ css3 анимация. Плъзгачът се изработва в два варианта. Анимацията е направена доста необичайно и красиво.

19. Отзивчива фотогалерия плюс

Проста безплатна плъзгаща се галерия с качване на изображения.

20. Отзивчив слайдер за WordPress

Отзивчив безплатен слайдер за WP.

21. Плъзгач за съдържание на паралакс

Плъзгач с паралакс ефект и управление на всеки елемент с използвайки CSS 3.

22. Плъзгач с музикална подвързия

Плъзгач с отворен програмен код JPlayer. Този слайдер прилича на презентация с музика.

23. Плъзгач с jmpress.js

Отзивчивият плъзгач е базиран на jmpress.js и следователно ще позволи някои интересни 3D ефекти да бъдат приложени към слайдовете.

24. Слайдшоу с бързо насочване

слайд шоу с бързо превключванеслайдове. Превключвател за слайдове при задържане.

25. Image Accordion с CSS3

Акордеон на изображение с css3.

26. Приставка за галерия, оптимизирана за докосване

Това е адаптивна галерия, която е оптимизирана за сензорни устройства.

27. 3D галерия

3D стенна галерия- създаден за браузъра Safari, където ще се вижда 3D ефекта. Когато се гледа в друг браузър, функционалността ще бъде наред, но 3D ефектът няма да се вижда.

28. Плъзгач с пагинация

Отзивчив плъзгач за страниране с плъзгач за jQuery UI. идеята е да се използва проста концепция за навигация. Възможно е да превъртите всички изображения назад или да превключвате между слайдове.

29. Монтаж на изображение с jQuery

Автоматично подреждане на изображенията в зависимост от ширината на екрана. Много полезно нещо при разработването на уебсайт за портфолио.

30. 3D галерия

Прост 3D кръгъл плъзгач в css3 и jQuery.

31. Режим на цял екранс 3D ефект върху css3 и jQuery

Плъзгач с възможност за преглед на изображения на цял екран с красив преход.

Компетентно съставена и визуално проектирана, в нашия случай това е отделна страница, тя е важен елемент от личен уебсайт или блог, на всеки специалист, който е достигнал определено ниво на умения в своята професионална дейност.
Страницата с портфолио е вид отчет или визуално резюме, с помощта на което можете ясно да демонстрирате на читателите и посетителите на сайта / блога набор от най-успешните завършени творби, независимо дали става дума за снимки, статии, публикации , дизайнерски елементи и др.
Аз нямам такава страница и от моя страна това е жалък пропуск, който трябва да бъде коригиран възможно най-скоро, спрямо това, което всъщност е в този моменти работя.
В огромните пространства на глобалната мрежа можете да намерите огромен брой готови шаблонистраници за организация на портфолио, а разнообразието от такива страници е наистина впечатляващо. Така че, който се интересува от всички тънкости на уеб дизайна и разработката, винаги ще може да намери подходящ вариант за себе си. Е, за тези, които страдат от знания в изграждането на уебсайтове, предлагам да анализирам пример за адаптивно оформление, проста страница с портфолио, с филтриране на завършена работа по категория, направена върху, разредена с атрактивен ефект на преход, с анимационни елементи.

Оформлението на страницата, изпълним javascript и някои дизайнерски елементи, предаде "на планината", прекрасен уеб дизайнер и разработчик Kevin Liew (queness.com). При избора на оптималното решение за мен беше важно това да е лекотата на изпълнение, функционалността на плъгина jQuery, правилната работа във всички съвременни браузъри и предвид все по-нарастващата популярност на използването на различни мобилни устройства за сърфиране в интернет, адаптивността на дизайна на бъдещата страница. Без претенциозни, дизайнерски звънци и тежки добавки.

Основното оформление се състои от два основни елемента потребителски интерфейсТези, които трябва да изградим, са навигациите с раздели за филтриране на категориите на изпратената работа и самата мрежа с миниатюри с ефект на изскачащ надпис при задържане.
Като за начало, за да може всичко в крайна сметка да работи, jQuery ще изисква поне версия 1.7.0. Ако все още не сте го свързали, добавете следния ред преди етикета :

Стартирайте плъгина MixItUp, поставете този код след горните файлове:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , ефекти: [ "fade" ] , облекчаване : "snap" , // извикване на ефекта на курсора onMixEnd: filterList. hoverEffect() ) ) ;), hoverEffect: функция () ( $("#portfoliolist .portfolio" ) . hover( функция () ( $(this) . find(".label" ) .stop() .animate(( bottom: 0 ) , 200 , "easeOutQuad" ) ; $(this) .find("img" ) .stop() .animate(( top: - 30 ) , 500 , "easeOutQuad" ) ; ) , функция () ( $(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this) .find("img" ) .stop() .animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList.init() ; ) ) ;

Няма смисъл да разглеждате всички опции на плъгина поотделно, по подразбиране е най-добрият вариант. Е, ако някой се подлага на експерименти с параметри, моля, всичко е във вашата власт.

За да оформите оформлението на страницата и външния вид на елементите, свържете няколко файла към документа . , един за основните стилове, нека го наречем layout.css и друг малък CSS файл normalize.css , за по-добра последователност на браузъра в стандартен дизайнелементи:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Сега ще анализираме всичко по ред, по възможност без излишна вода, достъпно и разбираемо, на нашия роден, многострадален език.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >всичко < li>< span class = "filter" data- filter= "app" >Приложения < li>< span class = "filter" data- filter= "card" >визитки < li>< span class = "filter" data- filter= "icon" >Икони < li>< span class = "filter" data- filter= "logo" >Лого < li>< span class = "filter" data- filter= "web" >уеб дизайн

  • всичко
  • Приложения
  • визитки
  • Икони
  • Лого
  • уеб дизайн

На навигационния панел поставяме целия списък с произведения, разделени на категории. Трябва да свържем всяка категория портфолио чрез атрибута data-cat с един или друг елемент от навигационната лента в съответствие със стойността в атрибута data-filter. Чрез съпоставяне на стойностите на филтъра за данни с data-cat, елементите на портфолиото ще бъдат филтрирани по категория.
В допълнение, към миниатюрата, скрита за момента, ще добавим малък панел с името на произведението и заглавието на категорията, който изскача само когато задържите курсора на мишката върху изображението. И за да улесним формирането на външния вид на цялата тази структура в CSS, ще напишем съответните класове на елементите:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Хостинг Beget. Ru < span class = "text-category" >Лого < div class = "label-bg" > .........

.........

Моля, имайте предвид, че можете да добавите връзки към картината или директно към подписа, така че потребителят да може да види цялата ви работа изцяло.

css

Сега, тихо лудостно, нека преминем към най-интересната част, към формирането в CSS на общите стилове на потребителския интерфейс на нашата страница с портфолио и нейната адаптивна версия. В статията ще посоча само основните (по подразбиране) стойности, тоест без никакви фонови снимкии свързани шрифтове, всичко това, който има нужда от него, може да се види в демото или да се намери в изходния архив.

.container (позиция: относителна; ширина: 960px; поле: 0 автоматично; /* Ще можете да видите веригата за навигация, когато прозорецът на браузъра бъде преоразмерен */-webkit-transition: всички 1s лекота; -moz-преход: всички 1s лекота; -o-преход: всички 1s лекота; преход: всички 1s лекота; ) #filters ( margin : 1% ; padding : 0 ; list-style : none ; ) #filters li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; цвят : #666 ; /* добавя малко сянка към текста */текстова сянка: 1px 1px #FFFFFF; курсор: показалец; ) /* промяна на фона на категорията при задържане */#filters li span: hover (фон: #34B7CD; текстова сянка: 0 0 2px #004B7D; цвят: #fff;) /* фон на елемент от активна категория */#filters li span.active (фон: rgb (62, 151, 221); текстова сянка: 0 0 2px #004B7D; цвят: #fff;) #portfoliolist.portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width: 23%; margin: 1%; display: none; float: ляво; overflow: hidden;) .portfolio-wrapper ( препълване : скрито ; позиция : относителна !important ; фон : #666 ; курсор : показалец ; ) .portfolio img (максимална ширина : 100% ; позиция : относителна ; ) /* надписите са скрити по подразбиране */.portfolio .label (позиция: абсолютна; ширина: 100%; височина: 40px; дъно: -40px;) %; позиция: абсолютна; горе: 0; ляво: 0;) .portfolio .label-text (цвят: #fff ; позиция: относителна; z-индекс: 500; подложка: 5px 8px;) дисплей: блок; размер на шрифта: 9px ;)

Контейнер (позиция: относителна; ширина: 960px; margin: 0 auto; /* Ще можете да видите веригата на прехода, когато прозорецът на браузъра бъде преоразмерен */ -webkit-transition: all 1s ease; -moz-transition: all 1s лекота; -o- преход: всички 1s лекота; преход: всички 1s лекота; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* добавяне на сянка към текста */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) /* промяна на фона на категорията при задържане */ #filters li span:hover ( фон: #34B7CD; текстова сянка: 0 0 2px #004B7D; цвят:#fff; ) /* фон на елемент от активна категория */ #filters li span.active ( фон: rgb(62, 151, 221); текстова сянка: 0 0 2px #004B7D; цвят:#fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border- кутия; -o-box- оразмеряване: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .po rtfolio-wrapper ( препълване: скрит; позиция: относителна !важна; фон: #666; курсор:показател; ) .portfolio img ( max-width:100%; position: relative; ) /* етикетите са скрити по подразбиране */ .portfolio .label ( position: absolute; width: 100%; height:40px; bottom:-40px; ) . портфолио .label-bg (фон: rgb(62, 151, 221); ширина: 100%; височина:100%; позиция: абсолютна; горе:0; ляво:0; ) .портфолио .етикет-текст ( цвят: # fff; позиция: относителна; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

Във втората част, точно в същия стилов лист, с помощта на няколко медийни заявки, ще създадем алтернативни CSS секции. За да може оформлението на нашата страница да се показва правилно на екраните на различни мобилни устройства, ние ще добавим алтернативни CSS правила за различни екрани към тези секции. По този начин ние лесно отменяме всички правила, зададени преди това в нашия CSS таблицаза обикновени браузъри и постигане на така желаната адаптивност.

/* Таблет */ Екран само за @media и (мин. ширина: 768px) и (максимална ширина: 959px) (.container (ширина: 768px;)) /* Мобилен - Забележка: Дизайн за 320px ширина*/@media only екран и (максимална ширина: 767px) (.container (ширина: 95%;) #portfoliolist .portfolio (ширина: 48%; марж: 1%;)) /* Мобилен - Забележка: Дизайн за ширина 480px */Екран само за @media и (мин. ширина: 480px) и (максимална ширина: 767px) (.container (ширина: 70%;))

/* Таблет */ Екран само за @media и (мин. ширина: 768px) и (максимална ширина: 959px) ( .container (ширина: 768px; ) ) /* Мобилен - Забележка: Дизайн за ширина от 320px*/ само за @media екран и (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Мобилен - Забележка: Проектиран за 480px ширина */ @media само екран и (мин. ширина: 480px) и (максимална ширина: 767px) ( .container (ширина: 70%; ) )

Това е всичко. Нашата прекрасна страница под обширното име „Портфолио“ е готова, остава само да я напълните с вашите не по-малко прекрасни и изключителни творби и да я поставите на показ за целия свят. Все още можете тихо, скромно да се гордеете със себе си. Основното нещо е да не прекалявате по този въпрос.
Вижте примера отново и, ако е необходимо, вземете изходния код, в свободното си време, в тиха домашна среда, можете да доведете тази работа до съвършенство.

При създаването на урока са използвани материали: . Оригиналната, девствена, току-що излязла от перото на автора страница с портфолио, се намира там.

Успех на всички и с полза за тялото, изкарайте остатъка от краткото лято!

В момента плъзгачът с въртележка е функционалност, която е просто необходима на бизнес уебсайт, уебсайт за портфолио или всеки друг ресурс. Заедно с плъзгачите за изображение на цял екран, хоризонталните плъзгачи с въртележка се вписват добре във всеки уеб дизайн.

Понякога плъзгачът трябва да заема една трета от страницата на сайта. Тук плъзгачът на въртележката се използва с ефекти на преход и с адаптивни оформления. Сайтовете за електронна търговия използват плъзгач с въртележка, за да покажат множество снимки в отделни публикации или страници. Кодът на плъзгача е безплатен за използване и промяна според вашите нужди.

Използвайки jQuery във връзка с HTML5 и CSS3, можете да направите страниците си по-интересни с уникални ефекти и да привлечете вниманието на посетителите към конкретна област на сайта.

Slick - модерен плъгин за плъзгач на въртележка

Slick е безплатен jQuery плъгин, чиито разработчици твърдят, че тяхното решение ще задоволи всичките ви изисквания за плъзгач. Responsive slider - въртележката може да работи в режим "плочка" за мобилни устройства и в режим "плъзгане и пускане" за десктоп версията.

Той съдържа ефект на избледняване на прехода, интересна функция "режим в центъра", мързеливо зареждане на изображения с автоматично превъртане. Актуализираната функционалност включва добавяне на слайдове и филтър за слайдове. Всичко за вас, за да персонализирате плъгина според вашите изисквания.

Демо режим | Изтегли

Owl Carousel 2.0 - jQuery плъгин за сензорни устройства

Този плъгин има голям набор от функции, подходящи както за начинаещи, така и за опитни разработчици. то актуализирана версияплъзгач - въртележка. Предшественикът му имаше същото име.

Плъзгачът има някои вградени добавки за подобряване на цялостната функционалност. Анимация, възпроизвеждане на видео, автоматично пускане на плъзгача, лениво зареждане, автоматично регулиране на височината - основните характеристики на Owl Carousel 2.0.

Плъзнете поддръжка и пуснетевключени за повече удобна употребаплъгин включен мобилни устройства.
Плъгинът е идеален за показване на големи изображения дори на малки екрани на мобилни устройства.

Примери | Изтегли

jQuery Silver Track плъгин

Доста малък, но богат jquery плъгин, който ви позволява да поставите плъзгач на въртележка на страницата, който има малко ядро ​​и не консумира много ресурси на сайта. Плъгинът може да се използва за показване на вертикални и хоризонтални плъзгачи, с анимация и създаване на набори от изображения от галерията.

Примери | Изтегли

AnoSlide - Ултра компактен, отзивчив jQuery слайдер

Ултра компактен jQuery плъзгач- въртележка, чиято функционалност е много повече от тази на конвенционален слайдер. Тя включва предварителен прегледединично изображение, показващо множество изображения във въртележка и плъзгач въз основа на заглавия.

Примери | Изтегли

Owl Carousel - jquery slider - carousel

Бухалска въртележка - плъзгач с опора сензорни екрании технология за плъзгане и пускане, лесно вградена в HTML код. Плъгинът е един от най-добрите слайдери, които ви позволяват да създавате красиви въртележки без специално подготвено маркиране.

Примери | Изтегли

3D галерия - въртележка

Използва 3D преходи въз основа на CSS стилове и малко Javascript код.

Примери | Изтегли

3D въртележка с помощта на TweenMax.js и jQuery

Страхотна 3D въртележка. Изглежда, че все още е бета версия, защото току-що открих няколко проблема с нея. Ако се интересувате от тестване и създаване на свои собствени слайдери, тази въртележка ще ви бъде от голяма полза.

Примери | Изтегли

Въртележка с помощта на bootstrap

Отзивчив плъзгач с въртележка, използващ технология за стартиране, точно за вашия нов уебсайт.

Примери | Изтегли

Плъзгач, базиран на Bootstrap - Moving Box carousel

Най-търсени в портфолио и бизнес уебсайтове. Подобен тип плъзгач - въртележка често се среща на сайтове от всякакъв тип.

Примери | Изтегли

Малък кръгъл плъзгач

Този плъзгач с малък размер е готов за работа на устройства с всяка разделителна способност на екрана. Плъзгачът може да работи както в кръгов, така и в режим на въртележка. Малък кръг е представен като алтернатива на други плъзгачи от този тип. Има вградена поддръжка операционна система IOS и Android.

В кръгъл режим плъзгачът изглежда доста интересно. Поддръжката на метода плъзгане и пускане и системата за автоматично превъртане на слайдове са добре внедрени.

Примери | Изтегли

Плъзгач за съдържание на Thumbelina

Мощен, адаптивен плъзгач тип въртележка е идеален за модерен сайт. Работи коректно на всяко устройство. Има хоризонтален и вертикален режим. Размерът му е минимизиран до само 1 KB. Ултракомпактният плъгин има отлични плавни преходи.

Примери | Изтегли

уау плъзгач въртележка

Съдържа над 50 ефекта, които могат да ви помогнат да създадете оригинален слайдер за вашия сайт.

Примери | Изтегли

Отзивчив плъзгач за съдържание на jQuery bxSlider

Преоразмерете прозореца на браузъра, за да видите как се адаптира плъзгачът. Bxslider се предлага с над 50 опции за персонализиране и демонстрира функциите си с различни ефекти на преход.

Примери | Изтегли

jCarousel

jCarousel е jQuery плъгин, който ще ви помогне да организирате изгледите на вашите изображения. Ще можете лесно да създавате потребителски карусели с изображения от рамката, показана в примера. Плъзгачът е отзивчив и оптимизиран за мобилни платформи.

Примери | Изтегли

ScrollBox - jQuery плъгин

Scrollbox е компактен плъгин за създаване на плъзгач - въртележка или текуща текстова линия. Основните характеристики включват ефект на вертикално и хоризонтално превъртане с пауза при задържане на мишката.

Примери | Изтегли

dbpasCarousel

Обикновен плъзгач с въртележка. Ако имате нужда от бърз плъгин, този е 100% подходящ. Предлага се само с основните функции, необходими за работата на слайдера.

Примери | Изтегли

Flexisel: Адаптивен JQuery Carousel Slider Plugin

Създателите на Flexisel се вдъхновиха от старата школа jCarousel плъгин, като направиха негово копие, което е фокусирано върху правилната работа на слайдера на мобилни и таблетни устройства.

Отзивчивото оформление на Flexisel, когато работи на мобилни устройства, се различава от оформлението, ориентирано към размера на прозореца на браузъра. Flexisel е перфектно адаптиран за работа на екрани, както с ниска, така и с висока резолюция.

Примери | Изтегли

Elastislide - Отзивчив плъзгач с въртележка

Elastislide се адаптира перфектно към размера на екрана на устройството. Можете да зададете минималния брой изображения, които да се показват при определена резолюция. Работи добре като плъзгач с въртележка с галерии с изображения, използвайки фиксирана обвивка заедно с ефект на вертикално превъртане.

Пример | Изтегли

Flex Slider 2

Безплатен плъзгач от Woothemes. Той с право се смята за един от най-добре реагиращите плъзгачи. Плъгинът съдържа няколко шаблона и ще бъде полезен както за начинаещи потребители, така и за експерти.

Пример | Изтегли

Невероятна въртележка

Amazing Carousel е отзивчив слайдер за изображения на jQuery. Поддържа много системи за управление на съдържание като WordPress, Drupal и Joomla. Той също така поддържа Android и IOS и настолни версии на операционни системи без никакви проблеми със съвместимостта. Вградените невероятни шаблони за въртележка ви позволяват да използвате плъзгача във вертикален, хоризонтален и кръгов режим.

Примери | Изтегли

В този урок ще напишем красиво портфолио с помощта на jQuery, CSS3 и приставката Timeline. Timeline е jquery плъгин, който е специализиран в показването на времева линия от събития. В това портфолио можете да вградите различни видовемедийни данни: туитове, видеоклипове, карти, снимки, записи и след това ги подредете според датата. Ако работите върху дизайна, ще получите красиво портфолио, което ще отразява вашите интереси и работа.

HTML

По подразбиране приставката Timeline съдържа светла цветова схема. Това е много удобно и необходимо в повечето случаи. Въпреки че за нашето портфолио тъмният дизайн е по-елегантен. Затова го оптимизираме по начина, по който ни харесва.

Първо, нека да разгледаме основното HTML маркиране на страницата:

индекс.html

Времева линия Портфолио | Демонстрация на Tutorialzine

В секцията head имаме стиловете на плъгина - timeline.css и styles.css - които ще съдържат нашите избори за дизайн. В края на страницата включваме библиотеката jQuery, приставката за времева линия и scripts.js, които ще инициализират приставката.

Когато извикаме плъгина, той намира DIV блок с ID=timeline. Вътре в блока той монтира html маркирането, след което страницата става следното:

Джони Б. Гуд

дизайнер & разработчик

март 2009 г

Първият ми експеримент в time-lapse фотография

Природата в най-добрия й вид в това видео.

март 2010 г
Дизайн на лого за зоомагазин
юни 2009 г
Още един експеримент с изтичане на времето

Тъй като ще направим някои промени в CSS стила, кодът по-горе дава по-добра представа за това как е структурирано портфолиото. Обърнете внимание, че няма да променим стиловете по подразбиране на плъгина, а само ще презапишем някои атрибути в нашия собствен css файл. Това ни дава предимство при бъдещи промени в дизайна на портфолиото.

Ще обсъдим подробно писането на CSS, но малко по-късно. Единственото нещо е, че ще трябва да пренапишем всички инструкции върху съществуващите, но ще се справим с това по-късно.

jQuery

За да инициализираме плъгина, трябва да извикаме метода VMM.Timeline():

$(function()( var timeline = new VMM.Timeline(); timeline.init("data.json"); ));

Методът init приема прост аргумент, ресурс от данни. Може да бъде json файл, като в кода по-горе, или електронна таблица на Google.

За да научите повече за това как работиданни.json, изтеглете източниците на урока. Тук няма нищо сложно, няма нужда да описвате структурата на този файл.

css

С Firebug HTML Inspector можете да дефинирате селектори за HTML елемент, които са дефинирани във timeline.css. След това, като използвате същите селектори, можете да зададете своите стилове във файла styles.css. В някои случаи съм използвал ! важнода приоритизирате собствените си стилове.

Всички промени, които ще видите по-долу, се добавят ръчно с помощта на CSS стилове. Останалите стилови елементи се задават от плъгина по подразбиране.

На първо място, след като стилизираме страницата като цяло, ще променим фона на портфолиото:

#timeline( background:none; ) /* Отделните събития в плъзгача */ .slider .slider-container-mask .slider-container( background:none; ) /* Задаване на персонализирано фоново изображение */ #timeline div.navigation ( фон: url("../img/timeline_bg.jpg") повторение; border-top:none; )

За да създадете 3D ефект, навигационен блок, ще трябва да използваме. Елементът :after е тъмната горна част и използва линеен градиент, за да му придаде 3D ефект.

#timeline div.navigation:before( position:absolute; content:""; height:40px; width:100%; left:0; top:-40px; background: url("../img/timeline_bg.jpg") repeat; ) #timeline div.navigation:after( position:absolute; content:""; height:10px; width:100%; left:0; top:-40px; background:repeat-x; background-image: linear- градиент (отдолу, #434446 0%, #363839 100%); фоново изображение: -o-линеен градиент (отдолу, #434446 0%, #363839 100%); фоново изображение: -moz-линеен градиент( отдолу, #434446 0%, #363839 100%); фоново изображение: -webkit-линеен градиент (отдолу, #434446 0%, #363839 100%); фоново изображение: -ms-линеен градиент (отдолу, #434446 0%, #363839 100%); )

#timeline div.timenav-background( background-color:rgba(0,0,0,0.4) !important; ) #timeline .navigation .timenav-background .timenav-interval-background( background:none; ) #timeline .top -хайлайт (фонов цвят: прозрачен ! важно; )

Оформяне на бутоните за увеличаване и намаляване на мащаба в лентата с инструменти:

#timeline .toolbar( border:none !important; background-color: #202222 !important; ) #timeline .toolbar div( border:none !important; )

Стил на мащаба в долната част:

#timeline .navigation .timenav .time .time-interval-minor .minor( margin-left:-1px; ) #timeline .navigation .timenav .time .time-interval div( цвят: #CCCCCC; )

Стрелки за предишното и следващото събитие:

Slider .nav-previous .icon ( background: url("timeline.png") no-repeat scroll 0 -293px transparent; ) .slider .nav-previous,.slider .nav-next( font-family:"Segoe UI" ,sans-serif; ) .slider .nav-next .icon ( фон: url("timeline.png") превъртане без повторение 72px -221px прозрачен; ширина: 70px !important; ) .slider .nav-next:hover . икона( позиция:относителна; дясно:-5px;) .плъзгач .nav-previous:hover, .slider .nav-next:hover (цвят: #666; курсор: показалец;) #timeline .thumbnail ( граница: средна няма; )

Зареждане на фона:

#timeline .feedback ( background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; border:none; ) #timeline .feedback div( цвят: #AAAAAA; font-size : 14px !важно; тегло на шрифта: нормално; )

#timeline .slider-item h2, #timeline .slider-item h3( font-family:"Antic Slab","Segoe UI",sans-serif; ) #timeline .slider-item h2( color:#fff; ) # времева линия .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( border:none; )

Накрая ще сменим корицата. Използвах nth-child(1) само за връзка към първия слайд (корицата), който съдържа заглавието и описанието на портфолиото. Тези данни се съхраняват в JSON файл.

/* Персонализиране на първия слайд - корицата */ #timeline .slider-item:nth-child(1) h2( font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba( 0,0,0,0.3); бяло пространство: nowrap; padding:10px 5px 5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1 ) p i( font:normal normal 40px "Dancing Script","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white-space: nowrap; padding:5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1) p .c1( color:#1bdff0; ) #timeline .slider-item:nth-child(1) p . c2( цвят:#c92fe6; ) #времева линия .slider-item:nth-child(1) .media-container ( ляво: -30px; позиция: относителна; z-индекс: 1; ) #времева линия .slider-item:nth -child(1).credit(text-align: center; )

Остава само да отворите timeline.psd, който е прикачен във файла на приставката и да промените цвета на някои икони. Добавих всички необходими файлове към източниците за този урок. Това завършва създаването на jQuery портфолио с CSS3 стил!

Какво да правя с него?

Можете да използвате това портфолио не само за показване на най-новите проекти, но и интересни и важни точкивашата кариера. Това е като мини дневник на живота ви! Надявам се, че този урок ви е харесал. Споделете мислите си в коментарите по-долу.

Лонг избра темата за днешната тема. В резултат на това забелязах, че все още не сме направили селекции с галерии с изображения. Мисля, че е страхотна тема, защото галерииприсъства в много сайтове. Честно казано, никой от тях не е много привлекателен. Имайки предвид съвременните тенденции на развитие jquery, html5и т.н. Мислех си, защото вече трябва да има много по-привлекателни решения от тези, които срещнах преди. Така. След като прекара един ден, успя да намери голямо количествоскриптове. От цялата тази планина реших да избера само, защото обичам, както вече сте забелязали от предишни публикации.
Галерия с изображенияважи не само за със фотоалбуми. Скриптът може да се използва, мисля, че ще бъде още по-правилно, т.к портфолио за фотографи, дизайнерии т.н. jquery ефектище ви помогне да привлечете вниманието на посетителите и просто да добавите елегантност към вашия сайт.
Така. Колекция на вашето внимание jquery добавки за галерия с изображения за уебсайт.
Не забравяйте да коментирате и не забравяйте, че за да не загубите тази колекция, можете да я добавите към любимите си, като щракнете върху звездата в долната част на статията.

ФОТОКУТИЯ
Безплатна, лека, адаптивна галерия с изображения, в който всички ефекти, преходи се правят с помощта на css3. Идеален за създаване на уебсайт за портфолио за фотограф.

Галерия S
Атрактивен плъгин jqueryгалерии с изображения. Анимацията работи с css3.

ДИАМАНТИ.JS
Оригинален плъгин за галерия с изображения. Миниатюрите са оформени ромбкоето е много популярно в момента. Тази форма е направена с css3. Единственият минус на тази галерия е липсата на лайтбокс, който да отваря снимката в пълен размер. Тоест, трябва да закрепите плъгина за лайтбокс с раци. Този скрипт генерира адаптивна мрежаизображения във формата на ромб.

Суперкутия
Използване на модерна галерия с изображения jquery, css3 и html5. Всички сме свикнали с факта, че когато щракнете върху визуализацията пълна картинаотваря се в лайтбокс (изскачащ прозорец). Разработчиците на този плъгин решиха, че лайтбоксът вече е надживял своята полезност. Изображенията в тази галерия се отварят под визуализацията. Вижте демонстрацията и вижте как това решение изглежда много по-модерно.
|
Галерия с гладко диагонално избледняване
Модерна галерия от изображения, в която визуализациите се разпределят по цялото екранно пространство. Скриптът може да сканира папка със снимки на сървъра, тоест не е необходимо да вмъквате всяко изображение отделно. Достатъчно е да качите снимки в папка на сървъра и да посочите пътя до директорията в настройките. Тогава скриптът ще направи всичко сам.

Галерия Гама
Стилна, лека, отзивчива галерия с изображения с мрежа в стил Pinterest, която сега е много популярна. Скриптът работи добре като стационарни компютри, скоро мобилни устройствас всяка разделителна способност на екрана. Чудесно решение за създаване на портфолио на уеб дизайнер.

МРЕЖА С МАЛКИ ИЗОБРАЖЕНИЯ С РАЗШИРЯВАЩ СЕ ИЗГЛЕД
Плъгинът е адаптивна решетка на изображението. Щракването по-долу ще покаже по-голяма снимка и описание. Добър за изграждане на портфолио.

jGallery
jGallery е цял екран, адаптивна галерия с изображения. Ефектите, преходите и дори стилът се регулират лесно.

Glisse.js
Прост, но много ефективен плъгин за галерия с изображения. Точно това е решението, когато трябва да създадете фотоалбум. Плъгинът поддържа албуми и има много готин ефект на обръщане.

Mosaic Flow
Прост, адаптивен галерия с изображения с мрежа в стил Pinterest.

Галерия
Друга стилна решетъчна галерия в стил Pinterest с филтър за категории. Работи в браузъри: Chrome, Safari, Firefox, Opera, IE7+, Android браузър, Chrome mobile, Firefox mobile.

най-малко.js
Отлично безплатна галерияизображенияс използвайки JQUERY, 5 и CSS3. Има много атрактивен външен вид и със сигурност ще привлече вниманието на вашите посетители.

flipLightBox
Проста галерия от изображения. Когато щракнете върху визуализацията, цялото изображение се отваря в лайтбокса.

галерия blueimp
Гъвкава галерия. Възможност за извеждане модален прозорецне само снимки, но и видео. Работи чудесно на сензорни устройства. Лесно персонализиране и е възможно да се разшири функционалността с допълнителни плъгини (Вижте следващия плъгин).