Slider adaptiv HTML5. Cum se face un cursor adaptiv pe CSS3? Slider adaptiv pe CSS3

Unul dintre moduri eficiente Atragerea atenției utilizatorilor de pe site-ul site-ului este crearea unei animații în mișcare. Elementele de animație ajută-ne mai clar să ne spună și să arate utilizatorilor despre produsul dvs. Ultima oară, panourile de călătorie au câștigat o mare popularitate, precum și o serie de alte efecte care apar atunci când sunt derulate sau apăsate în imagine. Ele sunt, de asemenea, cunoscute ca glisiere, caruseluri și panouri care pleacă. Acest articol discută crearea unui cursor de tip carusel adaptiv, cu un efect bun al contractului auto.

Astăzi, rețeaua conține sute de recenzii cu referințele la soluțiile gata făcute, cu toate acestea, cele mai multe dintre ele conțin numeroase funcții neutilizate care reduc semnificativ performanța cursorului, precum și încetinirea încărcării site-ului în ansamblu. Dezvoltatorii web profesioniști au căutat întotdeauna să creeze flexibil în configurare produse de software, cu un prag scăzut de biblioteci și pluginuri suplimentare. Acesta este motivul pentru care lucrarea scenariului nostru implică cerințe minime pentru organizarea unui astfel de cursor. Funcționalitatea de lucru vă permite să setați intervalul de comutare, viteza, precum și selecția unui diapozitiv specific. Mai jos este un rând de permanent, care reglează lucrarea cursorului în sine.

crondelist. - Viteza de comutare a diapozitivelor

Timeview. - Timpul arătat

Radioobut. - Butoanele sub diapozitiv, pentru navigare rapidă. Implicit, valoarea reală, dacă utilizați FALSE, butoanele vor dispărea.

Și acum să începem! Creați și deschideți fișierul index.htm.

În codul trimis, deoarece nu vedem nimic complicat, slider-folie. Determină. general Și liniile glisorului în mijlocul ecranului. Parametru active-diapozitiv. Setează dimensiunea și înălțimea imaginii în funcție de lungimea sa. ȘI slider. Afișează doar o imagine activă.

Acum creați și deschideți fișierul. stil.css. și plângând marcajul de care avem nevoie:

