Kaip padaryti slankiklį html su slinkimu. Įdomus ir tuo pačiu paprastas slankiklis naudojant gryną CSS3
Slankiklis be „JavaScript“ su puikiu skaidrių apvertimo efektu. Puikiai prisitaiko prie bet kokio įrenginio. Galimi šaltiniai.
Funkcija: CSS slankiklisGrynas CSS slankiklis yra paruoštas slankiklis su automatiniu skaidrių perjungimu be JS scenarijų pagalbos. Paprastai tokio tipo slankiklius vertina pradedantieji kūrėjai arba tais atvejais, kai nėra galimybės / poreikio įtraukti bibliotekas.
Žinoma, slankiklius kurti lengviau naudoti specialius įskiepius (jų yra daug, pavyzdžiui, jQuery). Tačiau šis slankiklis vilioja neįprastu skaidres vartymo efektu. Be to, su dideliu našumu.
Kaip naudoti šį pavyzdį savo svetainėjeIš aukščiau esančios nuorodos galite atsisiųsti archyvą, kuriame bus failas slider-css.html. Teoriškai viskas, ko reikia norint paleisti CSS slankiklį svetainėje, yra šiame faile. Štai jūsų veiksmų algoritmas:
1. Nukopijuokite visus slankiklio bloko stilius, jie yra žymoje
...
|
Atkreipkite dėmesį, kad container.untitled turi poziciją: absoliučias savybes ir gali tekti ją šiek tiek pritaikyti patiems.
2. Visos skaidrės suvyniotos
...
< div class = "untitled" > < div class = "untitled__slides" > . . . < / div > < / div > |
3. Nesunku suprasti pačios skaidrės HTML kodą.
„London Scout Unsplash“ profilis
< div class = "untitled__slide" > < div class = "untitled__slideBg" > < / div > < div class = "untitled__slideContent" > < span >Londonas< / span > < span >skautas< / span > < a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" >Atskleiskite profilį< / a > |
- Interneto svetainių kūrimas,
- CSS
- HTML
Amerikos niekam neatversiu, publikos nauju triuku nenustebinsiu ir nepūsiu galvos tiems, kurie plaukia CSS3 lyg nardytojas. Aš jums pasakysiu paprastą būdą sukurti slankiklį naudojant paprastas CSS3 funkcijas, nereikalaujant javascript.
1. Pagrindo išdėstymas Norėdami įgyvendinti slankiklį, mums reikia gana paprasto žymų rinkinio, kuris savo ruožtu bus atsakingas už slankiklio elementus.
Čia matome, kad bendrame "wrapper" bloke yra "slankiklio" blokas su 5 skaidrėmis, kurių viduje galite įdėti bet kokį html kodą, kuris bus skaidrėje. Prieš bendrą bloką yra radijo mygtukai, kurie vėliau bus paslėpti, kad būtų galima sukurti jiems savo skaidrės naršymo skydelį, su kuriuo mums padės „valdiklių“ bloko etiketės.
* ( paraštė: 0; užpildymas: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box ; ) korpusas (fono vaizdas: url (http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); )
Su fono dizainu ir bendraisiais stiliais viskas aišku.
Įvynioklis ( aukštis: 350 piks.; paraštė: 100 piks. automatinis 0; padėtis: santykinis; plotis: 700 piks.; ) .slankiklis ( fono spalva: #ddd; aukštis: paveldėti; perpildymas: paslėptas; padėtis: santykinis; plotis: paveldimas; -webkit- box-shadow: 0 0 20px rgba(0, 0, 0, .5); .5);
Bendrasis blokas ir blokas su slankikliu turi tokius pačius matmenis, kad būtų galima puikiai valdyti slankiklio padėtį puslapyje. Kol nėra skaidrių, laikinai nudažėme slankiklį šviesiai pilka spalva.
Įvynioklis > įvestis ( ekranas: nėra; )
Paslėpiame radijo mygtukus. Mums jų prireiks vėliau.
Dabartinis rezultatas yra:
3. Skaidrių projektavimas Čia parašysime bendruosius skaidrių ir kiekvienos skaidrės stilius atskirai:Skaidrės ( aukštis: paveldėti; padėtis: absoliutus; plotis: paveldėti; ) .slide1 ( background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.sjpglide) fonas; -vaizdas: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg) .slide3 (fono vaizdas: url (http://habrastorage.org/files/663) /6636b1d4f8e643d29eab8c192fc1cea3.jpg); vaizdas: url(http: //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg)
Visoms skaidrėms nurodėme absoliučią padėties nustatymą, kad galėtumėte žaisti su išvaizdos efektais. Skaidrių dydžiai paimti nuo paties slankiklio dydžio, kad nereikėtų jų rašyti keliose vietose.
Įpakavimo .valdikliai ( kairėje: 50 %; paraštės kairėje: -98 tšk.; padėtis: absoliučiai; ) . apvyniojimo etiketė ( žymeklis: rodyklė; ekranas: eilutinis blokas; aukštis: 8 piks.; paraštė: 25 piks. 12 piks. 0 16 piks.; padėtis: santykinė; plotis: 8px; -spindulys: 50% -o-border-spindulys: 50%;
Navigaciją darome klasikine. Kiekvienas mygtukas žymi sritį apskritimo pavidalu, kurioje, kai skaidrė bus aktyvi, tuščia sritis bus iš dalies nuspalvinta. Kol kas turime tokį rezultatą:
Apvyniojimo etiketė ( žymeklis: rodyklė; ekranas: eilutinis blokas; aukštis: 8 piks.; paraštė: 25 piks. 12 piks. 0 16 piks.; padėtis: santykinė; plotis: 8 piks.; -webkit-border-radius: 50%; -moz-border-radius: 50 %; -o-border-radius: 50% -webkit-perėjimas: background easy-in-out .5s; pakuotės etiketė:užveskite pelės žymeklį, #slide1:checked ~ .controls label:nth-of-of-type(1), #slide2: checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label: nth-of-type(3), #slide4:checked ~ .controls label:nth-of-of-type(4) , #slide5:checked ~ .controls label:nth-of-type(5) ( fonas: #ddd; )
Sukurtų naršymo mygtukų viduje pridedame sklandų dažymą. Taip pat pridedame sąlygas, kurioms esant aktyvus mygtukas ir mygtukas, ant kurio užvedamas žymeklis, bus tolygiai nuspalvinti. Mūsų pasirinktiniai radijo mygtukai yra paruošti:
Skaidrės ( aukštis: paveldima; neskaidrumas: 0; padėtis: absoliuti; plotis: paveldima; z indeksas: 0; -webkit-transform: skalė (1.5); -moz-transform: mastelis (1.5); -o-transform: mastelis (1.5 transformacija: mastelis (1.5) - webkit-transition: transformavimas į-išeinantis .5s, nepermatomumas į-išeinantis .5s - moz-perėjimas: transformuojamas į-išeinantis .5s; -į-išeiti .5s; -o-perėjimas: transformuoti lengvumas-į-išeiti, nepermatomumo perėjimas į-išeiti .5s, nepermatomumo lengvumas-išėjimas .5s; ). .slider > .slide5 ( neskaidrumas: 1; z indeksas: 1; -webkit-transform: scale (1); -moz-transform: scale (1); -o-transform: scale (1); transformacija: skalė ( 1);
Prie įprastų skaidrių stilių pridedame ypatybių, dėl kurių visos skaidrės tampa nematomos ir išnyksta fone. Taip pat šiek tiek padidinome skaidres, kol jos yra nematomos, kad slankiklis atrodytų įdomiai.
Rezultatą galite peržiūrėti čia.
Šioje pamokoje sukursime puikų CSS3 slankiklį. Tarp skaidrių bus naudojamas išblukimo efektas. Be to, galite naudoti kiekvieno vaizdo aprašymą. Informacijai tvarkyti bus naudojamas netvarkingas sąrašas. Skaidrės automatiškai persijungs naudojant CSS3 animaciją.
HTML žymėjimasHTML žymėjimas yra labai paprastas. Pavyzdyje yra keturios skaidrės. Kiekvienas iš jų susideda iš vaizdo (kaip fono) ir aprašo teksto div elemente. Labai paprasta įdėti papildomų skaidres.
Aprašymas Nr. 1
Aprašymas Nr. 2
Aprašymas Nr. 3
Aprašymas Nr. 4
Slankiklis naudoja CSS3 animacijas anim_slides ir anim_titles . Pirmasis naudojamas atskiroms skaidrėms, antrasis - aprašo tekstui. Taip pat keičiasi aprašymo padėtis ir skaidrumas.
/* Slankiklis */ .slides ( aukštis: 300 pikselių; paraštė: 50 pikselių automatinis; perpildymas: paslėptas; padėtis: santykinis; plotis: 900 pikselių; ) .slides ul ( sąrašo stilius: nėra; padėtis: santykinis; ) /* Animacijos kadrai # anim_slides */ @-webkit-keyframes anim_slides ( 0 % ( neskaidrumas: 0; ) 6 % ( neskaidrumas: 1; ) 24 % ( neskaidrumas: 1; ) 30 % ( neskaidrumas: 0; ) 100 % ( neskaidrumas: 0; ) ) @-moz-keyframes anim_slides ( 0% ( neskaidrumas: 0; ) 6% ( neskaidrumas: 1; ) 24% ( neskaidrumas: 1; ) 30% ( neskaidrumas: 0; ) 100% ( neskaidrumas: 0; ) ) . skaidrės ul li ( neskaidrumas: 0; padėtis: absoliutus; viršuje: 0; /* css3 animacija */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: - Webkit-animation-iteration: begalinis 24.0s; -moz-animation-time-function: linijinis; 0s; -moz-animacijos laiko funkcija: linijinė; -moz-animation-iteration-count: begalinis; -moz-animacijos kryptis: normali; -moz-animacijos delsa: 0; -moz-animation-play-state: veikia; -moz-animation-fill-mode: pirmyn; )
Nemokamų HTML ir CSS slankiklio kodų pavyzdžių rinkinys: kortelė, palyginimas, viso ekrano, reaguoja, paprasta ir kt. 2018 m. birželio mėn. kolekcijos atnaujinimas. 7 nauji daiktai.
Turinys susiję straipsniai🔥 Visi nauji CSS slankikliai šiame vaizdo įraše (2019 m.)
Apie kodąĮdiegimo ekranų rinkinys HTML/CSS/JS. Asmeninis eksperimentas su PNG piktogramų sluoksniavimu, CSS3 perėjimais ir „flexbox“.
HTML, CSS ir JavaScript informacijos kortelių slankiklis.
Sukūrė Andy Tran
2015 m. lapkričio 23 d
Nuotraukų slankiklis, veikiantis stalinių kompiuterių ir mobiliųjų įrenginių naršyklėse.
Pagaminta Tarono
2014 m. rugsėjo 29 d
Apie kodą Paprastas ir švarus vaizdų palyginimo slankiklis, visiškai reaguojantis ir paruoštas lietimui su CSS ir jQuery.
Apie kodą Slankiklis prieš ir po su tik html ir css.
Apie kodą Žaisti su nauja idėja naudojant mano dviejų sluoksnių prieš / po vaizdo slankiklį. Išlaikant jį minimaliai. Laikydami vanilę. Pamėgti jei naudinga :) 
Vanilla JS, minimalus, gražiai atrodo.
Pagaminta Huw
2017 m. liepos 3 d
Apie kodą „Padalinto ekrano“ slankiklio elementas su „JavaScript“.
Mažas eksperimentas, skirtas slankikliui prieš ir po SVG. Maskuojant tai gana paprasta. Kadangi visa tai yra SVG, vaizdai ir antraštės puikiai suderinami. „GreenSock“ įskiepiai „Draggable“ ir „ThrowProps“ buvo naudojami slankiklio valdymui.
Sukūrė Craig Roblewsky
2017 m. balandžio 17 d
Naudoja tinkintą diapazono įvestį slankikliui.
Pagaminta Dudley Storey
2016 m. spalio 14 d
Atsakingas vaizdų palyginimo slankiklis su HTML, CSS ir JavaScript.
Pagaminta Ege Görgülü
2016 m. rugpjūčio 3 d
HTML5, CSS3 ir JavaScript vaizdo įrašų prieš ir po palyginimo slankiklis.
Pagaminta Dudley Storey
2016 m. balandžio 24 d
Patogus tempiamas slankiklis, skirtas greitai palyginti 2 vaizdus, palaikomas CSS3 ir jQuery.
Pagaminta CodyHouse
2014 m. rugsėjo 15 d
Paprastas slankiklis, pagrįstas radijo įvestimis. 100% grynas HTML + CSS. Veikia ir su rodyklių klavišais.
Reaguoja: taip
Priklausomybės: -
Apie kodą Puikus perėjimo efektas viso ekrano slankikliui.
Apie kodą Horizontalus paralakso slankiklis su Swiper.js.
Apie kodą Reaguojantis sklandus 3D perspektyvos slankiklis judinant pelę.
Viso ekrano herojaus vaizdo slankiklis (perbraukimo skydelių tema) su HTML, CSS ir JavaScript.
Pagaminta Tobias Bogliolo
2017 m. birželio 25 d
Slankiklio sąveikos dalykas, naudojant greičio ir greičio efektus (UI Pack), kad pagerintų animaciją. Animacija suaktyvinama rodyklių klavišais, naršymo spustelėjimu arba slinkimo lizdu. Ši versija apima kraštines kaip sąveikos dalį.
Sukūrė Stephenas Scaffas
2017 m. gegužės 11 d
Paprastas minimalaus stiliaus slankiklis vaizdams rodyti. Dalis vaizdo pasirodo kiekvienoje skaidrėje.
Sukūrė Nathan Taylor
2017 m. sausio 22 d
Daiktas yra gana lengvai pritaikomas. Galite saugiai keisti šriftą, šrifto dydį, šrifto spalvą, animacijos greitį. Pirmoji naujos eilutės masyve JS raidė bus rodoma naujoje skaidrėje. Lengva sukurti (arba ištrinti) naują skaidrę: 1. JS masyve pridėkite naują miestą. 2. Pakeiskite skaidrių skaičiaus kintamąjį ir įdėkite naują vaizdą į scss sąrašą CSS.
Sukūrė Ruslanas Pivovarovas
2016 m. spalio 8 d
2016 m. spalio 7 d
Šis iškreiptas slankiklis su slinkimu, pagrįstas grynu JS ir CSS (be bibliotekų).
Sukūrė Viktoras Belozyorovas
2016 m. rugsėjo 3 d
Slankiklio animacija su „Pokemon“ dizainu.
Pagaminta Pham Mikun
2016 m. rugpjūčio 18 d
HTML, CSS ir JavaScritp slankiklis su sudėtinga animacija ir pusiau spalvotu kampuotu tekstu.
Sukūrė Ruslanas Pivovarovas
2016 m. liepos 13 d
Slankiklio paralakso efektas su HTML, CSS ir JavaScript.
Pagaminta Manuel Madeira
2016 m. birželio 28 d
HTML, CSS ir JavaScript slankiklis su bangavimo efektu.
Pagaminta Pedro Castro
2016 m. gegužės 21 d
Iškarpų kelią atskleidžiantis slankiklis su HTML, CSS ir JavaScript.
Pagamintas Nikolajus Talanovas
2016 m. gegužės 16 d
GSAP + Slick slankiklis su ankstesnių / kitų skaidrių peržiūra.
Pagaminta Karlo Videk
2016 m. balandžio 27 d
HTML, CSS ir JavaScript viso puslapio slankiklis.
Pagaminta Joseph Martucci
2016 m. vasario 28 d
Visas slankiklio prototipas su HTML, CSS ir JavaScript.
Pagaminta Gluber Sampaio
2016 m. sausio 6 d
Viso ekrano, tarsi reaguojanti, skaidrių demonstracija, animuota naudojant Greensocks TweenLite / Tweenmax.
Pagaminta Ardeno
2015 m. gruodžio 12 d
2015 m. gruodžio 5 d
Viso ekrano slankiklis (GSAP laiko juosta) Nr. 1 su HTML, CSS ir JavaScript.
Pagaminta Diaco M.Lotfollahi
2015 m. lapkričio 23 d
HTML ir CSS slankiklis su pasirinktiniais efektais.
Pagamintas Nikolajus Talanovas
2015 m. lapkričio 12 d
Viso ekrano vilkimo slankiklis su paralaksu su HTML, CSS ir JavaScript.
Pagamintas Nikolajus Talanovas
2015 m. lapkričio 12 d
Koncepcijos įrodymas, besisukantis slankiklis. Naudoja iškarpinį kelią ir daug matematikos.
Sukūrė Tyleris Johnsonas
2015 m. balandžio 16 d
Paprastas viso ekrano CSS ir jQuery slankiklis naudojant translateX ir translate3d sklandumą!
Pagaminta Juozapo
2014 m. rugpjūčio 19 d
Vaizdų neskaidrumo slankiklis HTML ir CSS.
Suderinamos naršyklės: Chrome, Edge, Firefox, Opera, Safari
Reaguoja: taip
Priklausomybės: -
Apie kodą Stacked Flexible Slides LayoutŠiame pavyzdyje iliustruojama, kaip sukurti viena ant kitos sudėtų skaidrių išdėstymą (ypač naudinga perėjimui išblukti). Tai pasiekiama nenustačius jų aukščio ir vengiant padėties: absoliuti; todėl jie yra visiškai lankstūs ir lengvai palaikomi įprastame puslapio sraute.
Suderinamos naršyklės: Chrome, Edge, Firefox, Opera, Safari
Reaguoja: taip
Priklausomybės: -
Apie kodą Responsive SliderAnimuotas reaguojantis slankiklis HTML, CSS ir JavaScript.
Suderinamos naršyklės: Chrome, Edge, Firefox, Opera, Safari
Reaguoja: taip
Priklausomybės: animate.css
Apie kodo slankiklį su maskuotu tekstuTik CSS slankiklis su užmaskuotu tekstu.
Suderinamos naršyklės: Chrome, Edge (dalinė), Firefox, Opera, Safari
Reaguoja: taip
Priklausomybės: -
Apie kodą Vaizdas ir turinys su paralakso efektu.
Apie kodąTik CSS skaidrių galerija.
Suderinamos naršyklės: Chrome, Edge, Firefox, Opera, Safari
Reaguoja: taip
Priklausomybės: -
Apie kodą Pure HTML/CSS SliderGrynas HTML/CSS slankiklis su apskrita SVG eigos juosta.
Suderinamos naršyklės: Chrome, Edge (dalinė), Firefox (dalinė), Opera, Safari
Reaguoja: taip
Priklausomybės: font-awesome.css
Apie kodą Eksperimentas, skirtas sukurti visiškai reaguojantį vertikalų slankiklį su miniatiūromis, naudojant tik CSS ir išlaikant vaizdų formato santykį.
Apie kodą Paprastas „Flexbox“ vaizdo slankiklis / karuselė, sukurta naudojant „JavaScript“.
Apie kodą Tai eksperimentas, kuris imituoja judesio suliejimo efektą kiekvieną kartą perjungiant skaidrę. Jis naudojasi SVG Gaussian Blur filtro ir kai kurių CSS pagrindinių kadrų animacijos pranašumais. Nors efektui tinkamai veikti nereikia jokio Javascript, šiame pavyzdyje Javascript naudojamas tik slankiklio funkcijai.
Apie kodą Puikus animacinis slankiklis su JS.
Apie kodą Tai eksperimentas, kaip SVG modeliai gali padėti mums sukurti maskuotus vaizdus tik CSS vaizdo slankikliui.
Kai kurių slankiklio perėjimų tyrinėjimas. Perbraukimo slankiklis su įjungta paralakso parinktimi. Čia dažniausiai žaidžiama su CSS filtrais.
Pagaminta Mirko Zorić
2017 m. birželio 12 d
Paprastas GSAP slankiklis su subtilia animacija.
Pagaminta Goran Vrban
2017 m. birželio 9 d
Slankiklio vartotojo sąsaja su HTML, CSS ir JavaScript.
Pagaminta Mergim Ujkani
2017 m. birželio 6 d
Slankiklis GSAP 2 versija.
Sukūrė Em An
2017 m. gegužės 4 d
Šiek tiek sudėtingas perėjimo slankiklis, naudojant paprastą pridėtinės klasės pasiūlymą. Turite šiek tiek sušvelninti laiką ir nuspręsti dėl geriausio būdo mobiliesiems (tiesiog sukrauti, pridėti liečiamų įvykių, padaryti vaizdus visą peržiūros sritį ir kt. Palaikomas slinkties ratukas (slinkties pakėlimas), naršymo mygtukai ir rodyklių klavišai. Taip pat gali padidinti turinio apvyniojimą kad vaizdai užpildytų peržiūros sritį ne animacine būsena, o tai taip pat yra puiku.
Sukūrė Stephenas Scaffas
2017 m. sausio 3 d
Naudojamas CSS kraštinės vaizdas ir klipo kelias, kad būtų sukurtas slankiklio animacijos efektas.
Pagaminta Emily Hayman
2016 m. gruodžio 31 d
Mažas slankiklis, pagamintas su „flexbox“. Šiek tiek reaguoja ir gali turėti fiksuotų elementų šalia slankiklio srities.
Pagaminta Roberto
2016 m. lapkričio 28 d
HTML, CSS drobės slankiklis.
Pagaminta Nvagelio
2016 m. spalio 29 d
HTML, CSS ir JavaScript 3D sklandus slankiklis.
Pagaminta Eduardo Allegrini
2016 m. spalio 19 d
HTML ir CSS keksiukų slankiklis su pabarstukais!
Pagaminta Jamie Coulter
2016 m. spalio 14 d
Pagaminta mario s maselli
2016 m. spalio 12 d
Naršyti UI animaciją Nr. 2 naudojant HTML, CSS ir JavaScript.
Pagaminta mario s maselli
2016 m. rugsėjo 22 d
Naršyti vartotojo sąsajos animaciją Nr. 3 naudojant HTML, CSS ir JavaScript.
Pagaminta mario s maselli
2016 m. rugsėjo 22 d
El. prekybos slankiklis v2.0 su HTML, CSS ir JavaScript.
Pagaminta Pedro Castro
2016 m. rugsėjo 17 d
HTML, CSS ir JavaScript švarus slankiklis su lenktu fonu.
Sukūrė Ruslanas Pivovarovas
2016 m. rugsėjo 13 d
1. vartotojo sąsajos animacijos tyrinėjimas naudojant HTML, CSS ir JavaScript.
Pagaminta mario s maselli
2016 m. rugsėjo 8 d
Mėgaukitės CSS galia: kiekvieną vidurinį vaizdą aukštyn ir žemyn bei puslapių slankiklį su šviesos dėžute.
Pagaminta Kseso
2016 m. rugpjūčio 15 d
Dviguba ekspozicija yra fotografavimo technika, kuri sujungia 2 skirtingus vaizdus į vieną vaizdą.
Pagaminta Misaki Nakano
2016 m. rugpjūčio 3 d
Slankiklis naudojant CSS3 nuosavybės klipą.
Pagaminta Pedro Castro
2016 m. gegužės 1 d
Atsakingas CSS slankiklis.
Pagaminta geekwen
2016 m. balandžio 19 d
Tai paprastas slankiklio eksperimentas, rodantis gražių reikšmių žodžius, kurių negalima tiesiogiai išversti. Dėmesys: elegantiška tipografija ir paprasti, bet viliojantys perėjimai.
Sukūrė Joe Harry
2016 m. balandžio 5 d
Animacijos idėja yra pakeisti CSS klipo kelio reikšmę ir taip sukurti maskavimo efektą.
Pagaminta Bhakti Al Akbar
2016 m. kovo 31 d
Taškų slankiklis su HTML, CSS ir JavaScript.
Pagaminta Derek Nguyen
2016 m. kovo 16 d
Prizmės efekto slankiklis su HTML, CSS ir JavaScript.
Pagaminta Viktoro
2016 m. kovo 12 d
Stumdoma fono galerija su HTML, CSS ir JavaScript.
Pagaminta Ron Gierlach
2015 m. lapkričio 30 d
HTML, CSS ir JavaScript slankiklio sprendimas.
Pagaminta Jürgen Genser
2015 m. rugsėjo 30 d
Produkto slankiklis, maitinamas Sequence.js. Sequence.js – reaguojanti CSS animacijos sistema, skirta kurti unikalius slankiklius, pristatymus, reklamjuostes ir kitas laipsniškai pagrįstas programas.
Sukūrė Ianas Lunnas
2015 m. rugsėjo 15 d
Mažas apskritimas pritaikytas slankikliui.
Pagaminta Bram de Haan
2015 m. rugpjūčio 11 d
Reaguojantis GTA V slankiklis su HTML, CSS ir JavaScript.
Pagaminta Eduardo Mayerio
2014 m. sausio 24 d
Tai tarsi slankiklis, bet dėl nežinomų priežasčių sukasi kubeliais.
Pagaminta Eriko Breverio
2013 m. gruodžio 4 d
Pagaminta Hugo DarbyBrown
2013 m. rugpjūčio 28 d
Vaizdo perdangos slankiklis su HTML, CSS ir vanilla JavaScript.
Pagaminta Yugam
2017 m. birželio 7 d
HTML ir CSS vaizdų slankiklis.
Pagaminta Joshua Hibbert
2016 m. birželio 16 d
Kelių ašių vaizdo slankiklis su HTML, CSS ir JavaScript.
Pagaminta Burak Can
2013 m. liepos 22 d
Kubo slankiklis, nedidelis eksperimentas su HTML5/CSS3 3d transformacijomis.
Kūrėjas Ilja K.
2013 m. birželio 26 d
Sveiki, mieli pradedantieji žiniatinklio valdytojai.
Čia yra paprasčiausias pasaulyje grynas CSS slankiklis.
Tokio slankiklio pranašumai yra lengvumas ir saugumas, taip pat tai, kad net pats pradedantysis žiniatinklio valdytojas gali jį sukurti ir įdiegti savo svetainėje.
Trūkumas yra tas, kad neįmanoma pakartoti ciklo naudojant vien CSS.
Bet jei manote, kad aštuonios nuotraukos slenka ilgiau nei 30 sekundžių, tai šio laiko visiškai pakanka, kad lankytojas galėtų peržiūrėti puslapį.
Ir jei slankiklis yra įdiegtas svetainės antraštėje, tada tikrai niekas į jį nežiūrės pusę minutės.
Paveikslėlių išvaizdos efektus galima keisti pagal savo skonį ir pagal CSS3 galimybes. Pažiūrėkime, kur ir kaip tai galima padaryti.
CSS slankiklis
/* Slankiklio blokas */
#slide (
/* Nustatyti santykinę padėtį */
padėtis: santykinė;
/*Bloko dydis ir rėmelis*/
plotis: 400 pikselių;
aukštis: 200 pikselių;
kraštinė : 2px solid #333 ;
kraštinės spindulys: 5 pikseliai;
}
/* 7 vaizdų grupės parinkiklis */
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7 (
/* Padėtis absoliučiai bloko atžvilgiu */
padėtis: absoliuti;
/* Padarykite juos visiškai skaidrius */
neskaidrumas: 0;
plotis: 400 pikselių;
aukštis: 200 pikselių;
}
/* Prijunkite animaciją prie pirmosios nuotraukos */
.image1 (
animacija : vieno vaizdo 8s 1s lengvas alternatyvus ;
}
/* Vėlesnių vaizdų animacija atliekama su pradžios delsa, reikalinga ankstesnių vaizdų slinkimui */
.image2 (
animacija: dviejų vaizdų 8s 5s lengva alternatyva;
}
.image3 (
animacija: trijų vaizdų 8s 10s lengvas alternatyvus ;
}
.image4 (
animacija: keturių vaizdų 8s 14s lengvas alternatyvus ;
}
.image5 (
animacija: penkių vaizdų 8s 18s lengvas alternatyvus ;
}
.image6 (
animacija: šešių vaizdų 8s 22s lengvas alternatyvus ;
}
.image7 (
animacija: septynių vaizdų 8s 26s lengvas alternatyvus ;
}
/* Paskutinis vaizdas, kuris nėra skaidrus, lieka matomas po slinkimo */
.image8 (
padėtis: absoliuti;
plotis: 400 pikselių;
aukštis: 200 pikselių;
animacija : aštuonių vaizdų 34s lengvas alternatyvus ;
}
/* Animacijos pirmai nuotraukai */
@keyframes vienas vaizdas (
/* Nustatykite skaidrumo pakeitimą. Čia galite pridėti sukimąsi, judėjimą iš už bloko ribų arba atsiradimą iš centro (mastelis) */
0%
{
neskaidrumas: 1;
}
50%
{
neskaidrumas: 1;
}
100%
{
neskaidrumas: 0;
}
}
/* Animacija kitoms 6 nuotraukoms */
@keyframes dviejų vaizdų (
0%
{
neskaidrumas: 0;
}
50%
{
neskaidrumas: 1;
}
100%
{
neskaidrumas: 0;
}
}
@keyframes trijų vaizdų (
0%
{
neskaidrumas: 0;
}
50%
{
neskaidrumas: 1;
}
100%
{
neskaidrumas: 0;
}
}
@keyframes keturių vaizdų (
0%
{
neskaidrumas: 0;
}
50%
{
neskaidrumas: 1;
}
100%
{
neskaidrumas: 0;
}
}
@keyframes penkių vaizdų (
0%
{
neskaidrumas: 0;
}
50%
{
neskaidrumas: 1;
}
100%
{
neskaidrumas: 0;
}
}
@keyframes šešių vaizdų (
0%
{
neskaidrumas: 0;
}
50%
{
neskaidrumas: 1;
}
100%
{
neskaidrumas: 0;
}
}
@keyframes septynių vaizdų (
0%
{
neskaidrumas: 0;
}
50%
{
neskaidrumas: 1;
}
100%
{
neskaidrumas: 0;
}
}
/* Animacija aštuntam paveikslui */
@keyframes aštuonių vaizdų (
/* išlieka skaidrus, kol bus slinkti ankstesni */
0%
{
neskaidrumas: 0;
}
87%
{
neskaidrumas: 0;
}
/*Tampa matomas slankiklio pabaigoje */
100%
{
neskaidrumas: 1;
}
}
Ir tik tuo atveju, kad galėtumėte vėl slinkti slankikliu, galite pridėti šį kodą:
varCLN; įkelti = funkcija () (CLN = document.getElementById("slaid").cloneNode(3))
Tokiu atveju po slankikliu atsiras mygtukas, kurį galima pavadinti kaip nori ir suprojektuoti CSS.
P.S. Jei bandysite koreguoti nuotraukų rodymo @keyframes intervalus, karuselę galite padaryti nuolatinę.
Sugebėjau. Galite pažiūrėti čia. Tekstas reklamjuostėse slenkamas pagal animacijos ypatybes be scenarijaus.
Tiesa ta, kad man pavyko tai padaryti tik su trimis paveikslėliais.
P.P.S. Dabar šioje svetainėje po svetainės antrašte yra panašių reklamjuosčių.
Linkiu kūrybinės sėkmės.
Gali būti naudinga perskaityti:
- Kaip patikrinti interneto ping?;
- Kas yra mikroschemų rinkinys, šiaurinis ir pietinis tiltas, mikroschemų rinkinių tipai;
- MTS užsienyje: skambučių, SMS ir interneto galimybės, paslaugos ir kainos;
- Išlyginamas pelės mastelio keitimas gta 5;
- „Android“ žaidimo talpyklos įdiegimas;
- Belaidės ausinės su mikrofonu;
- To dar niekada nebuvo, ir čia vėl – viskas apie naująjį SSD Western Digital Ssd wd green 240gb apžvalgos;
- Kaip padaryti, kad nemokama internetinė paslauga atneštų pinigų Klientai nežino, kas yra pasikartojantys mokėjimai;