Prezentare de diapozitive folosind elementul de pânză HTML5. Soluții eficiente CSS3 pentru designul paginilor stub. Efect de estompare CSS3 jQuery
1. Expunere de diapozitive jQuery minunată „Prezentare elastică”Prezentare de diapozitive cu miniaturi și descrieri de diapozitive. Diverse efecte de schimbare a imaginii. Există două opțiuni: cu schimbare automată diapozitive sau fără.
2. Slider CSS3 pur
Slider frumos de imagine cu descriere și schimbător automat de diapozitive. Când treceți cu mouse-ul peste imagine, rotația se oprește. Oprirea este însoțită de un efect CSS3.
3. plugin jQuery"Photorama"
Frumos slider galerie.
4. Efecte de text „Efecte de tipografie”
Efecte interesante pentru lucrul cu tipografia folosind CSS3 și jQuery. 7 efecte diferite.
5. Plugin Darkbox
Un mic plugin ușor pentru afișarea imaginilor într-un bloc pop-up.
6. Efect de hover cu jQuery
Efect de cerc la hover.
7. Butoane animate jQuery CSS3
O mulțime de efecte CSS3 animate diferite pentru a crea butoane minunate pentru site-ul tău. Doar efecte grozave de hover.
8. HTML5 jQuery modificarea imaginilor de fundal
Când faceți clic pe miniaturi imagini de fundalînlocuiți unul pe altul cu un efect de estompare. Când redimensionați fereastra browserului, imaginea de fundal se redimensionează.
8. Efecte de tipografie interactivă
Interesant efecte de text folosind HTML5 și jQuery (4 efecte diferite). Plasați cursorul peste text pentru a vedea efectul.
9. Subtitrări de tip pop-up
Multe efecte de trecere animate diferite pentru a implementa legendele de imagine pop-up.
10. Plugin „Portamento”
Bloc flotant în jQuery. Rămâne întotdeauna vizibil atunci când derulați în jos pe pagină.
11. Defilare de conținut
Plugin jQuery pentru afișarea derulării în blocuri de dimensiuni fixe. Mai multe stiluri.
Implementarea jQuery orizontală și defilare verticală continut intr-un bloc de dimensiuni fixe.
13. Pluginul Tiny Scrollbar
Plugin jQuery pentru implementarea verticală și defilare orizontală conţinut.
14. Plugin „jScrollPane”
Derularea încrucișată a conținutului dintr-un bloc.
15. Bloc plutitor „Scroll Follow”
Plugin pentru crearea unui bloc care se va derula pe măsură ce pagina derulează. Este posibil să remediați un bloc făcând clic pe un link.
16. Bare laterale pop-up
Panouri retractabile pe toate laturile paginii web.
17. Soluții eficiente CSS3 pentru designul paginilor stub
Trei opțiuni pentru implementarea efectelor animate pentru a crea un stub „Site în curs de dezvoltare”.
17. Efect la derularea paginii
Un efect uimitor la derularea paginii: elementele se deplasează în afara zonei din spatele ecranului sau, dimpotrivă, se ascund în spatele zonei ecranului. Această soluție este perfectă pentru utilizarea pe site-urile de portofoliu, pentru o prezentare eficientă a proiectelor finalizate cu o scurtă descriere.
19. Plugin „fancyBox 2”
O versiune nouă, complet rescrisă a binecunoscutului plugin fancybox pentru afișarea imaginilor și a altor conținuturi în ferestre modale.
20. Minimează Galeria
Plugin funcțional cu set mare caracteristici: galerie, carusel, glisor, meniu, expander, butoane animate.
21. jQuery News TickerRotator de știri pe site. Mesajele se succed și apar folosind efect interesant maşină de scris. Puteți opri schimbarea știrilor făcând clic pe butonul „Pauză”. Puteți folosi săgețile pentru a trece de la un mesaj la altul.
22. Imagini adaptive
Imagini scalabile pentru afișare dispozitive mobile. Dimensiunile imaginii depind de dimensiunea ferestrei. Tehnologii utilizate: javascript și PHP5.
23. vScroller
jQuery vertical, scroller CSS3. Viteză de defilare și timp de întârziere reglabile.
24. Meniu derulant pe mai multe niveluri „jQSimpleMenu”
Un nou plugin jQuery pentru crearea de meniuri verticale pe mai multe niveluri pe un site web.
25. „jsCarousel 2.0”
Plugin jQuery pentru implementarea caruselelor verticale și orizontale.
26. Rotator „Știri dinamice”
Plugin jQuery pentru afișare frumoasă cele mai recente știri din fluxul RSS.
27. Meniu animat
Efect animat atunci când treceți cu mouse-ul peste un element de meniu.
28. Efect de text animat
Trei exemple spectaculoase de lucru cu proprietatea CSS „background-clip: text”. Efectul CSS3 nu funcționează în browserele mai vechi.
29.CSS3 efect jQuery estompa
Când treceți cu mouse-ul peste un bloc, acesta se mărește, iar blocurile de text rămase se estompează în fundal.
Implementarea blocurilor asemănătoare notelor cu text.
34. Rlightbox
Afișarea conținutului media în blocuri pop-up: imagini, videoclipuri, Flash.
35. sonerie jQuery
Mărirea suprafeței pătrate.
36. Descrierea imaginii CSS3 jQuery
Plugin „Galeria de conținut bazată pe uși glisante” pentru implementarea descrierilor de imagini pop-up. Când treceți cursorul peste oricare dintre imaginile prezentate, a scurta descriere cu referinta la articol complet. La hover: efect de ridicare a ușii de garaj.
37. Pluginul jQuery cu efect „Înainte și după” „uCompare”
Tragând perdeaua poți compara două imagini suprapuse. Ideal pentru acele cazuri în care trebuie să afișați două versiuni ale ceva pe pagină: înainte și după.
- Traducere
- Tutorial
Datorită CSS3, putem crea efecte de animație fără a folosi JavaScript, ceea ce va ușura munca multor dezvoltatori.
Nu ar trebui să folosim CSS3 în exces, deoarece browserele mai vechi nu acceptă toate proprietățile sale. Oricum, vedem cu toții potențialul CSS3 și în acest articol vom discuta despre cum să creați un glisor de imagine în buclă folosind doar animația CSS3.
Descrierea conceptelor de bază legate de tranzițiile CSS3 și animația cadrelor cheie.
Crearea unui marcaj HTML pentru un glisor de imagine.
Creați o foaie de stil pentru afișarea glisorului.
Adăugarea de animație la glisor. Ne vom uita la diferitele procese care au loc aici.
Adăugarea unei bare de progres pentru glisorul nostru.
Adăugarea unui sfat explicativ pentru afișarea titlurilor.
Afișați un sfat explicativ la trecerea cu mouse-ul folosind tranzițiile CSS3
Să arătăm glisorul în acțiune.
Gânduri finale.
Pentru a utiliza acest tutorial, va trebui să aveți o înțelegere de bază a CSS, în special tranzițiile CSS3 și animațiile de cadre cheie.
Funcționează cu acestea concepte simple, vom vedea cum se face glisor funcțional imagini.
Putem folosi patru proprietăți de tranziție:
Tranziție-proprietate
Specifică numele (numele) Proprietăți CSS, cărora trebuie aplicate tranziții.
Durata tranziției
Definește timpul în care ar trebui să aibă loc tranziția.
Funcție de tranziție-cronometrare
Determină modul în care sunt calculate valorile intermediare de tranziție.
Tranziție-întârziere
Stabilește când este declanșată tranziția.
În prezent, tranzițiile CSS3 sunt acceptate în Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ și IE 10. Deoarece tehnologia este încă relativ nouă, sunt necesare prefixe de browser. Sintaxa este aceeași pentru toate browserele, cu excepția adăugării prefixelor necesare. Le vom omite în acest articol, dar nu uitați să includeți prefixele în cod.
Să vedem cum să aplicăm o tranziție simplă la un link:
a (culoare: #000; proprietatea tranziției: culoare; durata tranziției: 0,7 s; funcția de sincronizare a tranziției: ease-in; întârziere tranziție: 0,3 s; ) a:hover (culoare: #fff; )
Când atribuiți o animație unui element, puteți utiliza și forma prescurtată:
a (culoare: #000; tranziție: culoare 0,7s ease-in 0,3s; ) a:hover (culoare: #fff; )
Spre deosebire de tranzițiile CSS, animațiile de cadre cheie sunt în prezent acceptate doar în browserele WebKit, Firefox și în curând IE 10. Browserele neacceptate vor ignora pur și simplu codul de animație.
Proprietatea animație are opt subproprietăți:
Animație-întârziere
Stabilește când începe animația.
Animație-regie
Stabilește dacă animația ar trebui să fie redată direcție inversăîn cicluri alternante.
Animație-durată
Determină timpul necesar animației pentru a finaliza o buclă.
Animație-iterație-număr
Determină numărul de cicluri de animație înainte de oprire.
Nume-animație
Definește numele regulii în @keyframes.
Animație-play-stare
Stabilește dacă animația este redată sau întreruptă.
Animație-umplere-mod
Definește modul în care animația CSS ar trebui să aplice stiluri țintei sale înainte și după execuție.
Să vedem cum să aplici animație simplă a bloca:
/* Elementul căruia îi aplicăm animația. - moz-animation-name: mutare; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -moz-animation-delay: 0,5s; -moz-animation-iteration-count : 2; -direcția-animație-moz: alternativă; -nume-animație-webkit: mișcare; -durata-animație-webkit: 1s; -funcție-temporizare-animație-webkit: ease-in-out; -webkit-animation- întârziere: 0,5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternativ; ) /* Codul de animație în sine. */ @keyframes se mută ( din ( transform: translateX(0); ) în ( transform: translateX(100px); ) ) @-moz-keyframes muta ( din ( -moz-transform: translateX(0); ) în ( -) moz-transform: translateX(100px); ) ) @-webkit-keyframes se mută ( de la ( -webkit-transform: translateX(0); ) la ( -webkit-transform: translateX(100px); ) )
Putem folosi o prescurtare pentru a seta toate proprietățile animației simultan:
div ( animație: mutare 1s ease-in-out 0.5s 2 alternativ; -moz-animation: mutarea 1s ease-in-out 0.5s 2 alternativ; -webkit-animation: mutarea 1s ease-in-out 0.5s 2 alternativ; )
/* Animație de la 0% la 100% */ @keyframes move ( 0% ( transform: translateX(0); ) 100% ( transform: translateX(100px); ) ) /* Animație cu cadru intermediar */ @keyframes move ( 0% ( transform: translateX(0); ) 50% ( transform: translateX(20px); ) 100% ( transform: translateX(100px); ) )
W3C are o mulțime de utile și informatii detaliate despre „animația CSS3”
Structura de bază a glisorului nostru Acum că știm cum funcționează tranzițiile și animațiile, să ne uităm la cum să ne creăm glisorul folosind doar CSS3. Această schiță arată cum ar trebui să funcționeze animația:
După cum puteți vedea, glisorul va fi containerul în care vor fi afișate imaginile.
Animația este foarte simplă: imaginea urmează o direcție dată, schimbând proprietățile „top”, „z-index” și „opacitate”.
Să trecem direct în marcajul HTML pentru a crea glisorul.
-
pumă -
Leii -
Snowalker -
urlete -
Bronzare
Div id="glisor"
Acesta este containerul glisor principal. Nu are o funcție specifică, dar avem nevoie de ea pentru a întrerupe animația.
Div id="mască"
Vom folosi acest bloc pentru a ascunde tot ce se întâmplă în afara glisorului. În plus, masca ne permite să afișăm conținutul glisorului.
Li id="first" class="firstanimation"
Fiecare element de listă are un ID și o clasă. ID-ul afișează un tooltip și clasa este legată de animația care urmează să se întâmple.
Div class="tooltip"
Acest bloc afișează titlul imaginii. Îl puteți modifica în funcție de nevoile dvs., de exemplu, făcându-l clicabil sau adăugând o scurtă descriere.
Div class="bara de progres"
Acest bloc conține o funcție care arată progresul animației.
Acum este timpul să generați fișierul CSS.
3. Stiluri CSS Să creăm structură de bază glisor. Va avea aceeași dimensiune ca imaginea. Proprietatea border va fi utilă pentru a crea o chenar în jurul unei imagini./* Structura cursorului */ #glisor ( fundal: #000; chenar: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); înălțime: 320px; lățime: 680px; margine: 40px automat 0; preaplin: vizibil; poziție: relativă; )
Clasa „mască” va ascunde toate elementele care se află în afara glisorului. Înălțimea lui ar trebui să fie înălțime egală glisor.
/* Ascunderea totul în afara cursorului */ #mask ( overflow: ascuns; înălțime: 320px; )
În cele din urmă, pentru a sorta lista de imagini, vom folosi „position: absolute” și „top: -325px”, astfel încât toate imaginile să fie poziționate în afara glisorului.
/* Listă de imagini */ #slider ul ( margine: 0; padding: 0; poziție: relativ; ) #slider li ( lățime: 680px; /* Lățime imagine */ înălțime: 320px; /* Înălțime imagine */ poziție: absolut; sus: -325px; /* Poziția inițială(în afara cursorului) */ list-style: none; )
Cu aceste câteva linii de cod, am creat marcajul glisor. Acum trebuie doar să adăugăm animație.
4. Animație CSS3 Keyframe
Înainte de a începe cu animația, trebuie să definim câțiva parametri pentru a obține animația corectă.
După cum știm, durata totală a animației va fi de 25 de secunde, dar trebuie să știm câte cadre cheie vor fi într-o secundă.
Să rezolvăm o serie de operații care ne vor oferi numărul exact de cadre cheie și durata totală a animației. Iată calculele:
Determinăm numărul total de imagini din glisor: 5;
Determinăm durata animației pentru fiecare imagine: 5 secunde;
Determinăm durata totală a animației prin înmulțirea numărului total de imagini cu durata fiecăreia: 5 imagini × 5 secunde = 25 secunde;
Calculăm câte cadre cheie (procent) vor fi într-o secundă.
Împărțiți numărul total de cadre cheie la durata completă a animației: 100%/25 = 4%,
Există 4 cadre cheie într-o secundă, sau 1 secundă este egală cu 4% din animație.
Cu toate aceste calcule făcute, acum putem aplica animația CSS la glisor. Putem pune animația într-o buclă infinită pentru că... Pentru fiecare imagine se va seta o animație separată, independentă de celelalte imagini.
#slider li.firstanimation ( animație: ciclu 25s liniar infinit; ) #slider li.secondanimation ( animație: cycletwo 25s linear infinit; ) #slider li.thirdanimation ( animație: ciclu trei 25s liniar infinit; ) #slider li.fourthanimation ( animație: cyclefour 25s liniar infinit; ) #slider li.fifthanimation ( animație: cyclefive 25s liniar infinit; )
Odată ce proprietățile de animație au fost atribuite, trebuie să folosim cadre cheie pentru a pune animația în mișcare.
Urmând acest principiu, putem conecta toate animațiile între ele, chiar dacă sunt independente unele de altele. Acest lucru ne va oferi o buclă infinită.
Am adăugat proprietăți „opacitate” și „z-index” pentru a face tranziția de la o imagine la alta mai atractivă.
După cum puteți vedea în cod, prima animație are mai multe cadre cheie decât celelalte. Motivul pentru aceasta este că atunci când glisorul este lansat, prima imagine face loc pentru a doua, dar când ultima imagine își termină animația, prima imagine trebuie să aibă cadre cheie suplimentare pentru a evita crearea de întreruperi între buclele de animație.
Iată tot codul pentru animații:
/* Animație */ @keyframes cycle ( 0% ( sus: 0px; ) /* Când glisorul pornește, prima imagine este deja vizibilă */ 4% ( sus: 0px; ) /* Poziția de pornire */ 16% ( sus : 0px; opacitate:1; z-index:0; ) /* De la 4% la 16% (3 secunde) imaginea este vizibilă */ 20% (sus: 325px; opacitate: 0; z-index: 0; ) /* de la 16% până la 20% (1 secundă) de ieșire a imaginii */ 21% ( sus: -325px; opacitate: 0; z-index: -1; ) /* Revenirea la poziția inițială în afara măștii */ 92 % ( sus: -325px; opacitate: 0; z-index: 0; ) 96% (sus: -325px; opacitate: 0; ) /* De la 96% la 100% (1 secundă) – intrare */ 100%( sus: 0px; opacitate: 1 ; ) ) @keyframes cycletwo ( 0% ( sus: -325px; opacitate: 0; ) /* Poziția de pornire în afara măștii */ 16% ( sus: -325px; opacitate: 0; ) / * Începutul mișcării la 16% * / 20% (sus: 0px; opacitate: 1; ) 24% (sus: 0px; opacitate: 1; ) /* De la 20% la 24% (într-o secundă) - introducere */ 36% (sus: 0px; opacitate: 1; z-index: 0; ) /* De la 24% la 36% (3 secunde) imaginea este vizibilă */ 40% (sus: 325px; opacitate: 0; z-index) : 0; ) /* De la 36% până la 40% (1 secundă) - ieșire */ 41% ( sus: -325px; opacitate: 0; indicele z: -1; ) /* Revenirea la poziția inițială */ 100%( sus: -325px; opacitate: 0; z-index: -1; ) ) @keyframes cyclethree ( 0% ( sus: -325px; opacitate: 0; ) 36% ( sus: -325px; opacitate: 0; ) 40% (sus: 0px; opacitate: 1; ) 44% (sus: 0px; opacitate: 1; ) 56% (sus: 0px; opacitate: 1; ) 60% (sus: 0px; : 325px; opacitate: 0; z-index: 0; ) 61% (sus: -325px; opacitate: 0; z-index: -1; ) 100% (sus: -325px; opacitate: 0; z-index: -1; ) ) @keyframes cyclefour ( 0% ( sus: -325px; opacitate: 0; ) 56% ( sus: -325px; opacitate: 0; ) 60% ( sus: 0px; opacitate: 1; ) 64% ( sus: 0px; opacitate: 1; ) 76% (sus: 0px; opacitate: 1; z-index: 0; ) 80% (sus: 325px; opacitate: 0; z-index: 0; ) 81% (sus: 325px; -325px; opacitate: 0; z-index: -1; ) 100%( sus: -325px; opacitate: 0; z-index: -1; ) ) @keyframes cyclefive ( 0% (sus: -325px; opacitate: 0; ) 76% (sus: -325px; opacitate: 0; ) 80% (sus: 0px; opacitate: 1; ) 84% (sus: 0px; opacitate: 1; ) 96% (sus: 0px; opacitate: 1 ; index z: 0; ) 100%( sus: 325px; opacitate: 0; indice z: 0; ) )
Odată ce am creat animația, trebuie să adăugăm o bară de progres pentru a afișa durata fiecărei animații.
Procesul de animație pentru bara de progres este același ca și pentru glisor. Să creăm în sine bara de progres:
/* Bara de progres */ .Bara de progres (poziție: relativă; sus: -5px; lățime: 680px; înălțime: 5px; fundal: #000; animație: fullexpand 25s ease-out infinit; )
Nu vă fie frică de sintaxă. Există aceeași funcție ca „de la la”. Puteți vedea că cadrele cheie stabilesc aspectul și dispariția fiecărei imagini.
/* Bara de stare a animației */ @keyframes fullexpand ( /* Animația este staționară în aceste cadre cheie */ 0%, 20%, 40%, 60%, 80%, 100% ( lățime: 0%; opacitate: 0; ) / * În acestea - prinde viață */ 4%, 24%, 44%, 64%, 84% ( lățime: 0%; opacitate: 0,3; ) /* În acestea - se umple lin */ 16%, 36 %, 56%, 76%, 96% ( lățime: 100%; opacitate: 0,7; ) /* La aceste cadre cheie, bara de progres și-a încheiat calea */ 17%, 37%, 57%, 77%, 97% ( lățime: 100%; opacitate: 0,3; ) /* La aceste cadre cheie, bara de progres va dispărea și apoi va relua bucla */ 18%, 38%, 58%, 78%, 98% ( lățime: 100%; opacitate: 0 ;))
Glisorul este mai mult sau mai puțin complet. Să adăugăm câteva detalii pentru a-l face mai funcțional. Vom insera sfaturi pentru titlurile imaginilor care vor fi vizibile la trecerea cursorului.
Stiluri de indicații:
#slider .tooltip ( fundal: rgba(0,0,0,0.7); lățime: 300px; înălțime: 60px; poziție: relativ; jos: 75px; stânga: -320px; ) #glider .tooltip h1 (culoare: #fff ; dimensiunea fontului: 24px; greutatea fontului: 300; înălțimea liniei: 60px; umplutură: 0 0 0 10px; )
Aici am făcut vizibile doar titlurile imaginilor, dar puteți face același lucru pentru orice text, link-uri sau orice altceva doriți.
7. Tranziții CSS3
Am văzut cum să aplicăm tranziții CSS3 elementelor, acum să le facem pentru sfaturi cu instrumente.
Dacă vă amintiți, am adăugat un ID la fiecare listă („primul”, „al doilea”, etc.) imagine separată, dar toate solicitările nu au apărut deodată.
#slider .tooltip ( … tranziție: toate cele 0.3s ease-in-out; ) #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip ( stânga: 0px; )
8. Întrerupeți și reporniți
Pentru a le permite utilizatorilor să oprească glisorul pentru a vedea conținutul, trebuie să oprim animația la hover. De asemenea, va trebui să oprim animația barei de progres.
#slider: hover li, #slider: hover .progress-bar (animation-play-state: paused; )
9. Demonstrație În sfârșit, am ajuns la sfârșitul lecției. Glisorul este acum 100% gata!(). Funcționează în Firefox 5+, Safari 4+ și Google Chrome, precum și iPhone și iPad. De asemenea, puteți descărca arhiva ().
Mulțumiri lui Massimo Righi pentru imaginile sale.10. Concluzie Efectul este impresionant, dar, desigur, acest glisor nu este foarte versatil. De exemplu, pentru a adăuga mai multe imagini, trebuie să editați toate cadrele cheie. CSS3 are mult potențial, dar are limitele sale, iar uneori JavaScript este de preferat, în funcție de publicul țintă.
Acest glisor are câteva caracteristici interesante, cum ar fi pauză (la hover) și link-uri unice pentru imagini care permit utilizatorilor să interacționeze cu glisorul. Daca este necesar sprijin deplin toate browserele, atunci utilizarea CSS3 nu este posibilă, așa că este recomandat JavaScript. Din păcate, animația CSS3 are multe limitări. Pe acest moment, din cauza lipsei de flexibilitate, nu suntem în stare utilizare pe scară largă. Sper că acest articol vă încurajează să explorați CSS3 în continuare.
Simțiți-vă liber să vă împărtășiți gândurile în comentarii.
De la traducător:
Dacă găsiți erori de traducere, vă rugăm să vă dezabonați la mesaje personale. Mulțumesc.
Etichete: Adăugați etichete
În această lecție ne vom uita la un program pentru crearea automată prezentare de diapozitive folosind tehnologia HTML5.
Chiar dacă cunoștințele dvs. de javascript, css și html nu vă permit să creați singuri prezentari de diapozitive, acest lucru se poate face folosind programul Hislider. Îl puteți descărca de pe linkul - Hislider.com. Site-ul are disponibile atât o versiune gratuită, cât și o versiune plătită. Voi arăta toate acțiunile din versiune gratuită. Dacă vă place programul, îl puteți cumpăra versiunea platita. Am creat o prezentare de diapozitive de testare. Il puteti vizualiza folosind link-ul:
Descărcați Cum să creați prima prezentare de diapozitive folosind HisliderCând instalați și rulați programul, va apărea o fereastră de program în fața dvs., care vă va cere să începeți să creați o prezentare de diapozitive. Faceți clic pe butonul „Creați nou”:
Specificați lățimea (lățimea) și înălțimea (înălțimea) necesare pentru prezentarea de diapozitive:
Apoi trebuie să adăugați imagini. Acest lucru se poate face făcând clic pe linkul din centrul ferestrei sau pe butonul din bara de butoane:
Odată ce imaginile sunt adăugate, panoul Tranziții va deveni activ. Accesați fila „Transmisii”:
Și adăugați tranziții care vă plac:
Faceți clic pe „OK” și veți fi dus la editorul de prezentare de diapozitive. Noi contribuim modificările necesare. Există trei butoane în partea de sus:
Primul buton „REFRESH” este necesar pentru a reîmprospăta prezentarea după efectuarea modificărilor pentru a vedea aceste modificări.
Al doilea buton „PREVIEW” este necesar pentru a previzualiza prezentarea de diapozitive în browser.
Iar ultimul buton „PUBLICAȚI” este folosit pentru a crea o prezentare de diapozitive.
Suficient program interesant. Mai ales dacă nu ai timp sau abilități, atunci acest program al tău va reduce timpul necesar pentru a dezvolta un spectacol de sanie pentru site-ul tău. Sau puteți face un meniu, apoi editați codul după cum aveți nevoie și gata, prezentarea de diapozitive este gata.
Astăzi vă vom arăta cum să creați o prezentare de diapozitive pe ecran complet cu fundal folosind doar codul CSS. Vom folosi diverse efecte pentru tranzițiile între imagini și vom face și titlul să apară prin animație implementată în CSS.
Imaginile au fost trimise cu amabilitate de Mark Sebastian () și sunt distribuite sub acord de licențiere Creative Commons Attribution-ShareAlike 2.0 Generic.
Te rog noteaza asta acest efect va funcționa numai în browsere echipate cu .
Aspect
Aici vom folosi o listă neordonată pentru prezentarea de diapozitive și vom adăuga, de asemenea, un interval pentru fiecare imagine și o secțiune cu un titlu:
Intervalele vor fi elemente cu o imagine de fundal stabilită în prezentarea de diapozitive.
Cod CSS
Să începem cu o listă neordonată. Va fi reparat și îl vom întinde pentru a acoperi întregul viewport. De asemenea, folosim pseudo-elementul :after pentru a plasa textura în partea de sus a imaginii:
Cb-prezentare de diapozitive,
.cb-slideshow:după (
poziție: fixă;
latime: 100%;
inaltime: 100%;
sus: 0px;
stânga: 0px;
indicele z: 0;
}
.cb-slideshow:după (
continut: "";
fundal: url transparent(../images/pattern.png) se repetă stânga sus;
}
Vom folosi o textură cu puncte care se repetă, dar ați putea folosi și ceva de genul unei gradații ușor transparente implementate cu CSS.
Un Span care conține o imagine dintr-o prezentare de diapozitive va avea poziționare absolută, iar parametrii de lățime și înălțime vor fi setați la 100%. Din moment ce avem câteva înăuntru text suplimentar, îi vom face culoarea puțin transparentă, deoarece nu trebuie să-i acordăm atenție. Parametrul dimensiunea fundalului va fi setat să acopere - acest lucru ne va permite să fim siguri că imaginea de fundal acoperă întreaga zonă a elementului și, prin urmare, fereastra de vizualizare. Nivelul de densitate este setat la 0. În continuare ne vom schimba acest parametru prin animație:
Cb-slideshow li span (
latime: 100%;
inaltime: 100%;
poziție: absolută;
sus: 0px;
stânga: 0px;
culoare: transparent;
dimensiunea fundalului: coperta;
fundal-poziție: 50% 50%;
background-repeat: niciunul;
opacitate: 0;
indicele z: 0;
animație: imagineAnimation 36s linear infinit 0s;
}
Animația pentru fiecare interval va dura 36 de secunde și va rula număr infinit o singura data. Dar să ne uităm la detalii puțin mai târziu, dar deocamdată să proiectăm secțiunea cu un titlu:
Cb-slideshow li div (
indicele z: 1000;
poziție: absolută;
jos: 30px;
stânga: 0px;
latime: 100%;
text-align: centru;
opacitate: 0;
culoare: #fff;
animație: titleAnimation 36s liniar infinit 0s;
}
.cb-slideshow li div h3 (
font-family: „BebasNeueRegular”, „Arial Narrow”, Arial, sans-serif;
dimensiunea fontului: 240px;
umplutură: 0;
înălțimea liniei: 200px;
}
Animația pentru secțiunea de titlu va dura și 36 de secunde.
Acum vom defini imagini de fundal pentru toate intervalele, precum și o întârziere a animației, astfel încât fiecare imagine și titlu din prezentare să apară la 6 secunde după punctul anterior:
Cb-slideshow li:nth-child(1) span (
imagine de fundal: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span (
imagine de fundal: url(../images/2.jpg);
animație-întârziere: 6s;
}
.cb-slideshow li:nth-child(3) span (
imagine de fundal: url(../images/3.jpg);
animație-întârziere: 12s;
}
.cb-slideshow li:nth-child(4) span (
imagine de fundal: url(../images/4.jpg);
animație-întârziere: 18s;
}
.cb-slideshow li:nth-child(5) span (
imagine de fundal: url(../images/5.jpg);
animație-întârziere: 24s;
}
.cb-slideshow li:nth-child(6) span (
imagine de fundal: url(../images/6.jpg);
animație-întârziere: 30s;
}
Cb-slideshow li:nth-child(2) div (
animație-întârziere: 6s;
}
.cb-slideshow li:nth-child(3) div (
animație-întârziere: 12s;
}
.cb-slideshow li:nth-child(4) div (
animație-întârziere: 18s;
}
.cb-slideshow li:nth-child(5) div (
animație-întârziere: 24s;
}
.cb-slideshow li:nth-child(6) div (
animație-întârziere: 30s;
}
Acum să trecem la animația din prezentarea de diapozitive. Fiecare interval va avea o animație care va dura 36 de secunde. În timpul acestor 36 de secunde vom schimba nivelul densității de la 0 la 1 (acest lucru se va întâmpla la aproximativ 8% din progresul animației). Și atunci această valoare a nivelului de densitate va dura până la 17% din progres. La atingerea progresului de 25%, nivelul densității ar trebui să coboare din nou la 0 și să rămână așa până la sfârșit.
De ce exact aceste valori? Dorim ca fiecare imagine să fie vizibilă doar timp de 6 secunde și știm că la sfârșitul buclei dorim ca prima imagine să fie afișată din nou. Avem doar 6 imagini, motiv pentru care vom avea nevoie de 36 de secunde pentru întreaga buclă. Acum trebuie să distribuim nivelurile de densitate în consecință. Știind că a doua noastră imagine va începe să se schimbe la 6 secunde, trebuie să știm procentul pe care îl va lua această animație în cazul primei imagini. Împărțiți 6 la 36 și obținem 0,166... ceea ce înseamnă că pragul nostru de cadre va fi de 16%. Acum, din moment ce nu vrem ca imaginea să dispară tot timpul, definim următorul prag - între, care va fi jumătate din ceea ce am calculat, adică 8%. Aceasta este perioada în care trebuie să afișăm o imagine completă și ar trebui să înceapă să se estompeze la 17%, iar dispariția completă ar trebui să aibă loc la 25%.
@keyframes imageAnimation (
0% ( opacitate: 0; animație-funcție de sincronizare: ease-in; )
8% ( opacitate: 1; animație-funcție de sincronizare: ease-out; )
17% (opacitate: 1)
25% (opacitate: 0)
100% (opacitate: 0)
}
Același lucru trebuie făcut cu titlul, doar că trebuie să-l faci să dispară puțin mai repede. Prin urmare, nivelul densității ar trebui să ajungă la 0 deja la 19% din progres:
@keyframes titleAnimation (
0% (opacitate: 0)
8% (opacitate: 1)
17% (opacitate: 1)
19% (opacitate: 0)
100% (opacitate: 0)
}
În ceea ce privește browserele fără suport pentru animație, în un astfel de caz pur și simplu afișăm ultima imagine din prezentarea de diapozitive setând nivelul de densitate al intervalului la 1:
No-cssanimations .cb-slideshow li span(
opacitate: 1;
}
Clasa no-cssanimations este adăugată folosind Modernizr.
Acum să ne ocupăm și de dimensiunea fontului pentru titluri pentru acele momente în care dimensiunea ferestrei de vizualizare va fi mai mică. Folosim interogări media pentru a face fontul mai mic la o anumită lățime:
Ecran @media și (lățime maximă: 1140px) (
.cb-slideshow li div h3 (dimensiunea fontului: 140px)
}
Ecran @media și (lățime maximă: 600px) (
.cb-slideshow li div h3 (dimensiunea fontului: 80px)
}
Și asta este tot cu dezvoltarea unei versiuni simplificate a prezentării de diapozitive! Acum să vedem cum putem îmbunătăți tranzițiile.
Exemplu de animație alternativă
Acum ne putem juca cu niște animații pentru a afișa imaginea și titlurile.
Următoarea animație implică mărirea imaginii și apoi rotirea ușoară:
@keyframes imageAnimation (
0% {
opacitate: 0;
animație-funcție de sincronizare: ease-in;
}
8% {
opacitate: 1;
transforma: scară (1,05);
animație-funcție de sincronizare: ease-out;
}
17% {
opacitate: 1;
}
25% {
opacitate: 0;
transformare: scară (1.1) rotire (3deg);
}
100% (opacitate: 0)
}
Antetul va merge cu partea dreapta(va trebui să schimbăm alinierea textului titlului la dreapta) și apoi să-l estompăm, deplasându-ne la stânga:
@keyframes titleAnimation (
0% {
opacitate: 0;
transform: translateX(200px);
}
8% {
opacitate: 1;
transform: translateX(0px);
}
17% {
opacitate: 1;
transform: translateX(0px);
}
19% {
opacitate: 0;
transform: translateX(-400px);
}
25% (opacitate: 0)
100% (opacitate: 0)
}
Nu uitați că pot exista multe opțiuni, principalul lucru este să nu vă fie frică să experimentați!
Demo
Aici puteți vedea mai multe opțiuni pentru utilizarea animației.
Prin interzicere folosind JavaScript Nu vei putea vedea exemple interesante prezentare de diapozitive!
Slideshow pentru siteFiecare webmaster trebuie să poată crea și adăuga o prezentare de diapozitive pe un site web. Utilizarea glisoarelor este extrem de populară și pot fi găsite pe aproape orice resursă modernă.
Și asta nu este o coincidență!
**Notă. Spre deosebire de alte pagini din secțiunea jQuery, am scris scripturile necesare direct în codul HTML al acestei pagini.
În plus, ceea ce este foarte important(!), pentru mine funcționează dintr-o versiune diferită de jQuery, ulterioară celei pe care o folosesc aici.
Dacă folosesc versiunea jquery v.1.10.1.min acolo, atunci v.1.8.3.min aici
Cu toate acestea, mai multe despre asta și despre orice altceva, în ordine, mai departe.
Pregătirea unei prezentări de diapozitiveLucrarea de creare și instalare a unei prezentări de diapozitive pe un site web constă de obicei din 4 etape principale.
Pregătirea imaginilor pentru glisor1. Fotografii selectate. Principalul lucru este că trebuie să fie o marime. Trebuie să le măsurați cu atenție.
ÎN în acest caz,, a făcut poze gata făcute din materialele suplimentare atașate cursului de formare. Care? Despre asta aici: „Legături” (se deschide într-o fereastră nouă).
2. Desenați-o în Photoshop imagine grafică stil slider "TELEVIZOR". Poate nu este original, dar este foarte convenabil.
Principalul lucru este dimensiunea zonei de vizualizare de care aveți nevoie Un pic mai multîn lățime și înălțime decât desenele pregătite.
Imaginile sunt scrise în cod HTML exact în acel loc, unde vor fi afișate în viitor. Scripturile pot fi apoi scrise în orice loc convenabil. De obicei le las un spațiu chiar sub poze. Structura este mai logică.
Am plasat imaginile în sine în eticheta p, pentru care am stabilit lățimea și înălțimea în stilurile CSS și am specificat class="slideshow" . Și paragraful însuși cu ele a fost plasat într-o etichetă div comună, pe fundalul căreia am atârnat o imagine grafică pregătită a glisorului ( TELEVIZOR*). I s-a dat class="slider_fon" .
În plus, doar pentru el, pentru a descărca pagina, am conectat o foaie de stil externă și am făcut totul pentru poze în interiorul codului HTML
.
P.S.** Ultima acțiune NU este deloc necesar. Doar că e mai convenabil pentru mine. Structura paginii pare cumva mai logică.
ÎN Reguli CSS a specificat dimensiunea ferestrei pentru imaginile care vor apărea apoi în glisor (latime inaltime). Desigur, toate imaginile trebuie să aibă aceeași dimensiune.
Dacă se dorește, aș putea extinde parametrii CSS adăugând, să zicem, cadre, fundal, padding și alte elemente. Cu toate acestea, cred că acest lucru ar fi inutil.
Dacă, totuși, doriți să faceți acest lucru, atunci indicați dimensiunile GENERALE, adică: imagine + TOATE set de indentări și margini.
Scripturi de conectareVă recomand să vizitați pagina de ajutor pe care am făcut-o pentru mine în timp ce învățam tehnologia jQuery. Vă va ajuta cu adevărat să vă dați seama.
Deschis pentru ea acces general: „SELECTARE în jQuery” (se deschide într-o fereastră nouă) .
Ca întotdeauna, am creat mai întâi un folder js pe site. Apoi am descărcat scripturile necesare pentru prezentarea de diapozitive (arhivă) și am despachetat-o în acest folder. Conținea două fișiere script: jquery-1.8.3.min.js core și pluginul jquery.cycle.all.min.js.
Pentru orice eventualitate, am adăugat și fișierul meu de control myscripts11.js la el. Totuși, aici nu mi-a fost de folos pentru lansarea și demonstrarea unui slide show. Dacă nu am verificat cu ei conexiunea corectă folderul creat.
Dar... ...să fie. Nu știi niciodată ce voi vrea să fac în viitor cu glisoarele plasate aici. Pe scurt vorbind, „...trenul nostru blindat este mereu pe margine”.
Mai departe. În interiorul etichetei... am inserat rânduri unde am notat căile către scripturi. Le am: , iar la plugin: .
Am comentat propriul meu fișier de control („de rezervă”).
Și ultimul lucru -
Cei care vizitează site-ul meu cu interpretul JavaScript dezactivat în browserul lor nu vor putea, desigur, să vizioneze prezentarea de diapozitive.
Ei vor vedea imaginile așa cum sunt scrise în codul HTML, de exemplu. într-o coloană, una după alta.
Le-am făcut o linie de avertizare și am introdus-o în etichetă... .
Poftim! Expunerea de diapozitive a fost creată. Rămâne doar să îi configurați parametrii: viteza de schimbare a imaginilor, modalitățile de afișare a acestora etc.
Setarea opțiunilor de prezentare de diapozitiveDupă cum am scris mai sus (în notă**), am scris scripturile necesare direct în codul HTML al acestei pagini.
În prezentarea de diapozitive creată pe site-ul meu, am aplicat setările "Mod implicit".
În general, este ușor să setați tipuri diferite și interesante de tranziții între imagini prin schimbarea javascript-ului plasat în corpul paginii.
De exemplu, prin modificarea liniei sync: false la sync: true în script, puteți elimina spațiul atunci când schimbați imagini.
Notă importantă!
Diferitele versiuni de jQuery pot intra în conflict între ele dacă se află pe aceeași pagină.
Asigurați-vă (!) că verificați funcționarea pluginurilor cu versiunea instalată jQuery pentru că nu toate versiunile sunt compatibile!
Exemplu**
Pe alte pagini din secțiunea jQuery care folosesc biblioteca, versiunea jquery v.1.10.1.min . Deci, este mai modern decât v.1.8.3.min, din care corect(!) muncă glisoare de prezentare de diapozitive Aici.
Pluginul jquery.cycle.all.min.js cu acesta NU FUNCȚIONEAZĂ!!!
(verificat)
Totuși, nu fi supărat. Totul în mâinile tale!
În secțiunea „Util” a site-ului meu (se deschide într-o fereastră nouă) veți găsi testat(!) un set complet de scripturi necesare pentru a crea o astfel de prezentare de diapozitive pe site-ul dvs. (GRATIS, desigur!)
În această subsecțiune nu voi descrie atât de detaliat toți pașii pentru a crea o prezentare de diapozitive. Practic, sunt absolut la fel.
Chiar mai simplu. Nu este nevoie să desenezi imagine de fundal glisor în photoshop. Chiar separa masa Stiluri CSS nu va avea nevoie.
Daca vrei sa postezi diverse opțiuni prezentare de diapozitive unu pagina site-ului, așa cum am făcut aici ( vezi mai jos), specificați clase diferite pentru fiecare opțiune în linia de script $(" .prezentare de diapozitive").ciclu((
P.S.* Nu uitați să îl includeți în CSS dimensiunile ferestrelor pentru fiecare clasă, dacă, totuși, utilizați o foaie de stil. Nu aveam nevoie.
Priviți mai întâi desenele statice, pe care, în mod similar, le-am luat de la cursul de formare (care? Voi repeta linkul: „Link-uri”) și le-am postat aici pentru comparație.
Aici sunt ei. Viitorii participanți la cea de-a 7-a prezentare de diapozitive!
Urmărește prestația lor mai jos.
Vă voi arăta mai multe tipuri populare de glisoare. Le-am introdus în tabelul general pentru ușurință de vizualizare.
În stânga este numele efectului și o scurtă explicație, dacă este necesar. În dreapta este un exemplu.
| 1. Dizolvare („fade”): Similar cu exemplul de top cu motociclete. |
|
| 2. Amestecă: |
|
| 3. Zoom: |
|
| 4. Întoarceți de-a lungul axelor ("cortinaX" sau Y): Instalat "curtainX" aici. |
|
| 5. Restrângeți pe verticală („turnDown”): Aici se prăbușește, dar puteți seta alte tipuri de tranziții: întoarcere în sus, stânga, dreapta. |
|
| 6. Defilare („scrollDown”): Părtinire. Aici l-am instalat jos, dar pe lângă asta poți set: derulare în sus, stânga, dreapta. |