@Import URL ("https://fonts.googleapis.com/css?family\u003dopen+sans cooboto"); Corpul (culoarea: # 4f4f5a; font-fata: "roboto", sans-serif; font-dimensiune: 16px; padding: 0; margine: 0;) # Slider-folie (max-lățime: 800px; Margin: 0 Auto; margin-top: 80px; Selectare utilizator: Nici unul; -O-utilizator-Selectați: Nici unul ; Hatding: 0; -webit-tranziție: 1s;-tranziție: 1s; tranziție: 1s; -Webkit-Timing-Funcție: ușurință-out; -O-TIMING-Funcție: ușurință -OUT; FUNCȚIA TIMING-TIMING: ușurință;) 100%;) .Radio-buton (margine-top: 10px; Text-align: centru;) .Radio-dar .CTRL-SELECT (margine: 2px; Afișaj: Inline-bloc; lățime: 16px; înălțime: 16px; depășire : Ascuns, text-liniuță: -9999px; fundal: URL (RADIOBG.P Ng) centru de jos fără repetare; ) .Radio-dar .RTRL-SELECT: Hover (cursor: pointer; poziția de fundal: centru centru;) .Radio-dar . ; Z-Index: 3; Schițare: Nici unul! Nextbutton: Hover (opacitate: 1;)

În stilul de stil slider-folie. Propashite lăţime – lungime maxima Pozele tale.

În stilul de stil #Slider (lățime: Calc (100% * 4);) și .Slide (lățime: calc (100% / 4);) Specificați numărul de imagini din cursorul dvs. În exemplul nostru, sunt 4.

Dacă săgețile înainte / înapoi la vizibilitatea cursorului dvs. pot fi făcute invizibile și vor apărea când vă deplasați. Pentru a face acest lucru în parametri prewbut. și nextbut., Setați valoarea proprietății opacității 0.

Acum creați și deschideți fișierul nostru. slider.js.în care va exista un cod de cursor. Nu uitați să conectați biblioteca jQuery.

$ (Document) .RaDy \u003d 700; Var Timeview \u003d 5000; Var Radiobut \u003d Adevărat; Var Slidenum \u003d 1; Var Slidetime; Slidecount \u003d $ ("# Slider"). Lungime; Var Animslide \u003d Funcție (săgeată) (ClearTimeout (Slideme); dacă (arrow \u003d\u003d "următor") (dacă (Slidenum \u003d\u003d Slidecount) (Slidenum \u003d 1;) Altlea (Slidenum ++) TranslateWidth \u003d - $ ("# # Active-diapozitiv) .width () * (Slidenum - 1); $ ("# Slider"). CSS (("Transformare": "Traduceți (" + TranslateWidth + "Px, 0)"));) altfel dacă (arrow \u003d\u003d "prew") (dacă (Slidenum \u003d\u003d 1) (Slider \u003d Slidecount;) altceva (Sliderum- \u003d 1) TranslateWidth \u003d - $ ("# # diapozitivul activ"). Lățime () * (Slidenum - 1); $ ("#slider"). CSS (("Transformare": "Traduceți (" + TranslateWidth + "Px, 0)"));) altceva (SLIDENUM \u003d săgeată; TranslateWidth \u003d - $ ("# # Slide-diapozitiv"). Lățime () * (Slideenum - 1); $ ("# Slider"). CSS (("Transformare": "Traduceți (" + TranslateWidth + "Px, 0)"));) $ (". Ctrl-selection.activ") .Removeclass (" Activ "); $ (" Ctrl-Select "). Eq (Slidenum - 1) .Addclass (" activ ");) dacă (Radiobut) (vary $ linkarrow \u003d $ ("<>") .Prependto (" # Active-diapozitiv "); $ (" # Nextbutton "). Faceți clic pe (Funcție (); returnează fals;)) $ (" # prewbutton "). Faceți clic pe (Funcție () (" Prew "); Întoarce-te fals;))) var adderspan \u003d" ", $ (". Diapozitiv "). Fiecare (funcție (index) (Adderspan + \u003d" "+ index +""; }); $("

"+ Adderspan +"
") .Appendto (" # Slider-Wrap "); $ (" Ctrl-Select: primul "). AddClass (" Activ "); $ (" Ctrl-Select "). Faceți clic pe (Var Gotonum \u003d Parsefloat ($ (this) .Text ()); Animlide (Gotonum + 1);)); Var Pause \u003d False; Var Rotator \u003d Funcție () (dacă (pauză) (Slidetime \u003d Settimeout (Funcție ("(" Animslide (" Următorul ")), Timeview);)) $ (" # Slider-Wrap "). Hover (funcția (); pauză \u003d true;), funcția () (pauză \u003d falsă; rotator ();)); VAL click \u003d fals; var Prevx; $ (". diapozitiv"). Mousedown (Funcție (E) (click \u003d adevărat; prevx \u003d e.clientx;))); $ ("diapozitiv"). Mouseup (Funcție () (click \u003d falsă ;)); $ (Document) .mouseup (Funcție () (click \u003d false;)); $ (". diapozitiv"). Mousemove (Funcție (E) (dacă (e) True) (dacă (E.ClientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > Prevx) (Animslide); cleartimeout (slideme);) click \u003d false; )); $ (". Diapozitiv"). Hover (). CSS ("cursor", "pointer"); Rotator (); );

Funcţie animlide. Ia trei tipuri de valori: următoare, prew, valoare numerică. Următorul parametru comută următoarea diapozitive, prew returnează cea anterioară și valoarea numerică este o diapozitive specificate definitive selectate prin butoanele de diapozitive radio.

Sliderul prezentat au folosit imagini de la resursele web https://pixabay.com/.

Dacă trebuie să adăugați un glisor JQuery de înaltă calitate pe site-ul dvs., apoi în acest articol veți găsi o descriere a pluginurilor necesare. În ciuda faptului că JQuery a simplificat în mod semnificativ lucrul cu JavaScript. Mai avem nevoie de pluginuri pentru a accelera procesul de creare a unui design web.

Putem face schimbări la unele dintre aceste pluginuri și să creăm noi glisoare care să răspundă mult mai mult sarcinile site-ului nostru.

Pentru alte glisante, adăugați doar titluri, imagini și selectați efectele pentru schimbarea diapozitivelor care vin cu un cursor. Toate aceste pluginuri sunt însoțite de documentație detaliatăAdăugați astfel de efecte sau funcții noi, nu vor fi multă dificultate. Puteți chiar să schimbați declanșatoarele în funcție de evenimente, dacă sunteți un programator JQuery cu experiență.

Tendințele recente, cum ar fi designul adaptiv, sunt foarte importante pentru proiectele web, indiferent dacă implementați un plugin sau un script. Toate aceste elemente fac ca fiecare dintre aceste pluginuri să fie foarte flexibile. Tot ceea ce sa întâmplat în 2014 este inclus în această listă.

Imagini JQuery-glisiere

Jssor Slider receptiv.

Recent, am dat peste acest jquery funcțional și am putut convinge primul care să se asigure că el se ocupă foarte bine cu munca lui. Acesta conține posibilități nelimitate care pot fi extinse în detrimentul unui cod open sursă al cursorului:

  • Design adaptiv;
  • Mai mult de 15 setări;
  • Mai mult de 15 efecte ale schimbării imaginii;
  • Galerie de imagini, carusel, suport pentru dimensiunea ecranului complet;
  • Bannere rotative verticale, lista diapozitivelor;
  • Suport video.

Demo | Descarca

PGWSLider - Slider adaptiv JQuery / Zepto

Singura sarcină a acestui plugin este de a demonstra diapozitivele de imagini. Este foarte compactă, deoarece dimensiunea fișierelor JQuery este de numai 2,5 kb, ceea ce vă permite să o încărcați cu adevărat rapid:

  • Aspect adaptiv;
  • Optimizarea SEO;
  • Suport cu diferite browsere;
  • Tranziții simple de imagine;
  • Dimensiunea arhivării este de numai 2,5 kb.

Demo | Descarca

JQuery Vertical Știri Slider

Flexibil și util JQuery-Slider, conceput pentru resurse de știri cu o listă de publicații din partea stângă și încheierea imaginii din dreapta:

  • Design adaptiv;
  • Coloana verticală de comutare a știrilor;
  • Titluri extinse.

Demo | Descarca

Glisorul de perete.

Acest cursor nu conține jQuery, dar aș dori să o prezint, deoarece este foarte compact și vă permite să reduceți semnificativ timpul pentru descărcarea de pagini. Dați-mi voie să știu dacă vă place:

  • Aspect adaptiv;
  • Design simplu;
  • Diferite opțiuni pentru schimbarea diapozitivelor;
  • Codul minim JavaScript;
  • Dimensiunea de numai 3kb.

Demo | Descarca

Galeria Polaroid în stil plat

Galerie în stilul împrăștiat pe tabelul de documente cu un aspect flexibil și design frumos Trebuie să vă intereseze pe mulți dintre voi. Mai potrivit pentru tablete și afișaje mari:

  • Slider adaptiv;
  • Design plat;
  • Schimbare aleatorie a diapozitivelor;
  • Acces complet la codul sursă.

Demo | Descarca

Un cursor.

Demo | Descarca

Hislider - HTML5, JQuery și WordPress Glider Image

Hislider a introdus un nou plugin gratuit JQuery Slider, cu care puteți crea o varietate de imagini galerie cu tranziții fantastice:

  • Slider adaptiv;
  • Nu necesită cunoștințe despre programare;
  • Câteva șabloane și piei uimitoare;
  • Efecte de tranziție frumoase;
  • Suport pentru diferite platforme;
  • Compatibilitate cu WordPress, Joomla, Drupal;
  • Abilitatea de a afișa conținut de diferite tipuri: imagini, videoclipuri YouTube și Videa Videa;
  • Setare flexibilă;
  • Funcții suplimentare utile;
  • Volum nelimitat de conținut afișat.

Demo | descărcare

Wow slider.

Wow Slider este slider jquery adaptiv Imagini cu uimitoare efecte vizuale (domino, turn, blur, lovitură de stat și flash, plecare, blind-uri) și șabloane profesionale.

Wow Slider vine cu Expertul de instalare, care vă permite să creați glisante fantastice într-o chestiune de secunde fără a fi nevoie să înțelegeți codul și să editați imagini. De asemenea, disponibil pentru descărcarea versiunii plug-in-ului Joomla și WordPress:

  • Complet adaptabil;
  • Suport pentru toate browserele și toate tipurile de dispozitive;
  • Suport pentru dispozitivele senzoriale;
  • Instalare simplă pe WordPress;
  • Flexibilitate în configurație;
  • Seo-optimizat.

Demo | descărcare

Nivo Slider - Free JQuery-Plugin

Nivo Glider este cunoscut de întreaga lume ca cel mai frumos și ușor de utilizat glisor de imagine. Pluginul Nivo Glider este gratuit și este eliberat sub licența MIT:

  • JQuery 1.7 și mai sus;
  • Efecte de tranziție frumoase;
  • Simplă și flexibilă în configurație;
  • Compact și adaptabil;
  • Cod deschis;
  • Puternic și simplu;
  • Mai multe șabloane diferite;
  • Tăierea automată a imaginii.

Demo | descărcare

Simplu JQuery Slider cu documentație tehnică

Ideea a fost inspirată de glisoarele de mere în care mai multe elemente mici pot zbura cu diferite efecte de animație. Dezvoltatorii au încercat să încorporeze acest concept cu privire la cerințe minime Pentru a crea un simplu design al magazinului online, în care elementele "plecare" sunt diferite categorii:

  • Aspect adaptiv;
  • Design minimalist;
  • Diverse efecte ale pierderilor și schimbărilor de diapozitive.

Demo | descărcare

Glisorul de imagine JQuery de dimensiune completă

Un cursor foarte simplu care ocupă 100% din lățimea paginii și ajustarea la dimensiunea ecranelor dispozitivelor mobile. Funcționează cu tranziții CSS, iar imaginile "se potrivesc" cu animalele. Ancora poate fi înlocuită sau ștearsă dacă nu doriți să legați un link către imagine.

La instalare, glisorul se desfășoară la o lățime de ecran de 100%. De asemenea, poate reduce automat dimensiunea imaginilor diapozitive:

  • Jquery adaptive -slider;
  • Dimensiune completă;
  • Design minimalist.

Demo | descărcare

Slider de conținut elastic + au

Slidenerul de conținut elastic reglează automat lățimea și înălțimea în funcție de dimensiunea elementului părinte. Acesta este un simplu glisor JQuery. Se compune dintr-o zonă de diapozitive deasupra și panourile tab-ului de navigare din partea de jos. Glisorul reglează lățimea și înălțimea în funcție de dimensiunea containerului-mamă.

Când vizualizați pe ecranele mici în diagonală, filele de navigare sunt transformate în pictograme mici:

  • Design adaptiv;
  • Derulați cu un clic pe mouse.

Demo | descărcare

GRATUIT GRATUIT 3D STACK

Slider experimental, imagini care se plimba în 3D. Două stive seamănă cu stivele de hârtie, din care derulează imaginea este afișată în centrul cursorului:

  • Design adaptiv;
  • Flip-transformare;
  • Efecte 3D.

Demo | descărcare

FullScreen Slast Slider bazat pe JQuery și CSS3 + Manual

Din manual, veți învăța cum să creați un cursor cu un punct culcător: ideea este de a "tăia" și de a afișa diapozitivul curent în acest formular, în timp ce deschideți următoarea sau imaginea anterioară. Folosind JQuery și CSS - animație, putem crea efecte de tranziție unice:

  • Design adaptiv;
  • Tranziția divizată;
  • Slider complet.

Demo | descărcare

Unislider - Slider JQuery foarte mic

Nu există burdufuri și marcaje inutile, dimensiune mai mică de 3kb. Utilizați orice cod HTML pentru diapozitive, extindeți-l cu folosind CSS. . Toate legate de nevăzute sunt situate pe GitHub:

  • Suport pentru diferite browsere;
  • Suport pentru tastatură;
  • Ajustarea înălțimii;
  • Design adaptiv;
  • Suport pentru intrarea senzorială.

Demo | Descarca

Diapozitive minime responsabile

Pluginul simplu și compact ( dimensiunea de numai 1 kb), care creează un glisor adaptiv folosind elemente din interiorul recipientului. RăspunsuriLides.js Lucrări S. cantitate mare Browsere, inclusiv toate versiunile de IE de la IE6 și mai sus:

  • Complet adaptabil;
  • Dimensiune 1 KB;
  • CSS3 tranziții cu posibilitatea de pornire prin JavaScript;
  • MARKUP SIMPLU utilizând o listă marcată;
  • Abilitatea de a configura efectele tranzițiilor și o durată de vizualizare a unui singur diapozitiv;
  • Sprijină capacitatea de a crea mai multe slideshow-uri;
  • Defilarea automată și a mâinilor.

Demo | descărcare

Camera - Glisorul gratuit JQuery

Camera este un plugin cu o multitudine de efecte de tranziție, un aspect adaptiv. Simplu în configurație, susținut de dispozitive mobile:

  • Design complet adaptiv;
  • Semnături;
  • Abilitatea de a adăuga video;
  • 33 icoane de culori diferite.

Demo | descărcare

SlidesJs, plugin adaptiv jquery

SlidesJs este un plugin adaptiv pentru jQuery (1.7.1 și mai mult) cu suport pentru dispozitivele senzoriale și tranzițiile CSS3. Experimentați cu el, încercați mai multe exemple gata făcute care vă vor ajuta să vă dați seama cum să adăugați Slides-uri la proiectul dvs.:

  • Design adaptiv;
  • CSS3 -Produse;
  • Suport pentru dispozitivele senzoriale;
  • Simplu în configurare.

Demo | Descarca

BX JQuery Glisor.

Acesta este un glisor jquery adaptiv gratuit:

  • Complet adaptiv - ajustează la orice dispozitiv;
  • Schimbarea orizontală, verticală a diapozitivelor;
  • Diapozitivele pot conține imagini, video sau html -content;
  • Suport extins pentru dispozitivele senzoriale;
  • Utilizarea CSS-transformări pentru animația de diapozitive ( accelerarea hardware);
  • API-uri API și metode publice pe deplin;
  • Dimensiunea fișierului mic;
  • Ușor de implementat.

Demo | descărcare

FlexSlider 2.

Cel mai bun cursor adaptiv. O nouă versiune A fost finalizată pentru a crește viteza de muncă, compactitatea.

Demo | Descarca

Galleria - Galerie foto adaptivă bazată pe JavaScript

Galleria este utilizată pe milioane de site-uri pentru a crea o galerie de imagini în înaltă calitate. Numărul de recenzii pozitive despre munca ei pur și simplu:

  • Complet liber;
  • Modul de vizualizare cu ecran complet;
  • 100% adaptive;
  • Nu este necesară o experiență de programare;
  • Suportă iPhone, iPad și alte dispozitive touch;
  • Flickr, Vimeo, YouTube și mult mai mult;
  • Mai multe subiecte.

Demo | Descarca

Blueberry - Simplu adaptiv JQuery Image Slider

Vă prezint un glisor jquery de imagini, scris special pentru designul web adaptiv. Blueberry este un plugin experimental al unui cursor de imagine open source, care a fost scris în mod specific pentru a lucra cu șabloane adaptive.

4 noiembrie 2019 Înregistrarea a fost actualizată

Yury German

Sliders la Pure CSS + Bonus Slider

CSS Sliders au un avantaj peste glisiere pe JavaScript. Unul dintre aceste avantaje este viteza de descărcare. Nu numai că sunt utilizate imagini pentru glisoare. dimensiuni mari (Dacă nu există optimizare pentru diferite ecrane), este de asemenea cheltuit pentru descărcarea de scripturi de ceva timp. Dar în articol veți vedea numai glisoarele pe CSS pur.

Asta am găsit pe site pe subiectul glisierelor:

1. CSS3 Glisor imagine

Glisorul pe CSS, care utilizează butonul radio pentru navigare. Aceste bazine radio sunt sub glisante. De asemenea, în plus față de piscinele radio, navigația este efectuată utilizând shooter-ul din stânga și la dreapta. Pentru a urmări ce imagine este afișată acum - sunt utilizate școli Pseudo-școlare: verificate.

2. CSS3 Slider miniatural

Spre deosebire de glisorul trecut pe CSS, aici, în loc de bazinele radio din partea de jos, sunt miniaturile tuturor imaginilor, care sunt, de asemenea, convenabile atunci când creați galeria de imagini. Imaginile sunt înlocuite cu un fel de efect: dispar fără probleme în timp ce crește.

3. Galerie pe CSS

Dar acest cursor pe CSS este perfect pentru vânzarea de pagini. De regulă, mulți dezvoltatori web în dezvoltarea de împrumuturi (vânzarea de pagini) plasează un cursor la început, astfel încât, în primul ecran (fără derulare), vizitatorul a văzut imediat toate beneficiile pe care le este pe această pagină. În plus, acest cursor este adaptiv, care, de asemenea, vă place.

4. Glisorul pe CSS fără legături

Imediat vreau să observ că acest cursor nu utilizează link-uri! În mod implicit, în plus față de imaginea principală (diapozitiv), încă 2 diapozitive sunt vizibile. Ele sunt situate în spatele celei principale. Schimbarea diapozitivelor are loc în modul frumos: În primul rând, cele două diapozitive sunt mutate și diapozitivul devine centrul, care va deveni cel principal. Apoi, diapozitivul crește și plasat înainte de restul.

5. Slider adaptiv pe CSS3

Un alt glisor adaptiv al cărui control se bazează pe radiocoptere. Pentru a vedea cum se va uita acest cursor diferite dispozitiveaH - Puteți schimba independent fereastra browserului, fie pe pagina glisantă Există pictograme speciale de dispozitive diferite, făcând clic pe care veți vedea, va arăta un cursor pe computer, tabletă sau pe un smartphone.

*** Bonus Slider ***

În plus față de toate glisoarele, care sunt prezentate mai sus, vreau să vă mulțumesc cu alta. Acest cursor este perfect pentru crearea galeriei de imagini. Cuvintele nu explică ceea ce face, deci este mai bine să urmăriți totul pe videoclip:

Ieșire

Cu ajutorul glisoarelor, puteți proiecta frumos galerii de imagini, plasându-le mai compact, introduceți un cursor în primul ecran (parte a paginii care este vizibilă fără derulare) vânzarea unei pagini pentru a arăta imediat vizitatorilor principalele beneficii o sa primeasca. Puteți găsi în continuare multe lucruri în care puteți aplica glisiere, dar un lucru este clar exact - ele sunt benefice cu utilizarea corectă.

Puncte care au fost revizuite în articol.

Salutare tuturor. Slider foarte cool Vreau să vă prezint atenția. OOO ... Mă uit la tine complet uitat de mine. Da, da, am fost deja plecat, probabil timp de șase luni sau un an și absolut nu știu cum să se facă în fiecare zi pe articol (deși este complet real). Bine, bine, nu despre acest discurs acum. Glisorul este furnizat de Tympanus Codrops și funcționează pe HTML5, CSS3 și Tweenmax.js.

Glisorul nu se rotește la dreapta stânga și nu de sus în jos, dar în diagonală. Săgețile de navigație sunt situate în colțul din stânga sus și în dreapta jos. De asemenea, navigarea se efectuează prin apăsarea prevniilor din dreapta și spre stânga. Toată animația este foarte netedă și funcționează bine în toate browsere moderne. Fiecare element individual al cursorului are propria pagină care se deschide când presează. Pagina are o fotografie, titlu și text.

Sliderul este perfect pentru galerie, portofoliul artistului, fotograf, sculptor, pe scurt, orice persoană care este angajată în activități creative și are lucrările pe care dorește să le arate pe site. O galerie de pe site-ul muzeului, expoziția va arăta bine.

Conectarea galeriei

Conectați galeria nu va fi dificilă

Descărcați fișiere

Mai întâi trebuie doar să descărcați surse de pe site-ul meu pentru o legătură directă. Din arhivă trebuie să turnați în rădăcina site-ului dosarului IMG, CSS și JS

Conectați fișierele CSS și JS

Apoi conectați scripturile și stilurile. Stilurile sunt conectate prin adăugarea la etichetă Codul următor

și scriptează pagina la eticheta de închidere

Adăugați un cursor pe site

În primul rând, adăugați navigare în partea de sus a site-ului

și apoi glisorul în sine

Amintiri și gânduri.
1

Automatizare.

Râul de roam
2

Mașini.

Cuvinte arbitrare.
3

COEXISTENŢĂ

Singurul ghid este inima ta

Haunted Drift.
4

Bellamio.

Distracție diverge
5

Pășuni.

Speranțe și vise.
6

Focus

1

Automatizare.

Un copac trebuie să fie prietenul tău dacă îl vei picta

Lăsați acest lucru să se întâmple. Tocmai am lăsat acest flux din mintea noastră. Doar relaxați-vă și lăsați-l să curgă. Asa de usor. Să punem niște nori mici fericiți în lumea noastră. Este o imagine foarte rece, poate că trebuie să-mi iau haina. Este pe cale să mă înghețe la moarte. Aceasta va fi o peisaj fericită. Să mergem aici și să începem să vă distrați cel mai puțin puțin poate face atât de mult. Lucrați un lucru la un moment dat. Don "să te duci departe - avem destule timp. Puneți-vă sentimentele în ea, inima voastră, este lumea voastră. Acești copaci sunt atât de distractivi.
2

Mașini.

Acesta este probabil cel mai mare lucru care se întâmplă în viața mea

Nu ne încercăm să vă copiați un lucru pe care să-l copiați. Ne-am dus aici o tehnică, apoi vă lasă să pierdeți în lume. Acum, vom merge la puff acest nor, nu avem nimic decât copaci fericiți aici. Să facem asta din nou. Folosiți ceea ce vedeți, nu îl planificați. Să mergem aici și să începem să vă distrați cel mai puțin puțin poate face atât de mult. Lucrați un lucru la un moment dat. Don "să te duci departe - avem destule timp. Puneți-vă sentimentele în ea, inima voastră, este lumea voastră. Acești copaci sunt atât de distractivi.
3

COEXISTENŢĂ

Singurul ghid este inima ta

Să mergem aici și să începem să vă distrați cel mai puțin puțin poate face atât de mult. Lucrați un lucru la un moment dat. Don "să te duci departe - avem destule timp. Puneți-vă sentimentele în ea, în inima voastră, este lumea voastră. Acești copaci sunt atât de distractivi Aveți grijă de asta. Acum, să punem niște nori mici fericiți aici. Ce diavolul. O vopsea subțire se va lipi de o vopsea groasă. Mă voi amesteca puțin o culoare.
4

Bellamio.

Singura condiție prealabilă este că te face fericit

Vedea. Luăm colțul periei și lăsați-l să se joace din nou și înapoi. Acest lucru este neplanificat într-adevăr se întâmplă. Sunt un fel de softy, nu am putut trage Bambi, cu excepția camerei. Cred că sunt puțin ciudat. Îmi place să vorbesc cu copaci și animale. Asta e bine totuși; Am mai multă distracție decât majoritatea oamenilor. Noi vom juca cu nori astăzi. Nu știi că ai avut atât de multă putere? Puteți muta munții. Poți face orice. Să mergem aici și să începem să vă distrați cel mai puțin puțin poate face atât de mult. Lucrați un lucru la un moment dat. Don "să te duci departe - avem destule timp. Puneți-vă sentimentele în ea, inima voastră, este lumea voastră. Acești copaci sunt atât de distractivi.
5

Pășuni.

Să mergem aici distractiv și să începem să vă distrați

Atât de des, evităm apă curgătoare, iar apă curentă este o mulțime de distracție. Toată lumea va vedea lucrurile în mod diferit - și asta ar trebui să fie. Un copac puternic puternic are nevoie de rădăcini mari puternice. Steve dorește reflecții, așa că să-i dăm reflecții. Nu am comis meu Lucrați la un singur lucru la un moment dat. Nu te duce departe - avem mult timp. Puneți-vă sentimentele în ea, inima voastră, este lumea voastră. Acești copaci sunt atât de distractivi. Am început pe ele și am un timp greu de oprit.
6

Focus

Acest lucru este neplanificat într-adevăr se întâmplă

Dar nu suntem încă acolo, așa că nu trebuie să ne îngrijorăm. Acum, să punem niște nori mici fericiți aici. Ce diavolul. O vopsea subțire se va lipi de o vopsea groasă. Mă voi amesteca puțin. Vom folosi van dyke maro, roșu permanent și un pic de albastru prusac. Să mergem aici și să începem să vă distrați cel mai puțin puțin poate face atât de mult. Lucrați un lucru la un moment dat. Don "să te duci departe - avem destule timp. Puneți-vă sentimentele în ea, inima voastră, este lumea voastră. Acești copaci sunt atât de distractivi.

Asta e tot. Sliderul este gata! Noroc în locuri de muncă

Salutări la tine din nou pe blogul meu. Astăzi în CSS, datorită noilor selectori, a existat o oportunitate de a face un cursor fără scripturi. Deci, în acest articol, vă voi arăta cum să faceți un cursor adaptiv pe CSS3?

Planul lecției

Astăzi vă voi arăta foarte detaliat cum să vă creați propriul cursor fără scripturi, să-l adaptați la orice dispozitiv și să vă schimbați cu ușurință aspectul în viitor, precum și să adăugați diapozitive noi. Vom face doar 3 diapozitive care vor comuta manual când faceți clic pe butoane. Să începem!

Marcarea glisorului

În primul rând, este necesar să înțelegem ce va fi marcajul. În acest ecran puteți vedea exemplul meu de marcare, conform acesteia și voi lucra astăzi.
De asemenea, duplică toate acest cod, astfel încât să puteți copia și introduceți-vă.
În primul rând, trebuie să creați butoane de comutatoare de diapozitive. Deoarece diapozitivul va fi de trei, atunci același lucru are nevoie de butoane:

Fiecare primește un identificator propriu, unic și unul este selectat în mod implicit.

Ultima bucată de cod de care avem nevoie. Afișează semnăturile la butoane, dar de fapt le folosim pentru a ascunde butoanele implicite (butoanele radio nu sunt executate prin stiluri) și puneți aceste blocuri care pot fi emise în loc de ele. Aceștia vor servi ca butoane de comutare, iar pachetul cu butoanele radio se face printr-un atribut de formă specială.

Și acum toate acest cod trebuie să fie înfășurat într-un recipient comun. Lăsați-o să fie un bloc cu o clasă de înfășurare.

Începem să creăm un cursor - stilurile inițiale ale paginii

Deci, în primul rând, vom stabili stiluri comune care vor contribui la resetarea tuturor liniilor implicite și, în același timp, să se facă indicele și cadrele interne în lățimea elementelor. Acest lucru se face astfel:

* {
Marja: 0;
Padding: 0;
-Ems-box-box: border-cutie;
-Moz-cutia: Border-cutie;
- dimensionarea cutiei: border-cutie;
Dimensionarea casetei: Border-cutie;
}

Apropo, * - înseamnă toți selectorii. Adică, un selector universal și global.

Decorează recipientul. Este blocul în sine care conține toate cele 3 părți importante - butoane, diapozitive și semnături.

Înfășurați (
Înălțime: 350px;
Marja: 0 Auto;
Poziție: rudă;
Lățime: 600px;
}

Lățimea și înălțimea pe care o puteți expune OricineÎn funcție de dimensiunile dvs. vor fi fotografiile dvs. pentru diapozitive. Am decuplat fotografii în avans la o dimensiune de 600 la 350 de pixeli, prin urmare specifice astfel de dimensiuni. Marja: 0 Linii auto Containerul exact în centrul paginii și poziționarea relativă vă va permite să așezați cu exactitate butoanele din container mai târziu.

Desăvârșiți cursor și diapozitive

Inițial, aici sunt astfel de stiluri:

Slider (
Culoare de fundal: # 999;
Înălțime: moștenire;
Depășirea: ascunsă;
Poziție: rudă;
Lățime: moștenit;
}

Punctăm glisorul este aceeași lățime și înălțime, precum și un recipient comun. De asemenea, specificăm culoarea și poziționarea și proprietatea de supraîncărcare: ascunse reduce tot ceea ce nu se încadrează în bloc.

Următorul caz trebuie eliberat în sine:

Diapozitive (
Înălțime: moștenire;
Opacitate: 0;
Poziție: absolută;
Lățime: moștenit;
Z-Index: 0;
}
.Auto1 (Imagine de fundal: URL (BMW.JPG);)
.Auto2 (imagine de fundal: URL (audi.jpg);)
.Auto3 (imagine de fundal: URL (PORSHE.JPG);)

Indicați, de asemenea, lățimea și înălțimea ca diapozitivul. Valoarea moștenită vă permite să moșteniți valoarea blocului părinte. Folosind proprietățile lui Z-Index și Opacitate, vom face imaginile noastre invizibile. Mai jos, prescriem clar imagini de fundal.

Până acum nu vom vedea nimic, doar un fundal gri, deoarece imaginile noastre sunt ascunse.

Decorează butoanele de comutare

Acum trebuie să eliminați în schimb butoanele radio standard și să vă fixați semnăturile.

Înfășurați\u003e Intrare (
Afișaj: Nici unul;
}

Eliminăm butoanele radio.

Înfășurați .control (
Poziție: absolută;
Margin-stânga: -50px;
Stânga: 50%;
}

Cu ajutorul acestor stiluri, vom centra blocul cu butoanele din centru.

Înfășurați eticheta (
Cursor: pointer;
Afișaj: Inline-bloc;
Înălțime: 25px;
Marja: 10px;
Poziție: rudă;
Lățime: 25px;
Border: 2px gri solid;
Raza de frontieră: 30% / 10px;
}

Aceste stiluri fac un lucru foarte important - ne permit să emităm butoane. Trebuie să setați dimensiunea butoanelor, setați pentru ele tipul de caractere, indicatoare și cadru gri. De asemenea, puteți adăuga colțuri de rotunjire.

Acum avem trei butoane centrate sub diapozitive, este doar un cadru gri. Să facem astfel încât atunci când faceți clic pe butonul din el, au apărut o imagine, indicând faptul că butonul este activ în acest moment. Apropo, aceeași tehnică, numai cu casete de selectare, arăt în acest articol.

Deoarece vom schimba imaginile mașinii, am găsit o pictogramă de direcție în rețea, am redus-o până la dimensiunea de aproximativ 20 până la 20. Acum cazul este înțelept - Adăugați o imagine de fundal la buton dacă a fost clic.

# Punct1: verificat ~ .Control etichetă: nth-of-tip (1),
# Punct2: verificat ~ .Control etichetă: nth-of-tip (2),
# Point3: verificat ~ .Control etichetă: nth-of-tip (3) (
Fundal: URL (Wheel.png) Nu repetați 50% 50%;
}

Acest lucru se face cu astfel de selectori. Ce fac ei? În esență, acesta este un selector complex, o condiție întreagă este înregistrată în ea. Acesta este ceva similar programului. Aceasta denotă următoarele: Dacă este selectat butonul radio, atunci trebuie să aplicați stilul la semnătura care merge undeva în marcă. Acum, când faceți clic pe butoane, imaginea volanului apare în interior!

Cea mai importantă etapă este forțând comutarea!

De fapt, am plecat să facem destul de puțin. Anume, pentru a face în loc de zona gri din glisor, au apărut imagini cu mașini care ar fi mutat cu succes. Pentru a face acest lucru, trebuie să aplicați un selector mai complex:

# Punct1: verificat ~ .Slider\u003e .auto1,
# Punct2: verificat ~ .Slider\u003e .auto2,
# Punct3: verificat ~ .Slider\u003e .auto3 (
Opacitate: 1;
Z-Index: 1;
}

Ce se întâmplă? Acum, dacă încercați cursorul în acțiune, acesta va fi complet lucrat. Cu acești selectori, specificăm următoarele: Dacă butonul radio este apăsat, efectuați diapozitivul dorit care se află undeva pe codul HTML (alte butoane radio).

Astfel, când faceți clic pe primul buton, ne este prezentat o mașină BMW, când faceți clic pe al doilea - Audi, când faceți clic pe a treia - Porse. Și tot timpul când comutați, pictograma de direcție apare în acel buton, diapozitivul este activ.

Deci, am făcut un cursor. Rămâne să-l adapteze.

Adaptăm cursorul vizualizând dispozitivele mobile

În timp ce glisorul nostru are o lățime fixă \u200b\u200bde 600 de pixeli. În consecință, problemele vor începe să apară pe ecrane mai puțin decât această lățime. În special, va apărea bara de derulare orizontală. Pentru a evita acest lucru, avem un pic pentru a ajusta codul scris. Asta este ceea ce trebuie să schimbi:

  1. Pentru blocul de înfășurare, adică containerul principal nu este lățime, dar max-lățime: 600px. Acest lucru va permite recipientului să se micsoreze dacă fereastra devine mai mică în lățime.
  2. Slider (cursor) Este necesar să se înregistreze lățimea: 100%;
  3. Slidesh (diapozitive) nu schimbă nimic.

Modificările totale pot fi văzute în acest cod:

Înfășurați (
Max-lățime: 600px;
}
.Slider (
Lățime: 100%;
}

Mare, acum rămâne să înregistreze o pereche de solicitări media pentru a face un cursor complet adaptiv, precum și imagini de scară pentru ecrane noi. Experimental prin am aflat că imaginea de diapozitive începe să nu se potrivească pe ecran la aproximativ lățimea ferestrei în 600 de pixeli. Deci, despre acest complot și trebuie să faceți o schimbare în stiluri. Pentru a face acest lucru, scrieți prima solicitare media.

Apropo, am scris în detaliu despre interogările mass-media și despre aplicarea acestora în acest articol. Vă sfătuiesc să vă familiarizați cu el, care nu are nicio idee despre design adaptiv.

În consecință, la lățimea de 650 de pixeli și mai puțin totul a fost afișat bine, îți ofer o astfel de modificare a stilurilor:

Ecranul @Media și (max-lățime: 650px) (
. (
Max-lățime: 480px;
Înălțime: 280px;
}
.Slides (
Dimensiune de fundal: acoperire;
}
}

Lățimea glisorului în sine va scădea, înălțimea va scădea, de asemenea. Pentru slidele în sine, am prescris o proprietate care cântă imagini astfel încât să păstreze proporțiile lor complet plasate într-un cursor fără tăiere în același timp.

Excelent, acum puteți verifica și asigurați-vă că cu o lățime mai mică de 650 de pixeli, glisorul este transformat și arată bine, fără a tăia imaginea.

Ultimul punct este lățimea de aproximativ 400 de pixeli. Pe aceasta, imaginea noastră începe să nu loceze și trebuie să ia măsuri. Pentru a face acest lucru, voi scrie o altă solicitare de presă:

@Media ecran și (max-lățime: 400px) (
. (
Max-lățime: 320px;
Înălțime: 180px;
}
.Slides (
Dimensiune de fundal: acoperire;
}
}

La fel, reluați doar lățimea și înălțimea recipientului. Excelent, acum glisorul nostru este complet adaptabil! Chiar și pe telefon mobil Cu o lățime de 320 de pixeli, el va arăta grozav. Cu toate acestea, vedeți-vă:

Datorită cererilor media, imaginile sunt proporționale cu scăderea, menținând în același timp proporțiile lor.

Adăugați efecte de glisare atunci când tranzițiile

Ei bine, un bonus din acest articol puteți vedea o pereche de efecte care pot fi implementate atunci când locuiți pe blocuri. Deci, este suficient să alegeți pe oricare dintre ele și să scrieți diapozitive (.Slides) și când apare o imagine, anulați efectul efectului. Pentru a vedea rezultatul, trebuie să setați diapozitivele proprietății de tranziție, astfel încât tranzițiile să fie netede. Exemplu de efect:

Diapozitive (
Transformare: Rotire (50deg);
Tranziție: 1s;
}

Acum un selector corect, ceea ce face ca diapozitivul să fie vizibil, să înregistreze anularea transformării:

# Punct1: verificat ~ .Slider\u003e .auto1 (
Transformare: Nici unul;
}

Și așa să facă pentru toate diapozitivele. În consecință, inițial imaginea va fi rotită și va fi invizibilă și când apare, efectul unei întoarcere netedă la poziția inițială. În consecință, puteți veni cu efectele dvs. Ei bine, am făcut un cursor, am totul. Dacă aveți întrebări, așteptați în comentarii.

Supliment - Cum de a face acest lucru atunci când faceți clic pe diapozitiv, trecerea legată de link-ul de diapozitive?

Cu alte cuvinte, suntem doar imagini acum și cum să le facem ca să facă clicte. Pentru a face acest lucru, trebuie să aveți un cursor gata pe această lecție. Apoi, trebuie să găsiți o bucată în cod HTML care este responsabilă pentru diapozitive. Aici este în captura de ecran:

După cum puteți vedea, am introdus în interiorul primului și al doilea link de diapozitive. Deci, când faceți clic pe primul diapozitiv, va apărea o tranziție la Google atunci când faceți clic pe al doilea - pe Yandex. Vreau să rețineți că link-ul se va deschide în aceeași fereastră, adică pagina curentă cu glisorul va dispărea în acest caz. Dacă aveți nevoie să deschideți linkuri de la diapozitive într-o fereastră nouă, fiecare etichetă Trebuie să adăugați Țintă atribut. \u003d "_blank".

Dar nu este tot ce trebuie să faceți! Acum nu funcționează încă, astfel încât fotografiile să se facă clic, trebuie să adăugați la CSS, ceea ce:

Diapozitivul a (
Afișaj: bloc;
Lățime: 100%;
Înălțime: 100%;
}

Asta este, pentru toate diapozitivele, facem o legătură cu elementul bloc și ne îndreptăm spre ea lățimea și înălțimea de 100%, astfel încât să ocupe întregul spațiu al imaginii. Acum totul ar trebui să funcționeze, puteți verifica. Doar înlocuiți adresele din link-uri și puteți utiliza. Sper că am explicat cel mai clar posibil.

Ridicarea atenției dvs .: Cu toții vrem să postăm site-urile lor pe o găzduire fiabilă. Am analizat sute de hostings și am găsit cele mai bune - Hosttiq. În rețeaua sute feedback pozitiv Despre el, evaluarea medie a utilizatorilor - 4.8 out of 5. Fie site-urile dvs. să fie bine.

Articole similare