Čas se nezastaví a s ním i pokrok. To ovlivnilo i internet. Už je vidět změna vzhled stránky, zvláště oblíbené adaptivní design. A ve výsledku mnoho nových responzivní posuvníky jquery, galerie, karusely nebo podobné pluginy.
1. Citlivý posuvník horizontálních sloupků

Responzivní horizontální karusel s podrobný návod instalací. Je vyrobena v jednoduchém stylu, ale můžete si ji upravit podle sebe.

2. Posuvník na Glide.js

Tento posuvník je vhodný pro jakýkoli web. Využívá open source Glide.js. Barvy posuvníku lze snadno změnit.

3. Prezentace s nakloněným obsahem

Responzivní posuvník obsahu. Vrcholem tohoto posuvníku je 3D efekt obrázků, stejně jako různé animace náhodného vzhledu.

4. Posuvník pomocí plátna HTML5

Velmi krásný a působivý posuvník s interaktivními částicemi. Vytvořeno na plátně HTML5

5. Posuvník Morphing Image

Posuvník s efektem morfování (hladká transformace z jednoho objektu na druhý). V tento příklad slider se dobře hodí pro portfolio webového vývojáře nebo webového studia ve formě portfolia.

6. Kruhový posuvník

Posuvník v podobě kruhu s efektem převrácení obrázku.

7. Posuvník rozmazané pozadí

Responzivní posuvník s přepínáním a rozostřením pozadí.

8. Responzivní módní posuvník

Jednoduchý, lehký a responzivní posuvník webových stránek.

9. Slicebox - posuvník 3D obrazu jQuery(AKTUALIZOVÁNO)

Aktualizovaná verze posuvníku Slicebox s opravami a novými funkcemi.

10. Zdarma animovaná responzivní mřížka obrázků

Plugin jQuery pro vytváření flexibilní mřížky obrázků, která bude přepínat záběry pomocí různých animací a časování. To může vypadat dobře jako pozadí nebo dekorativní prvek na webu, protože můžeme nastavit selektivní vzhled nových obrázků a jejich přechody. Plugin se vyrábí v několika verzích.

11.Posuvník Flex

Univerzální bezplatný plugin pro váš web. Tento plugin je k dispozici v několika možnostech posuvníku a karuselu.

12. Fotorámeček

Fotorama je univerzální plugin. Má mnoho nastavení, vše funguje rychle a jednoduše, je možné prohlížet snímky na celou obrazovku. Posuvník lze použít v pevné velikosti i adaptivní, s miniaturami i bez nich, s kruhovým posouváním i bez něj a mnoho dalšího.

P.S.Posuvník jsem dal několikrát a myslím, že je jeden z nejlepších

13. Zdarma a responzivní posuvník galerie 3D miniatur.

Experimentální galerie posuvníků 3DPanelLayout se síťovinou a zajímavé efekty animace.

14. Posuvník na css3

Responzivní posuvník vytvořený pomocí css3 s hladkým vzhledem obsahu a světelnou animací.

15. Posuvník WOW

Posuvník WOW je posuvník obrázků s úžasnými vizuálními efekty.

17.Elastický

Elastický posuvník s plnou odezvou a miniaturami snímků.

18. Štěrbina

Toto je celoobrazovkový jezdec s animací css3. Posuvník se vyrábí ve dvou verzích. Animace je udělaná dost neobvykle a krásně.

19. Responzivní fotogalerie plus

Jednoduchá bezplatná galerie posuvníků s nahráním obrázků.

20. Responzivní posuvník pro WordPress

Responzivní bezplatný posuvník pro WP.

21. Posuvník obsahu paralaxy

Posuvník s efektem paralaxy a ovládáním každého prvku pomocí CSS 3.

22. Posuvník s hudební vazbou

Posuvník pomocí otevřít zdrojový kód JPlayer. Tento posuvník připomíná prezentaci s hudbou.

23. Posuvník s jmpress.js

Responzivní posuvník je založen na jmpress.js a umožní tedy na snímky aplikovat některé zajímavé 3D efekty.

24. Rychlá prezentace s přechodem

prezentace s rychlé přepínání diapozitivy. Snímky se přepínají při vznášení.

25. Obrazový akordeon s CSS3

Obrázek akordeon s css3.

26. Plugin Optimalizovaná galerie dotykem

Toto je responzivní galerie, která je optimalizována pro dotyková zařízení.

