Gaur egun webean irudiak daude arreta erakargarri nagusi bihurtu dira era guztietako gaietarako hurbiltzen den erabiltzaileari. Argazkigintzatik, bidaietatik, produktuetatik edo edozein motatako eszenetatik abiatuta, irudiak dira elementu garrantzitsuenetako bat; beraz, efektu deigarria sortzeko gai bagara, argazki horrek gure webgunean erori den erabiltzailea atxikitzeko ahalmena izango du.
Efektu horietako asko webguneko bisitari batean lortzeko gai direnak dira. CSS efektuak, kasu batzuetan deigarriak direnak eta beste batzuetan sinpleagoak izateko helburua dutela, beti ere guztiok bilatzen duguna lortuz: erabiltzaileak adi egotea gure webguneak eskaintzen duen guztiari. Jarrai dezagun arreta erakartzen duten 33 CSS irudi efektuak zerrendatzen.
Index
- 1 Fluid Twisting Irudia 3D
- 2 3D pasatzearen efektua
- 3 CSS 3D panorama
- 4 Irudiak "okertu" ikuspegian
- 5 Persian veneziarrak
- 6 Irudi zatitua
- 7 Pasa ezazu irudi efektua
- 8 Ispilu efektua
- 9 Hausnarketa efektua duen irudia
- 10 Irudia okertu efektuan
- 11 Pasatzean lausotu efektua
- 12 Irudia pasatzean
- 13 Pasa ezazu efektua SVGn
- 14 Testutik irudira pasatzean
- 15 Atzeko planoko irudi baten zati agerian
- 16 Pasatzean animazioa
- 17 Jarraipenaren gaineko efektua
- 18 Irudiaren zoom-a
- 19 Zooma pasatzearen efektua
- 20 Lupa efektua
- 21 Ez dago JavaScript pasatzerik
- 22 CSS gainjartze efektua
- 23 Argazkiak egiteko Hovy
- 24 Irudi gainjartzea
- 25 Irudi efektuaren gainjartzea
- 26 Irudia gainjartzeko efektua
- 27 Pasa ezazu efektua ikonoen animazioarekin
- 28 Pasatu efektua azpitituluekin
- 29 3D pasatzearen norabidearen efektuak
- 30 Irudi eskala
- 31 iOS itzal efektua React-ekin
- 32 Shadow Style iOS 10
- 33 Irudiaren trantsizio efektua
- 34 Korritu irudiaren trantsizioa
- 35 Saguaren gurpilarekin irudia korrituz
Fluid Twisting Irudia 3D
Irudi efektu hau benetan harrigarria denean deskonposatu irudia 3D kubo batean bere bertikaltasunean biratzeko gai dena, efektu bisual handia lortzeko. CSS3D oinarritzat hartuta, zure webgunean inplementatzeko gai bazara, bisitaria aho zabalik geratuko da.
3D pasatzearen efektua
Saguaren erakuslea irudiaren gainean uzten dugunean beste efektu bisual bikaina da hau erori bera jota bezala. Animazio bikaina beste irudi efektu bikain baterako.
CSS 3D panorama
HTML eta CSS eskutik doaz a egiteko panorama efektu bikaina hiri bateko eraikin baten goialdetik begira egongo bagina bezala.
Irudiak "okertu" ikuspegian
Un ikusizko esperimentua webgune gisa helburu zehatz bat izan dezakeena.
Persian veneziarrak
Efektu bisual bikaina aldi bakoitzean utzi saguaren erakuslea irudiak ematen dituen bi kontrasteen artean aldatu dadin.
Irudi zatitua
Saguaren erakuslea irudiaren gainean kokatuz gero handitu egingo da primeran osatuta egon dadin.
Pasa ezazu irudi efektua
E-tik ateratzean sareta-efektua sortzen daSaguaren erakuslea puntu zehatz baten gainean iruditik.
Ispilu efektua
Argazkia ispilu efektua duten korrituak saguaren erakuslea eskuinetik ezkerrera irristatzen dugun bitartean eta alderantziz.
Hausnarketa efektua duen irudia
Bilatzen duen ekintza irudiaren isla efektua proiektatu CSS irudi efektu honetarako erabili duguna.
Irudia okertu efektuan
Iritsi daiteke pixka bat zorabiatu irudiaren aldeek efektu bikoitz oso deigarria nola sortzen duten ikustean.
Pasatzean lausotu efektua
Erakuslea irudian zehar mugitzen dugun bitartean, lausotze efektua sortzen du hori segundo batzuetan desagertzen da.
Irudia pasatzean
Efektu bat dago desplazamendua erakuslea jarri dugun momentu berean sagua irudiaren gainean.
Pasa ezazu efektua SVGn
Jarritako efektu bikaina ezkutatutako irudia estali zuen izenaren beraren azpian. Akabera bikaina eta ezin hobea irudien galeria sortzaile eta bitxia erakusteko.
Testutik irudira pasatzean
Testuak irudia erakusten du saguaren erakuslea animazio deigarriekin kokatzean itsu efektuarekin hori erditik irekitzen da.
Atzeko planoko irudi baten zati agerian
Eskuan bagenu bezala teleobjektibo baten gurutzea, atzeko irudiaren zati bat saguaren erakuslea mugitzean agerian geratzen da.
Pasatzean animazioa
Efektu bikaina, baina oso erraza da konposizioan. Zerbait bila bazabiltza sinplista eta minimalista, efektu horrek maitemindu egingo zaitu.
Jarraipenaren gaineko efektua
Beste efektu sinplea helburu zehatz baterako.
Irudiaren zoom-a
Hau da, zoom efektu tipikoa ziur zure webgunera joan nahi duzula.
Zooma pasatzearen efektua
Bezalako beste alternatiba bat zoom efektua erakuslea uzten dugunean sagua irudiaren gainean.
Lupa efektua
Bere izenak dioen bezala, saguaren erakusleak irudia itzuliko du handitzen duen lupan.
Ez dago JavaScript pasatzerik
Javascriptrik ez zoom efektu bat birsortu dezakezu irudia sareta aldakor batekin.
CSS gainjartze efektua
Un geruza baterako CSS efektu hutsa hori daukagun irudian muntatuta dago.
Argazkiak egiteko Hovy
Erabiltzaile elementuen CSS animazioen liburutegia duzu. Horiek guztiak estekan ikus ditzakezu ondoen egokitzen zaizuna lortzeko. Hainbat efektu dituzu aukeran kalitate handikoa.
Irudi gainjartzea
Kalitate handiko lineako animazioarekin, deigarriak diren geruzak agertzen dira. Zure gogoko bihur daitekeen beste bat.
Irudi efektuaren gainjartzea
-Ren beste efektu batekin itzuliko gara gainjarri HTML eta CSS bidez bertan, lerro zirkularrak dira protagonista.
Irudia gainjartzeko efektua
Web elementu desberdinetarako erabil daitekeen gainjartze efektu deigarria. Batekin sormen gutxi integra daiteke kartetan artikulu honetakoak bezala.
Pasa ezazu efektua ikonoen animazioarekin
Kalitate handikoa lehenengo aldaketetan kaskatuko zaituen ikonoen animazioarekin. Gai da ekarri testua indar handiz.
Pasatu efektua azpitituluekin
Pasatzearen beste efektu bikaina animazio oso leunarekin agertzen diren azpitituluak eta lortu.
3D pasatzearen norabidearen efektuak
Zerrenda osoan ikusiko duzun irudi efektu kitzikagarrienetako bat. The saguaren erakuslea «3D kuboaren» gida bihurtuko da.
Irudi eskala
Beste efektu sinple bat, baina oso ikusgarria loraldi handirik gabe.
iOS itzal efektua React-ekin
Un efektua zalaparta handirik gabe, baina oso konkretua sortzen duen itzal efektuan, badirudi "lurretik" altxatuko balitz bezala.
Shadow Style iOS 10
Saguaren erakusleak a du 'bultzada' efektua errealismo handia sortzen duen irudiaren gainean. Oso interesgarria.
Irudiaren trantsizio efektua
Un trantsizio efektu zoragarria bertan, irudia sareta sare batean deskonposatzen da. Efektua gertatzen den denbora eta gehiago kontrolatu dezakezu.
Korritu irudiaren trantsizioa
Un oso modan eta sormen trantsizio efektua zure webgunerako. Ez galdu hitzordua CSS honetan.
Saguaren gurpilarekin irudia korrituz
Beharko duzu ezarri ezazu saguaren gurpila erabiltzen duzun unean irudi batetik bestera aldatzeko trantsizioko animazio bikainarekin. Ikusgarria.
6 iruzkin, utzi zurea
Kaixo. Izugarri gustatu zaizkit argitaratutako efektuak. Kasualitatez jakingo duzu nola egiten den efektua erakuslea irudi baten gainean kokatzen duzunean eta behetik gora mugitzen den webguneen aurrebista bistaratzeko aproposa. Hona hemen esan nahi dudanaren adibide bat, «AZKEN WEBGUNEKO LANAK
»Selectawebs.com webgunetik
Thanks in advance
Orrialde eta argitalpen bikainak, oso erabilgarria izan zait, barruko aplikazioetarako atarira sartzeko panelerako efektu batzuk behar nituenetik. Mila esker ekarpen hauengatik.
Efektu bikainak. Autodidakta naiz, beti gustatu izan zait web garapenaren ideia, asko gustatuko litzaidake zure aholkuak nola hasi eta zer ordutan ikasten joan. agur
Kaixo, eskerrik asko zure edukiagatik. Ezagutu ezazu zure orria gaur. Harrigarria da. Irakurketek eta bertan egin daitezkeen kontsultek ez dute amaierarik. ;)
Kaixo Natalia! Pozik nago hemen Creativos Online-n egindako irakurketekin gozatzeagatik. Onenak!
Kaixo efektu onen zerrenda ikusgarria, oso ondo legoke wordpress-era elementorekin nola aplikatu ikustea