{"id":227966,"date":"2022-09-27T16:50:00","date_gmt":"2022-09-27T13:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227966"},"modified":"2022-11-09T03:22:52","modified_gmt":"2022-11-09T00:22:52","slug":"upeita-css-sivusiirtymiae-joita-voit-kaeyttaeae-jo-taenaeaen-verkkosivustollasi","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/upeita-css-sivusiirtymiae-joita-voit-kaeyttaeae-jo-taenaeaen-verkkosivustollasi\/","title":{"rendered":"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0"},"content":{"rendered":"\n<p>CSS-animaatioilla tarkoitetaan animaatioita, joita k\u00e4ytet\u00e4\u00e4n manipuloimaan ja korostamaan HTML-elementtej\u00e4 CSS:n avulla \u2013 eli v\u00e4h\u00e4n tai ei ollenkaan JavaScripti\u00e4, eik\u00e4 todellakaan tarvita Flashia.<\/p>\n<p>Kuten monet suunnittelijat tiet\u00e4v\u00e4t, JavaScriptin ja Flashin k\u00e4ytt\u00f6 animaatioissa voi olla tarpeettoman resursseja viev\u00e4\u00e4 ja Flashin tapauksessa ei kovin turvallista.<\/p>\n<p>CSS-sivusiirtym\u00e4t ovat animoituja siirtymi\u00e4 sivujen v\u00e4lill\u00e4, joita k\u00e4ytet\u00e4\u00e4n antamaan verkkosivustoille ylim\u00e4\u00e4r\u00e4ist\u00e4 kosketusta, joka erottaa ne huippuluokan ja hyv\u00e4n selaamisen arvoisena. Oikein k\u00e4ytettyn\u00e4 ne eiv\u00e4t ainoastaan \u200b\u200banna el\u00e4vyyden tunnetta, vaan my\u00f6s auttavat suuresti navigoinnissa.<\/p>\n<p>T\u00e4m\u00e4 wpDataTables-tiimimme (paras <a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress-taulukkolaajennus<\/a>) luoma artikkeli kattaa, mit\u00e4 sinun on tiedett\u00e4v\u00e4 CSS-sivujen siirroista ja niiden toiminnasta, sek\u00e4 luetellaan joitain parhaista, joita voit k\u00e4ytt\u00e4\u00e4 juuri nyt. Vierit\u00e4 alas saadaksesi lis\u00e4tietoja.<\/p>\n<h2>CSS-sivusiirtymien lis\u00e4\u00e4misen t\u00e4rkeys<\/h2>\n<p>Vaikka saattaa tuntua silt\u00e4, \u200b\u200bett\u00e4 <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/lisaeae-hienoja-javascript-tehosteita-verkkosivustollesi-animaatiokirjastojen-avulla\/\" title=\"animaatiolla\">animaatiolla<\/a> ei ole niin suurta v\u00e4li\u00e4 <a href=\"https:\/\/www.sliderrevolution.com\/design\/website-animation\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">animoitua verkkosivustoa<\/a> rakennettaessa \u2013 tai ainakaan niin paljon kuin sivuston responsiivuudella ja perusk\u00e4ytett\u00e4vyydell\u00e4 \u2013 totuus on, ett\u00e4 animaatiolla voi olla kaikki ero onnistuneen ja kiinnostavan v\u00e4lill\u00e4. paikka ja kokonaisporaus.<\/p>\n<p>Sivusiirtym\u00e4t ovat k\u00e4yt\u00e4nt\u00f6, joka j\u00e4\u00e4 usein huomiotta verkkosuunnittelussa, ja se on s\u00e4\u00e4li, kun ottaa huomioon niiden vaikuttavuuden. Ne voivat muuttaa verkkosivuston koko tunnelman ja <a href=\"https:\/\/www.browserlondon.com\/blog\/2016\/10\/03\/how-we-improve-user-experience-with-transitions\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vierailijoiden sen k\u00e4ytt\u00f6kokemuksen<\/a>.<\/p>\n<p>Monet suunnittelijat pyrkiv\u00e4t v\u00e4ltt\u00e4m\u00e4\u00e4n animaatioita, koska he uskovat olevansa resurssien sy\u00f6ji\u00e4, jotka vain raahaavat verkkosivustoa ja hidastavat sit\u00e4. N\u00e4in tapahtuu vain, jos animaatioita ei ole toteutettu oikein, ja t\u00e4ss\u00e4 CSS-sivusiirtym\u00e4t muuttavat peli\u00e4.<\/p>\n<p>Ne ovat luovia ja tehokkaita tapoja lis\u00e4t\u00e4 sujuvaa animaatiota verkkosivustollesi. CSS on tehokas ty\u00f6kalu, joka voi auttaa verkkosivustoa rakentamaan persoonallisuuttaan, ja alta l\u00f6yd\u00e4t luettelon esimerkeist\u00e4, joiden pit\u00e4isi innostaa sinua k\u00e4ytt\u00e4m\u00e4\u00e4n CSS-sivusiirtymi\u00e4 omassa sivustossasi:<\/p>\n<h2>Esimerkkej\u00e4 CSS-sivujen siirroista<\/h2>\n<h3>Viile\u00e4 asettelu hienoilla sivusiirtymill\u00e4 ja off-canvas-valikon kanssa<\/h3>\n<p><a href=\"https:\/\/codepen.io\/suez\/details\/ogYpva\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c4614be.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>T\u00e4m\u00e4n verkkosivun siirtym\u00e4asettelun on luonut NikolaiTalanov ja se n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 vain koko n\u00e4yt\u00f6ss\u00e4 suurella ty\u00f6p\u00f6yd\u00e4ll\u00e4. Alkuper\u00e4inen idea toteutettiin HTML5-kankaalla, mutta Nikolay on mukauttanut sen taitavasti CSS-versioon.<\/p>\n<p>CSS-sivujen siirtym\u00e4t n\u00e4ytt\u00e4v\u00e4t hienoilta, mutta haittapuoli on, ett\u00e4 k\u00e4ytt\u00e4j\u00e4t voivat kokea t\u00e4risevi\u00e4 tai katoavia lohkoja, jos sivustosi z-indeksiarvoja ei ole m\u00e4\u00e4ritetty oikein.<\/p>\n<h3><strong>folio.transitions<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/foliodot\/details\/MKNeKB\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c54dc1f.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Foliodot loi ja julkaisi t\u00e4m\u00e4n sivun siirtym\u00e4n, ja se on yksi markkinoiden suosikeista. Siin\u00e4 on valmis sivu ja osioiden siirtym\u00e4t, jotka ovat yksinkertaisesti kauniita. Ne n\u00e4ytt\u00e4isiv\u00e4t upeilta mill\u00e4 tahansa verkkosivustolla sen tyypist\u00e4 riippumatta.<\/p>\n<h3><strong>Sivutus ja asettelu leikatuilla taustadivill\u00e4<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/suez\/details\/bNdbww\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c6442d6.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Nikolai Talanov keksi yhden parhaista CSS-sivusiirtymist\u00e4, joita n\u00e4et siell\u00e4. Talanov teki t\u00e4m\u00e4n konseptin pit\u00e4en mieless\u00e4, ett\u00e4 monet ihmiset k\u00e4ytt\u00e4v\u00e4t n\u00e4pp\u00e4imist\u00f6ill\u00e4\u00e4n navigoimiseen sivustolla yksinkertaisesti napsauttamalla yl\u00f6s ja alas.<\/p>\n<p>Sivun siirrot toimivat hyvin t\u00e4ll\u00e4 tavalla, ja ne ovat my\u00f6s melko responsiivisia. My\u00f6s suorituskykyongelmia on kuitenkin. Sis\u00e4lt\u00f6 latautuu aluksi hitaammin, ja k\u00e4ytt\u00e4j\u00e4t voivat kohdata ongelmia avattaessa sivua, jolla on paljon sis\u00e4lt\u00f6\u00e4.<\/p>\n<h3><strong>Liukus\u00e4\u00e4timen siirtym\u00e4t<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/fluxus\/details\/rweVgp\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c748f91.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>MirkoZoric loi n\u00e4m\u00e4 CSS-sivusiirtym\u00e4t tutkimalla Swiper-tyyli\u00e4. H\u00e4n k\u00e4ytt\u00e4\u00e4 suosittua parallaksiefekti\u00e4 ja leikkii suodattimilla saadakseen h\u00e4mm\u00e4stytt\u00e4v\u00e4n efektin.<\/p>\n<h3><strong>Lollipop-siirtym\u00e4<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/jeffmccarthyesq\/details\/LEEKLZ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c84bf91.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Lollipop, kuten Jeff McCarthy kutsui sivunsa siirtymist\u00e4, on samanlainen kuin Android 5.0:n ulkoasu. Sivusiirtym\u00e4 j\u00e4ljittelee Android 5.0 Lollipopin laatikko\/kansio-animaatiota, joka k\u00e4ytt\u00e4\u00e4 py\u00f6re\u00e4\u00e4 tikkarimaista tehostetta.<\/p>\n<h3><strong>yhteydess\u00e4<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/hakimel\/details\/FAiKv\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874c93a719.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Kontekstin on luonut Hakim El Hattab, ja se on melko suoraviivaista \u2013 se on kontekstin muutos, joka korostaa, ett\u00e4 sivun konteksti on muuttunut. Olet luultavasti tottunut t\u00e4llaiseen siirtymiseen, jos olet k\u00e4ytt\u00e4nyt laitetta, jossa on iOS.<\/p>\n<h3><strong>Viile\u00e4 ulkoasu ja monimutkainen ketjutettava animaatio<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/suez\/details\/AXQaEg\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874ca4219b.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Toinen NikolayTelanovilta, t\u00e4m\u00e4 sivusiirtym\u00e4 perustuu <a href=\"https:\/\/dribbble.com\/shots\/2802024-Satellite-Website-Prototype\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">satelliittiverkkosivuston prototyyppiin<\/a> ja se on luotu lis\u00e4\u00e4m\u00e4ll\u00e4 2 luokkaa JavaScriptill\u00e4 ja yksinkertaisella osoittimella. T\u00e4m\u00e4 on demo-ominaisuus ja siin\u00e4 on ketjutusanimaatioita.<\/p>\n<p>Se on responsiivinen siirtym\u00e4, jota on my\u00f6s helppo yll\u00e4pit\u00e4\u00e4 SCSS:n suhteen.<\/p>\n<h3>Hei, tiesitk\u00f6, ett\u00e4 my\u00f6s data voi olla kaunista?<\/h3>\n<p><a href=\"https:\/\/wpdatatables.com\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wpDataTables<\/a> voi tehd\u00e4 sen n\u00e4in. On hyv\u00e4 syy, miksi se on suosituin WordPress-laajennus responsiivisten taulukoiden ja kaavioiden luomiseen.<\/p>\n<p><a href=\"https:\/\/wpdatatables.com\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874cb4224b.png\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Todellinen esimerkki wpDataTablesista luonnossa<\/p>\n<p>Ja on todella helppoa tehd\u00e4 jotain t\u00e4llaista:<\/p>\n<ol>\n<li>Annat taulukon tiedot<\/li>\n<li>M\u00e4\u00e4rit\u00e4 ja mukauta se<\/li>\n<li>Julkaise se viestiss\u00e4 tai sivulla<\/li>\n<\/ol>\n<p>Ja se ei ole vain kaunis, vaan my\u00f6s k\u00e4yt\u00e4nn\u00f6llinen. Voit tehd\u00e4 suuria taulukoita, joissa on <a href=\"https:\/\/wpdatatables.com\/documentation\/creating-wpdatatables\/creating-mysql-based-wpdatatables-with-server-side-processing\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jopa miljoonia rivej\u00e4<\/a>, tai voit k\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/wpdatatables.com\/documentation\/table-features\/advanced-filtering\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">edistyneit\u00e4 suodattimia ja hakua<\/a>, tai voit <a href=\"https:\/\/wpdatatables.com\/documentation\/front-end-editing\/creating-editable-tables\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tehd\u00e4 niist\u00e4 muokattavia<\/a>.<\/p>\n<p>&quot;Joo, mutta pid\u00e4n Excelist\u00e4 liikaa, eik\u00e4 verkkosivustoilla ole mit\u00e4\u00e4n sellaista.&quot; Kyll\u00e4, on. Voit k\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/wpdatatables.com\/documentation\/table-features\/conditional-formatting\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ehdollista muotoilua<\/a> kuten Exceliss\u00e4 tai Google Sheetsiss\u00e4.<\/p>\n<p>Sanoinko sinulle, ett\u00e4 voit my\u00f6s <a href=\"https:\/\/wpdatatables.com\/documentation\/wpdatacharts\/creating-charts-wordpress-wpdatachart-wizard\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">luoda kaavioita<\/a> tiedoillasi? Ja se on vain pieni osa. Sinulle on <a href=\"https:\/\/wpdatatables.com\/features\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tarjolla monia muita ominaisuuksia<\/a>.<\/p>\n<h3><strong>Uber-tyyppiset tekstisiirtym\u00e4t<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/nicolasjengler\/details\/YqraoL\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874cc68791.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Nicolas Engler loi n\u00e4m\u00e4 k\u00e4\u00e4nn\u00f6kset, jotka muistuttavat niit\u00e4, joita voit n\u00e4hd\u00e4 Uberissa. Ne siirtyv\u00e4t diasta toiseen eritt\u00e4in sujuvasti ja sopivat t\u00e4ydellisesti yksinkertaisiin k\u00e4ytt\u00f6liittymiin.<\/p>\n<h3><strong>Jaettu 3D-karuselli<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/paulnoble\/details\/yVyQxv\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874cd69ef9.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Kuten nimest\u00e4 voi p\u00e4\u00e4tell\u00e4, Paul Noble sai mielenkiintoisen idean, jossa k\u00e4ytet\u00e4\u00e4n karusellikuviota, mutta se perustuu jaettuun paneelin siirtymiseen puussa eri ulottuvuuksissa. T\u00e4m\u00e4 on ehdottomasti yksi eniten k\u00e4ytetyist\u00e4 CSS-sivusiirtymistyyleist\u00e4.<\/p>\n<h3><strong>Dummy Multi Layer Page Reveal Effect<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/mburakerman\/pen\/roJmaZ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874ce6b7ae.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Mehmet Burak Erman on t\u00e4m\u00e4n kauniin sivupaljastuksen luoja. Se rakennettiin monikerroksiseen tyyliin HTML:n, CSS:n ja JavaScriptin avulla. T\u00e4ll\u00e4 hetkell\u00e4 sivun siirto on yhteensopiva Chromen, Firefoxin, Operan ja Safarin kanssa.<\/p>\n<h3><strong>Tiles Page Transition (CSS)<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/firestar300\/pen\/zLKZVZ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874cf5707b.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Milan Ricoul loi t\u00e4m\u00e4n laattasivusiirtym\u00e4n CSS:n avulla ja se on todellakin saanut suurta tunnustusta. Milan loi sen k\u00e4ytt\u00e4m\u00e4ll\u00e4 klassista HTML-, CSS- ja JavaScript-yhdistelm\u00e4\u00e4, ja se on yhteensopiva useimpien selaimien kanssa, kuten Mehmet Ermanin.<\/p>\n<h3><strong>Artikkelin siirtym\u00e4sivu<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/Munamohamed94\/pen\/aEbaKN\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d05a415.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>T\u00e4m\u00e4 on yksi Munan luomista CSS-sivun siirtymist\u00e4. Se sai alun perin inspiraationsa ReAlign 2:sta Dribble-verkkosivustolla CSS:n avulla, mutta se perustuu my\u00f6s HTML:\u00e4\u00e4n ja JavaScriptiin. Verrattuna muihin Webin sivusiirtymiin, t\u00e4m\u00e4 on my\u00f6s yhteensopiva Microsoft Edgen kanssa.<\/p>\n<h3><strong>Yksinkertainen sivun siirto<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/ktsn\/pen\/wrxymV\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d14ec4f.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>T\u00e4st\u00e4 sivun siirrosta ei ole paljon sanottavaa \u2013 se on juuri sellainen kuin sen nimi on: yksinkertainen. Sen loi ktsn ja se perustuu HTML-Pug-, CSS\/SCSS- ja JavaScriptiin vue.js:n kanssa. Sinun kannattaa kokeilla sit\u00e4, jos etsit jotain yksinkertaista mutta vaikuttavaa.<\/p>\n<h3><strong>N\u00e4yt\u00e4 sis\u00e4ll\u00f6n animaatio (ja valikko)<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/tobiasglaus\/pen\/oZJdZY\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d2407ae.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Tobias Glaus on t\u00e4m\u00e4n yksinkertaisen sis\u00e4lt\u00f6- ja valikkoanimaatioiden luoja. Se perustuu yksinkertaiseen paljastavaan vaikutukseen, mutta se on niin tehokas kuin sen pit\u00e4\u00e4kin olla. Jos haluat vain perus-CSS-sivusiirtym\u00e4n tyylikk\u00e4\u00e4ll\u00e4 paljastamistyylill\u00e4, t\u00e4m\u00e4 on yksi parhaista vaihtoehdoistasi.<\/p>\n<h3><strong>Laajentuva korttisivun siirtym\u00e4tehoste<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/rachsmith\/pen\/PWxoLN\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d34b0db.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>T\u00e4m\u00e4 on koodinp\u00e4tk\u00e4, jota Rachel Smith edelleen ty\u00f6st\u00e4\u00e4, mutta siin\u00e4 on paljon potentiaalia. Se ei ole valmis k\u00e4ytett\u00e4v\u00e4ksi valmiina siirtym\u00e4n\u00e4, mutta sen luoja on tarjonnut sen testattavaksi. Valmistuttuaan siirtym\u00e4 on k\u00e4ytt\u00f6kelpoinen selaimen v\u00e4lill\u00e4 ja k\u00e4ytett\u00e4viss\u00e4 kaikilla alustoilla.<\/p>\n<h3><strong>Sivun siirtym\u00e4t<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/MergimUjkani\/pen\/QbdvxL\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d4630d7.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>T\u00e4m\u00e4 on MergimUjkanin projekti ja siirtym\u00e4 koostuu yksinkertaisesta n\u00e4yt\u00f6st\u00e4, jossa on painikkeita\/valikoita navigointia varten. Jos muistat, kuinka vanhat televisiot sammuivat kutistamalla n\u00e4yt\u00f6n kokoa ohueksi viivaksi, tied\u00e4t jo milt\u00e4 t\u00e4m\u00e4 siirtym\u00e4 n\u00e4ytt\u00e4\u00e4.<\/p>\n<p>Niiden, jotka tarvitsevat vintage-CSS-sivusiirtymi\u00e4, kannattaa kokeilla t\u00e4t\u00e4.<\/p>\n<h3><strong>Pikkukuvan siirtyminen koko n\u00e4yt\u00f6n sivulle<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/ste-vg\/pen\/NALWrj\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d56f6c7.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>T\u00e4m\u00e4 saumaton siirtyminen pikkukuvasta koko n\u00e4yt\u00f6n sivulle on ehdottoman v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4. Steve Gardner k\u00e4ytti CSS-animaatioita ja Angularia kokoamaan sen. K\u00e4ytt\u00e4m\u00e4ll\u00e4 sit\u00e4 voit laajentaa mink\u00e4 tahansa pikkukuvan t\u00e4ysikokoiseksi taustaksi.<\/p>\n<h3><strong>Sivun siirtymisen latausohjelma<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/ARS\/pen\/wavXgQ\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d69247e.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>ArsenZbidniakov kehitti t\u00e4m\u00e4n esilatauskonseptin, jota voidaan k\u00e4ytt\u00e4\u00e4 aina, kun avaat uuden sivun verkkosivustolla. Se koostuu SVG-ympyr\u00e4lataimesta, jolla on lis\u00e4tty morphing vaikutus.<\/p>\n<p>T\u00e4m\u00e4 CSS-sivun siirtyminen toimisi hyvin vision\u00e4\u00e4risill\u00e4 verkkosivustoilla, joilla on paljon multimediasis\u00e4lt\u00f6\u00e4.<\/p>\n<h3><strong>Yhden sivun navigointi CSS-valikko<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/hrtzt\/details\/NPZKRN\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d79a576.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Alberto Hartzet loi t\u00e4m\u00e4n yhden sivun navigointi- <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/css-mobiilivalikkoesimerkkejae-jotka-kannattaa-tarkistaa\/\" title=\"CSS-valikon\">CSS-valikon<\/a>, joka sis\u00e4lt\u00e4\u00e4 muutamia osioita ja puhtaita CSS-siirtymi\u00e4. Se sopii yksinkertaisemmille verkkosivustoille, portfolioille ja muille sivustoille, jotka toimivat hyvin yhden sivun suunnittelussa.<\/p>\n<h3><strong>Reagoi animoidut sivusiirtym\u00e4t<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/sdras\/details\/gWWQgb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d8a8d27.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Sarah Drasner loi pienen demon n\u00e4ille CSS-sivusiirtymille. H\u00e4n loi sen GreenSockin ja SVG:n avulla. Sivusiirtym\u00e4t Reactissa toimivat sujuvasti ja n\u00e4ytt\u00e4v\u00e4t samalla hyv\u00e4lt\u00e4, joten kokeile sit\u00e4.<\/p>\n<h3>Materiaalisuunnittelun siirtyminen<\/h3>\n<p><a href=\"https:\/\/codepen.io\/djmarland\/pen\/CxEbK\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874d9b29f2.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>T\u00e4m\u00e4n siirtym\u00e4n tyylin ja animaation on tehnyt kokonaan CSS:n David Marland. Se toimii sujuvasti ja sis\u00e4lt\u00e4\u00e4 JavaScripti\u00e4 luokkien lis\u00e4\u00e4miseksi. Siirtym\u00e4 voidaan keskeytt\u00e4\u00e4, kunnes sis\u00e4lt\u00f6 korvataan. T\u00e4m\u00e4 on kaksivaiheinen animaatio.<\/p>\n<h3>Pure CSS Yhden sivun pystysuuntainen navigointi<\/h3>\n<p><a href=\"https:\/\/codepen.io\/hrtzt\/details\/pgXMYb\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-181787-61e874dabdeeb.jpg\" alt=\"Upeita CSS-sivusiirtymi\u00e4, joita voit k\u00e4ytt\u00e4\u00e4 jo t\u00e4n\u00e4\u00e4n verkkosivustollasi\u00a0\" \/><\/a><\/p>\n<p>Viimeinen CSS-sivusiirtym\u00e4luettelomme, t\u00e4ll\u00e4 Alberto Hartzetin puhtaalla CSS-suunnassa siirtymisell\u00e4 on klassinen asettelu yksisivuisille verkkosivustoille. J\u00e4lleen kerran, siirtyminen on hyvin yksinkertainen, mutta lis\u00e4\u00e4 mukavaa silausta verkkosivustoon.<\/p>\n<h3>Lopettaa ajatukset n\u00e4ist\u00e4 CSS-sivun siirtymist\u00e4<\/h3>\n<p>T\u00e4ll\u00e4 alalla on paljon kilpailua pysy\u00e4kseen trendien mukana, joten ei ole ihme, miksi niinkin yksinkertaisen asian kuin sivunvaihdon p\u00e4\u00e4tt\u00e4minen on niin vaikeaa.<\/p>\n<p>CSS-sivusiirtym\u00e4t antavat sinulle helpon tavan animoida verkkosivustoasi ilman, ett\u00e4 se latautuu hitaasti. Lis\u00e4ksi se edist\u00e4\u00e4 tuoreempaa ilmett\u00e4 ja lis\u00e4\u00e4 ammattimaisuutta mille tahansa verkkosivustolle.<\/p>\n<p>CSS-sivujen siirrot ovat edenneet pitk\u00e4lle viimeisten parin vuoden aikana, ja k\u00e4ytt\u00e4jien tulisi hy\u00f6dynt\u00e4\u00e4 niit\u00e4 parantaakseen k\u00e4ytt\u00f6kokemustaan \u200b\u200bja pit\u00e4\u00e4kseen k\u00e4ytt\u00e4j\u00e4t tyytyv\u00e4isin\u00e4 klikkaamassa tai vieritt\u00e4\u00e4kseen ymp\u00e4riins\u00e4.<\/p>\n<p>Jos pidit t\u00e4m\u00e4n artikkelin lukemisesta CSS-sivusiirtymist\u00e4, sinun kannattaa tutustua t\u00e4h\u00e4n <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/css-tekstin-hehkutehosteet-haeikaeisevaet-ja-ilahduttavat-kaeyttaejiaesi\/\" title=\"CSS-tekstin hehkutehosteisiin\">CSS-tekstin hehkutehosteisiin<\/a>.<\/p>\n<p>Kirjoitimme my\u00f6s muutamista aiheeseen liittyvist\u00e4 aiheista, kuten <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/css-mobiilivalikkoesimerkkejae-jotka-kannattaa-tarkistaa\/\" title=\"CSS-mobiilivalikosta\">CSS-mobiilivalikosta<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/css-pohjaiset-html-hakukentaen-mallit-parantavat-sivustohakuasi\/\" title=\"HTML-hakukent\u00e4st\u00e4\">HTML-hakukent\u00e4st\u00e4<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/css-kuvagallerian-esimerkkejae-joita-voit-kaeyttaeae-sivustollasi\/\" title=\"CSS-kuvagalleriasta\">CSS-kuvagalleriasta<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/css-editorin-esimerkkejae-joita-sinun-tulisi-ehdottomasti-testata\/\" title=\"CSS-editorista\">CSS-editorista<\/a> ja <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/mahtavia-css-kuvahover-tehosteita-joita-voit-kaeyttaeae-verkkosivustollasi\/\" title=\"CSS-kuvan hover-tehosteista\">CSS-kuvan hover-tehosteista<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpdatatables.com\" class=\"external external_icon\">wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS-sivujen siirrot ovat edenneet pitk\u00e4lle parin viime vuoden aikana, ja k\u00e4ytt\u00e4jien tulisi hy\u00f6dynt\u00e4\u00e4 niit\u00e4 parantaakseen k\u00e4ytt\u00f6kokemustaan \u200b\u200bja pit\u00e4\u00e4kseen k\u00e4ytt\u00e4j\u00e4t onnellisina.<\/p>\n","protected":false},"author":1,"featured_media":181788,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[750,906,719,895,917,843,864],"tags":[1166],"class_list":["post-227966","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avoin-laehdekoodi","category-css-5","category-kehittaejae","category-koodi","category-muut","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/227966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=227966"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/227966\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/181788"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=227966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=227966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=227966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}