27. 3D galerie

Galerie 3D stěn- vytvořeno pro prohlížeč Safari, kde bude viditelný 3D efekt. Při prohlížení v jiném prohlížeči bude funkce v pořádku, ale 3D efekt nebude viditelný.

28. Posuvník se stránkováním

Responzivní posuvník stránkování s posuvníkem uživatelského rozhraní jQuery. myšlenkou je použít jednoduchý navigační koncept. Je možné přetáčet všechny obrázky nebo přepínat mezi snímky.

29. Montáž obrázků pomocí jQuery

Automatické uspořádání obrázků v závislosti na šířce obrazovky. Velmi užitečná věc při vývoji webu s portfoliem.

30. 3D galerie

Jednoduchý 3D kruhový posuvník v css3 a jQuery.

31. Režim celé obrazovky s 3D efektem na css3 a jQuery

Posuvník s možností zobrazení obrázků na celé obrazovce s krásným přechodem.

Kompetentně sestavené a vizuálně navržené, v našem případě se jedná o samostatnou stránku, je to důležitý prvek osobního webu nebo blogu každého specialisty, který dosáhl určité úrovně dovedností ve svém odborná činnost.
Stránka portfolia je druh zprávy nebo vizuálního shrnutí, pomocí kterého můžete čtenářům a návštěvníkům webu / blogu jasně ukázat soubor nejúspěšnějších dokončených prací, ať už jde o fotografie, články, publikace. , designové prvky atd.
Takovou stránku nemám a z mé strany je to nešťastné opomenutí, které je třeba co nejdříve napravit, co se vlastně tento moment a pracuji.
V obrovských rozlohách celosvětové sítě jich najdete obrovské množství hotové šablony stránky pro organizaci portfolia a rozmanitost takových stránek je opravdu působivá. Takže, kdo se zajímá o všechny spletitosti webdesignu a vývoje, bude vždy schopen najít vhodnou volbu pro sebe. Pro ty, kteří si potrpí na znalosti v oblasti tvorby webových stránek, navrhuji analyzovat příklad adaptivního rozvržení, jednoduchou stránku portfolia, s filtrováním dokončených prací podle kategorií, vyrobených na, zředěných atraktivním přechodovým efektem, s prvky animace.

Rozvržení stránky, spustitelný javascript a některé designové prvky daly „do hor“, skvělý webový designér a vývojář Kevin Liew (queness.com). Při výběru optimálního řešení pro mě bylo důležité, aby se jednalo o jednoduchost provedení, funkčnost pluginu jQuery, správné fungování ve všech moderních prohlížečích a vzhledem ke stále rostoucí oblibě používání různých mobilních zařízení pro surfování po internetu, přizpůsobivost návrhu budoucí stránky. Žádné náročné, designové zvonky a píšťalky a těžké plug-iny.

Základní dispozice se skládá ze dvou hlavních prvků uživatelské rozhraní Ty, které musíme vytvořit, jsou navigace s kartami pro filtrování kategorií odeslaných prací a samotná mřížka miniatur s efektem vyskakovacího titulku při najetí myší.
Pro začátek, aby vše nakonec fungovalo, bude potřeba jQuery alespoň verze 1.7.0. Pokud jste jej ještě nepřipojili, přidejte před značku následující řádek :

Spusťte plugin MixItUp, vložte tento kód za výše uvedené soubory:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] , easing : "snap" , // vyvolání efektu hover onMixEnd: filterList. hoverEffect() ) ; ), hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function () ( $(this) . find(".label" ) .stop() .animate(( dole: 0 ), 200 , "easeOutQuad" ) ; $(this) .find("img" ) .stop() .animate(( nahoře: - 30 ( this) .find("img" ) .stop() .animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ); filterList.init() ; ) );

Nemá smysl zvažovat všechny možnosti pluginu samostatně, výchozí je docela nejlepší možnost. No, pokud někdo bude experimentovat s parametry, prosím, vše je ve vaší moci.

Chcete-li vytvořit rozvržení stránky a vzhled prvků, připojte k dokumentu několik souborů . , jeden pro základní styly, říkejme mu layout.css a další malý soubor CSS normalize.css , pro lepší konzistenci prohlížeče v standardní provedení Prvky:

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

Nyní vše rozebereme v pořádku, pokud možno bez zbytečné vody, přístupným a srozumitelným způsobem, v našem rodném, trpělivém jazyce.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Všechno < li>< span class = "filter" data- filter= "app" >Aplikace < li>< span class = "filter" data- filter= "card" >vizitky < li>< span class = "filter" data- filter= "icon" >ikony < li>< span class = "filter" data- filter= "logo" >Logo < li>< span class = "filter" data- filter= "web" >webový design

  • Všechno
  • Aplikace
  • vizitky
  • ikony
  • Logo
  • webový design

Na navigační panel umístíme celý seznam děl rozdělený do kategorií. Potřebujeme propojit každou kategorii portfolia prostřednictvím atributu data-cat s jednou nebo jinou položkou navigační lišty v souladu s hodnotou v atributu data-filter. Porovnáním hodnot data-filtru s data-cat budou položky portfolia filtrovány podle kategorie.
K náhledu, prozatím skrytému, navíc přidáme malý panel s názvem díla a názvem kategorie, který vyskočí až po najetí na obrázek. A abychom si usnadnili vytvoření vzhledu celé této struktury v CSS, napíšeme do prvků odpovídající třídy:

< 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" >Hosting Beget. Ru < span class = "text-category" >Logo < div class = "label-bg" > .........

.........

Vezměte prosím na vědomí, že můžete přidat odkazy na obrázek nebo přímo na podpis, aby uživatel viděl celou vaši práci v plném rozsahu.

css

Nyní, v tichosti, přejděme k nejzajímavější části, k vytvoření obecných stylů uživatelského rozhraní naší stránky portfolia a její adaptivní verze v CSS. V článku uvedu pouze základní (výchozí) hodnoty, tedy bez jakýchkoli obrázky na pozadí a připojené fonty, to vše, kdo to potřebuje, může vidět v demu, nebo najít ve zdrojovém archivu.

.kontejner ( pozice : relativní ; šířka : 960px ; okraj : 0 auto ; /* Při změně velikosti okna prohlížeče budete moci vidět navigační řetězec */-webkit-transition: všechny 1s snadné; -moz-transition: všechny 1s snadné; -o-přechod: všechny 1s snadné; přechod: všechny 1s snadné; ) #filtry ( margin : 1 % ; padding : 0 ; styl seznamu : žádný ; ) #filters li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* přidat do textu nějaký stín */ text-shadow : 1px 1px #FFFFFF ; kurzor : ukazatel ; ) /* změnit pozadí kategorie při najetí myší */#filtry li span: hover ( pozadí : #34B7CD ; stín textu : 0 0 2px #004B7D ; barva : #fff ; ) /* pozadí položky aktivní kategorie */#filters li span.active ( background : rgb (62 , 151 , 221 ); text-shadow : 0 0 2px #004B7D ; color : #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 : left ; overflow : hidden ; ) .portfolio-wrapper ( přetečení : skryté ;pozice : relativní !důležité;pozadí : #666 ; kurzor : ukazatel ; ) .portfolio img ( max. šířka : 100 % ; poloha : relativní ; ) /* titulky jsou ve výchozím nastavení skryté */.portfolio .label ( position : absolute ; width : 100 % ; height : 40px ; bottom : -40px ; ) % ; position : absolute ; top : 0 ; left : 0 ; ) .portfolio .label-text ( color : #fff ; position : relativní ; z-index : 500 ; padding : 5px 8px ; ) display : block ; font-size : 9px ; )

Kontejner ( pozice: relativní; šířka: 960px; okraj: 0 auto; /* Řetěz přechodů uvidíte, když se změní velikost okna prohlížeče */ -webkit-transition: all 1s easy; -moz-transition: all 1s snadnost; -o- přechod: všechny 1s snadné; přechod: všechny 1s snadné; ) #filtry ( margin:1%; padding:0; list-style:none; ) #filters li (plovoucí:left; ) #filtry li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* přidat do textu nějaký stín */ text-shadow: 1px 1px #FFFFFF; kurzor: ukazatel; ) /* změnit pozadí kategorie při vznášení */ #filters li span:hover ( pozadí: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* pozadí položky aktivní kategorie */ #filters li span.active ( pozadí: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border- box; -o-box- velikost: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .po rtfolio-wrapper ( overflow:hidden; poloha: relativní !důležité; pozadí: #666; kurzor:ukazatel; ) .portfolio img ( max-width:100%; position: relativní; ) /* štítky jsou ve výchozím nastavení skryté */ .portfolio .label (position: absolute; width: 100%; height:40px; bottom:-40px; ) . portfolio .label-bg ( pozadí: rgb(62, 151, 221); šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; ) .portfolio .label-text ( barva: # fff; position: relativní; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

V druhé části, přímo ve stejné šabloně stylů, pomocí několika mediálních dotazů vytvoříme alternativní CSS sekce. Aby se rozložení naší stránky správně zobrazovalo na obrazovkách různých mobilních zařízení, přidáme do těchto sekcí alternativní pravidla CSS pro různé obrazovky. Snadno tak přepíšeme jakákoli pravidla dříve nastavená v našem CSS tabulka pro běžné prohlížeče a dosáhnout velmi kýžené přizpůsobivosti.

/* Tablet */ @media only obrazovka a (min-width: 768px ) a (max-width : 959px ) ( .container ( width : 768px ; ) ) /* Mobilní – Poznámka: Design pro šířku 320 pixelů*/@media only screen and (max-width: 767px) ( .container (šířka: 95%; ) #portfoliolist .portfolio (šířka: 48%; margin: 1%;)) /* Mobilní – Poznámka: Design pro šířku 480 pixelů */@media only screen a (min-width: 480px) a (max-width: 767px) (.container (šířka: 70%; ) )

/* Tablet */ @media only obrazovka a (min-width: 768px) a (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobile – Poznámka: Design pro šířku 320px*/ @media only screen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Mobile – Poznámka: Určeno pro šířku 480px */ @media pouze obrazovka a (min. šířka: 480 pixelů) a (maximální šířka: 767 pixelů) ( .container ( šířka: 70 %; ) )

To je vše. Naše úžasná stránka pod velkorysým názvem "Portfolio" je připravena, zbývá ji pouze naplnit vašimi neméně úžasnými a vynikajícími díly a vystavit ji celému světu. Stále můžete být na sebe tiše, skromně hrdí. Hlavní věcí je nepřehánět to v této věci.
Podívejte se znovu na příklad a v případě potřeby vezměte zdrojový kód, ve svém volném čase, v klidném domácím prostředí, můžete toto dílo dovést k dokonalosti.

Při tvorbě lekce byl použit materiál: . Nachází se tam původní, nedotčená, jen z autorova pera, stránka portfolia.

Hodně štěstí všem a s prospěchem těla prožijte zbytek krátkého léta!

V současné době je posuvník karuselu funkcí, kterou je prostě nutné mít na obchodním webu, webu portfolia nebo jakémkoli jiném zdroji. Spolu s posuvníky obrazu na celé obrazovce se horizontální posuvné posuvníky dobře hodí do jakéhokoli návrhu webu.

Někdy musí posuvník zabírat jednu třetinu stránky webu. Zde se posuvník karuselu používá s přechodovými efekty a citlivými rozvrženími. Weby elektronického obchodu používají posuvný posuvník k zobrazení více fotografií v samostatných příspěvcích nebo stránkách. Posuvný kód je zdarma k použití a mění se podle vašich potřeb.

Pomocí jQuery ve spojení s HTML5 a CSS3 můžete udělat své stránky zajímavějšími s jedinečnými efekty a přitáhnout pozornost návštěvníků na konkrétní oblast webu.

Slick - moderní posuvný modul pro kolotoč

Slick je bezplatný plugin jQuery, jehož vývojáři tvrdí, že jejich řešení uspokojí všechny vaše požadavky na slider. Responzivní posuvník – karusel může pracovat v režimu „dlaždice“ pro mobilní zařízení a v režimu „přetažení“ pro desktopovou verzi.

Obsahuje přechodový efekt blednutí, zajímavou funkci „režim uprostřed“, líné načítání obrázků s automatickým rolováním. Aktualizované funkce zahrnují přidávání snímků a filtr snímků. Vše pro vás k přizpůsobení pluginu dle vašich požadavků.

Demo režim | Stažení

Owl Carousel 2.0 - plugin jQuery pro dotyková zařízení

Tento plugin má velkou sadu funkcí, vhodný pro začátečníky i zkušené vývojáře. to aktualizovaná verze posuvník - kolotoč. Jeho předchůdce se jmenoval stejně.

Posuvník má některé vestavěné pluginy pro zlepšení celkové funkčnosti. Animace, přehrávání videa, automatické přehrávání posuvníku, líné načítání, automatické nastavení výšky - hlavní vlastnosti Owl Carousel 2.0.

Podpora přetažení a upustit zahrnuto pro více pohodlné použití plugin zapnutý mobilní zařízení.
Plugin je ideální pro zobrazování velkých obrázků i na malých obrazovkách mobilních zařízení.

Příklady | Stažení

Plugin jQuery Silver Track

Poměrně malý, ale bohatý plugin jquery, který umožňuje umístit na stránku posuvník karuselu, který má malé jádro a nespotřebovává mnoho zdrojů webu. Plugin lze použít k zobrazení vertikálních a horizontálních posuvníků, s animací a vytváření sad obrázků z galerie.

Příklady | Stažení

AnoSlide – Ultra kompaktní reagující posuvník jQuery

Ultra kompaktní posuvník jQuery- kolotoč, jehož funkčnost je mnohem více než u běžného posuvníku. To zahrnuje náhled jeden obrázek, zobrazení více obrázků v karuselu a posuvníku na základě titulků.

Příklady | Stažení

Owl Carousel - jquery slider - kolotoč

Kolotoč sova - jezdec s podpěrou dotykové obrazovky a technologie drag and drop, snadno vložená do kódu HTML. Plugin je jedním z nejlepších posuvníků, které vám umožňují vytvářet krásné kolotoče bez speciálně připraveného označení.

Příklady | Stažení

3D galerie - kolotoč

Používá 3D přechody založené na stylech CSS a některém kódu Javascript.

Příklady | Stažení

3D karusel pomocí TweenMax.js a jQuery

Nádherný 3D kolotoč. Vypadá to, že je to stále beta verze, protože jsem s ní právě teď našel několik problémů. Pokud máte zájem o testování a tvorbu vlastních sliderů, bude vám tento kolotoč velkým pomocníkem.

Příklady | Stažení

Kolotoč pomocí bootstrapu

Responzivní posuvník karuselu využívající technologii bootstrap přesně pro váš nový web.

Příklady | Stažení

Posuvník založený na bootstrapu - kolotoč Moving Box

Nejvyhledávanější na portfoliových a obchodních webech. Podobný typ posuvníku - karusel se často nachází na stránkách jakéhokoli typu.

Příklady | Stažení

Malý kruhový jezdec

Tento malý posuvník je připraven pracovat na zařízeních s jakýmkoli rozlišením obrazovky. Posuvník může pracovat v kruhovém i karuselovém režimu. Malý kruh je prezentován jako alternativa k jiným posuvníkům tohoto typu. Má vestavěnou podporu operační systémy IOS a Android.

V kruhovém režimu vypadá posuvník docela zajímavě. Podpora metody drag and drop a systém automatického posouvání snímků jsou dobře implementovány.

Příklady | Stažení

Posuvník obsahu Thumbelina

Výkonný, adaptivní posuvník kolotočového typu je ideální pro moderní web. Funguje správně na jakémkoli zařízení. Má horizontální a vertikální režimy. Jeho velikost je minimalizována na pouhý 1 KB. Ultra kompaktní plug-in má vynikající plynulé přechody.

Příklady | Stažení

wow posuvný kolotoč

Obsahuje více než 50 efektů, které vám mohou pomoci vytvořit originální posuvník pro váš web.

Příklady | Stažení

Responzivní posuvník obsahu jQuery bxSlider

Změňte velikost okna prohlížeče, abyste viděli, jak se posuvník přizpůsobí. Bxslider přichází s více než 50 možnostmi přizpůsobení a předvádí své funkce s různými přechodovými efekty.

Příklady | Stažení

jCarousel

jCarousel je plugin jQuery, který vám pomůže uspořádat zobrazení obrázků. Z rámce uvedeného v příkladu budete moci snadno vytvářet vlastní karusely obrázků. Posuvník je citlivý a optimalizovaný pro mobilní platformy.

Příklady | Stažení

ScrollBox - jQuery Plugin

Scrollbox je kompaktní plugin pro vytváření posuvníku - karuselu nebo textové běžící čáry. Mezi klíčové funkce patří efekt vertikálního a horizontálního rolování s pauzou při najetí myší.

Příklady | Stažení

dbpasCarousel

Jednoduchý posuvník kolotoče. Pokud potřebujete rychlý plugin, tento je 100% vhodný. Dodává se pouze se základními funkcemi potřebnými k tomu, aby posuvník fungoval.

Příklady | Stažení

Flexisel: Responzivní plugin JQuery Carousel Slider

Tvůrci Flexiselu se inspirovali oldschoolovým pluginem jCarousel a vytvořili jeho kopii zaměřenou na správné fungování slideru na mobilních zařízeních a tabletech.

Responzivní rozložení Flexisel se při spuštění na mobilních zařízeních liší od rozložení orientovaného na velikost okna prohlížeče. Flexisel je dokonale přizpůsoben pro práci na obrazovkách s nízkým i vysokým rozlišením.

Příklady | Stažení

Elastislide – citlivý posuvník kolotoče

Elastilide se dokonale přizpůsobí velikosti obrazovky zařízení. Můžete nastavit minimální počet obrázků, které se mají zobrazit při určitém rozlišení. Funguje dobře jako posuvník karuselu s galeriemi obrázků pomocí pevného obalu spolu s efektem vertikálního posouvání.

Příklad | Stažení

Flex Slider 2

Freeware slider od Woothemes. Je právem považován za jeden z nejlépe citlivých sliderů. Plugin obsahuje několik šablon a bude užitečný jak pro začínající uživatele, tak pro odborníky.

Příklad | Stažení

Úžasný kolotoč

Amazing Carousel je citlivý posuvník obrázků jQuery. Podporuje mnoho systémů pro správu obsahu, jako je WordPress, Drupal a Joomla. Podporuje také Android a IOS a desktopové verze operačních systémů bez problémů s kompatibilitou. Vestavěné úžasné šablony karuselu vám umožňují používat posuvník ve vertikálním, horizontálním a kruhovém režimu.

Příklady | Stažení

V tomto tutoriálu napíšeme krásné portfolio pomocí jQuery, CSS3 a pluginu Timeline. Časová osa je plugin jquery, který se specializuje na zobrazování časové osy událostí. V tomto portfoliu můžete vložit odlišné typy mediální data: tweety, videa, mapy, obrázky, záznamy a poté je uspořádejte podle data. Pokud zapracujete na designu, získáte krásné portfolio, které bude odrážet vaše zájmy a práci.

HTML

Ve výchozím nastavení obsahuje plugin Timeline světlé barevné schéma. To je ve většině případů velmi pohodlné a nezbytné. I když pro naše portfolio je tmavé provedení elegantnější. Proto jej optimalizujeme tak, jak se nám líbí.

Nejprve se podívejme na základní html označení stránky:

index.html

Portfolio časové osy | Demo tutorialzine

V sekci head máme styly pluginů – timeline.css a styles.css – které budou obsahovat naše volby designu. Na konec stránky uvádíme knihovnu jQuery, plugin časové osy a skript scripts.js, který plugin inicializuje.

Když zavoláme plugin, najde blok DIV s ID=časová osa. Uvnitř bloku připojí značku html, po které se stránka změní na následující:

Johnny B Goode

návrhář & vývojář

březen 2009

Můj první experiment v časosběrné fotografii

Příroda v celé své kráse v tomto videu.

březen 2010
Návrh loga pro zverimexu
června 2009
Další časosběrný experiment

Vzhledem k tomu, že budeme provádět nějaké změny ve stylu CSS, výše uvedený kód poskytuje lepší představu o tom, jak je portfolio strukturováno. Všimněte si, že nebudeme měnit výchozí styly pluginu, pouze přepíšeme některé atributy v našem vlastním css souboru. To nám dává výhodu při budoucích změnách designu portfolia.

Psaní CSS probereme podrobně, ale o něco později. Jediná věc je, že budeme muset přepsat všechny pokyny nad stávající, ale tím se budeme zabývat později.

jQuery

K inicializaci pluginu musíme zavolat metodu VMM.Timeline():

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

Metoda init má jednoduchý argument, datový zdroj. Může to být soubor json, jako v kódu výše, nebo tabulka Google.

Chcete-li se dozvědět více o tom, jak to fungujedata.json, stáhněte si zdroje lekcí. Není zde nic složitého, není třeba popisovat strukturu tohoto souboru.

css

Pomocí Firebug HTML Inspector můžete definovat selektory pro HTML element, které jsou definovány v timeline.css. Poté můžete pomocí stejných selektorů přiřadit své styly v souboru styles.css. V některých případech jsem použil ! Důležité upřednostňovat své vlastní styly.

Všechny změny, které uvidíte níže, jsou přidány ručně pomocí CSS styly. Zbývající prvky stylu jsou standardně nastaveny pluginem.

Nejprve po nastylování stránky obecně změníme pozadí portfolia:

#timeline( background:none; ) /* Jednotlivé události v posuvníku */ .slider .slider-container-mask .slider-container( background:none; ) /* Nastavení vlastního obrázku na pozadí */ #timeline div.navigation ( background: url("../img/timeline_bg.jpg") repeat; border-top:none; )

Chcete-li vytvořit 3D efekt, navigační blok, budeme muset použít. Prvek :after je tmavá horní část a pomocí lineárního přechodu má 3D efekt.

#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- gradient(bottom, #434446 0%, #363839 100%); background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -moz-linear-gradient( dole, #434446 0%, #363839 100%); obrázek na pozadí: -webkit-linear-gradient(dole, #434446 0%, #363839 100%); obrázek na pozadí: -ms-linear-gradient(dole, #434446 0 %, #363839 100 %); )

#timeline div.timenav-background( background-color:rgba(0,0,0,0.4) !důležité; ) #timeline .navigation .timenav-background .timenav-interval-background( background:none; ) #timeline .top -zvýraznění( barva pozadí:průhledná !důležité; )

Úprava stylu tlačítek pro přiblížení a oddálení na panelu nástrojů:

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

Styl měřítka dole:

#timeline .navigation .timenav .time .time-interval-minor .minor( margin-left:-1px; ) #timeline .navigation .timenav .time .time-interval div( color: #CCCCCC; )

Šipky pro předchozí a následující událost:

Posuvník .nav-previous .icon ( background: url("timeline.png") neopakovatelné posouvání 0 -293px průhledné; ) .slider .nav-previous,.slider .nav-next( font-family:"Uživatelské rozhraní Segoe" ,sans-serif; ) .slider .nav-next .icon ( background: url("timeline.png") posouvání bez opakování 72px -221px průhledné; šířka: 70px !important; ) .slider .nav-next:hover . ikona( pozice:relativní; vpravo:-5px; ) .slider .nav-previous:hover, .slider .nav-next:hover ( barva: #666; kurzor: ukazatel; ) #timeline .thumbnail ( okraj: střední žádná; )

Načíst pozadí:

#timeline .feedback ( background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; border:none; ) #timeline .feedback div( color: #AAAAAA; font-size : 14px !důležité; váha písma: normální; )

#timeline .slider-item h2, #timeline .slider-item h3( font-family:"Antic Slab","Segoe UI",sans-serif; ) #timeline .slider-item h2( color:#fff; ) # timeline .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( border:none; )

Na závěr přebal vyměníme. Použil jsem nth-child(1) pouze pro odkaz na první snímek (obálku), který obsahuje název a popis portfolia. Tato data jsou uložena v souboru JSON.

/* Přizpůsobení prvního snímku - obálka */ #timeline .slider-item:nth-child(1) h2( font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba( 0,0,0,0.3); white-space: 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( color:#c92fe6; ) #timeline .slider-item:nth-child(1) .media-container ( vlevo: -30px; pozice: relativní; z-index: 1; ) #timeline .slider-item:nth -child(1).kredit( zarovnat text: na střed; )

Zbývá pouze otevřít timeline.psd, který je připojen v souboru pluginu, a změnit barvu některých ikon. Přidal jsem všechny potřebné soubory do zdrojů pro tento tutoriál. Tím je tvorba portfolia jQuery se stylizací CSS3 dokončena!

co s tím dělat?

Toto portfolio můžete využít nejen k zobrazení nejnovějších projektů, ale také zajímavých a důležité body tvoje kariéra. Je to jako mini deník vašeho života! Doufám, že se vám tento návod líbil. Podělte se o své myšlenky v komentářích níže.

Dlouhý si vybral téma pro dnešní téma. V důsledku toho jsem si všiml, že jsme ještě neprovedli výběr s obrazové galerie. Myslím, že je to skvělé téma, protože galerie přítomné na mnoha stránkách. Upřímně řečeno, žádný z nich není příliš atraktivní. S ohledem na současné vývojové trendy jquery, html5 atd. Myslel jsem si, protože by již měla existovat mnohem atraktivnější řešení než ta, která jsem potkal dříve. Tak. Po dni stráveném se podařilo najít obrovské množství skripty. Z celé této hory jsem se rozhodl vybrat pouze, protože miluji, jak jste si již všimli z předchozích příspěvků.
Galerie Obrázků platí nejen pro s fotoalby. Skript lze použít, myslím, že bude ještě správnější, jak portfolio pro fotografy, designéry atd. efekty jquery pomůže přitáhnout pozornost návštěvníků a jednoduše dodá vašemu webu eleganci.
Tak. Kolekce pro vaši pozornost Pluginy galerie obrázků jquery pro webové stránky.
Nezapomeňte komentovat a pamatujte, abyste o tuto sbírku nepřišli, můžete si ji přidat do oblíbených kliknutím na hvězdičku ve spodní části článku.

FOTOBOX
Bezplatná, lehká a citlivá galerie obrázků, ve kterém jsou všechny efekty, přechody provedeny pomocí css3. Ideální pro vytvoření portfolia webu pro fotografa.

Galerie S
přitažlivý plugin jquery obrazové galerie. Animace pracuje s css3.

DIAMANTY.JS
Originál plugin galerie obrázků. Miniatury jsou tvarované kosočtverec která je v současnosti velmi populární. Tento formulář je vytvořen pomocí css3. Jediným negativem této galerie je chybějící lightbox, který by fotku otevřel v plné velikosti. To znamená, že musíte upevnit plugin lightbox s raky. Tento skript generuje adaptivní mřížka obrázky v podobě kosočtverce.

Superbox
Moderní galerie obrázků pomocí jquery, css3 a html5. Všichni jsme zvyklí, že když kliknete na náhled celý obrázek otevře se v okně lightbox (vyskakovací okno). Vývojáři tohoto pluginu se rozhodli, že lightbox již přežil svou užitečnost. Obrázky v této galerii se otevírají pod náhledem. Podívejte se na demo a podívejte se, jak toto řešení vypadá mnohem moderněji.
|
Galerie hladkého diagonálního vyblednutí
Moderní galerie obrázků, ve kterých náhledy jsou rozmístěny po celém prostoru obrazovky. Skript umí skenovat složku s fotografiemi na serveru, to znamená, že nemusíte vkládat každý obrázek zvlášť. Stačí nahrát obrázky do složky na serveru a v nastavení zadat cestu k adresáři. Poté skript udělá vše sám.

Gamma galerie
Stylová, lehká a citlivá galerie obrázků s mřížkou ve stylu Pinterestu, která je nyní velmi populární. Skript funguje dobře jako stacionární počítače, již brzy mobilní zařízení s libovolným rozlišením obrazovky. Skvělé řešení pro tvorbu portfolia webdesignerů.

MŘÍŽKA NÁHLEDŮ S ROZŠÍŘENÍM NÁHLEDU
Plugin je adaptivní obrazová mřížka. Po kliknutí níže se zobrazí větší fotografie a popis. Dobré pro budování portfolia.

jGallery
jGallery je celá obrazovka, responzivní galerie obrázků. Efekty, přechody a dokonce i styl lze snadno upravit.

Glisse.js
Jednoduchý, ale velmi účinný plugin galerie obrázků. To je přesně řešení, když potřebujete vytvořit fotoalbum. Plugin podporuje alba a má velmi skvělý efekt převracení.

Mozaikový tok
Jednoduché, přizpůsobivé galerie obrázků s mřížkou stylu Pinterest.

Galerie
Další stylová galerie mřížky ve stylu Pinterestu s filtrem kategorií. Funguje v prohlížečích: Chrome, Safari, Firefox, Opera, IE7+, Android browser, Chrome mobile, Firefox mobile.

nejméně.js
Vynikající galerie zdarma snímky S pomocí JQUERY, 5 a CSS3. Má velmi atraktivní vzhled a jistě upoutá pozornost vašich návštěvníků.

flipLightBox
Jednoduchá galerie obrázků. Po kliknutí na náhled se v lightboxu otevře celý obrázek.

galerie blueimp
Flexibilní galerie. Možnost výstupu modální okno nejen obrázky, ale i video. Funguje skvěle na dotykových zařízeních. Snadno přizpůsobitelné a je možné rozšířit funkčnost o další pluginy (viz další plugin).