{"id":227372,"date":"2022-09-27T16:55:00","date_gmt":"2022-09-27T13:55:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227372"},"modified":"2022-11-09T00:09:10","modified_gmt":"2022-11-08T21:09:10","slug":"fantastiska-css-sidoevergaangar-som-du-kan-anvaenda-idag-paa-din-webbplats","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/fantastiska-css-sidoevergaangar-som-du-kan-anvaenda-idag-paa-din-webbplats\/","title":{"rendered":"Fantastiska CSS-sid\u00f6verg\u00e5ngar som du kan anv\u00e4nda idag p\u00e5 din webbplats\u00a0"},"content":{"rendered":"\n

CSS-animationer h\u00e4nvisar till de animationer som anv\u00e4nds f\u00f6r att manipulera och betona HTML-element med anv\u00e4ndning av CSS – dvs med lite eller inget JavaScript, och absolut inget behov av Flash.<\/p>\n

Som m\u00e5nga designers vet kan anv\u00e4ndningen av JavaScript och Flash f\u00f6r animationer vara on\u00f6digt resurskr\u00e4vande, och i fallet med Flash, inte s\u00e4rskilt s\u00e4ker.<\/p>\n

CSS-sid\u00f6verg\u00e5ngar \u00e4r animerade \u00f6verg\u00e5ngar mellan sidor som anv\u00e4nds f\u00f6r att ge webbplatser en extra touch som utm\u00e4rker dem som f\u00f6rstklassiga och v\u00e4rda en bra s\u00f6kning. Och n\u00e4r de till\u00e4mpas p\u00e5 r\u00e4tt s\u00e4tt kan de inte bara ge en k\u00e4nsla av livlighet utan ocks\u00e5 hj\u00e4lpa till mycket med navigeringen.<\/p>\n

Den h\u00e4r artikeln skapad av v\u00e5rt team p\u00e5 wpDataTables (det b\u00e4sta WordPress-tabellpluginet<\/a>) kommer att t\u00e4cka vad du beh\u00f6ver veta om CSS-sid\u00f6verg\u00e5ngar och hur de fungerar, samt lista n\u00e5gra av de b\u00e4sta du kan anv\u00e4nda just nu. Rulla ned f\u00f6r att l\u00e4ra dig mer.<\/p>\n

Vikten av att l\u00e4gga till CSS-sid\u00f6verg\u00e5ngar<\/h2>\n

\u00c4ven om det kan tyckas som att animation<\/a> inte spelar s\u00e5 stor roll n\u00e4r man bygger en animerad webbplats<\/a> \u2013 eller \u00e5tminstone inte s\u00e5 mycket som webbplatsens lyh\u00f6rdhet och grundl\u00e4ggande anv\u00e4ndbarhet \u2013 \u00e4r sanningen att animation kan g\u00f6ra hela skillnaden mellan en framg\u00e5ngsrik, engagerande plats och en total borrning.<\/p>\n

Sid\u00f6verg\u00e5ngar representerar en praxis som ofta f\u00f6rbises i webbdesign, och det \u00e4r synd med tanke p\u00e5 hur effektfulla de \u00e4r. De kan f\u00f6r\u00e4ndra hela k\u00e4nslan av en webbplats och upplevelsen som bes\u00f6karna har med den<\/a>.<\/p>\n

M\u00e5nga designers tenderar att undvika animationer eftersom de tror att de \u00e4r resurs\u00e4tare som bara kommer att dra ner webbplatsen och g\u00f6ra den l\u00e5ngsam. Det h\u00e4nder bara om animationer inte implementeras korrekt, och det \u00e4r h\u00e4r CSS-sid\u00f6verg\u00e5ngar f\u00f6r\u00e4ndrar spelet.<\/p>\n

De \u00e4r kreativa, effektiva s\u00e4tt att l\u00e4gga till smidiga animationer p\u00e5 din webbplats. CSS \u00e4r ett kraftfullt verktyg som kan hj\u00e4lpa en webbplats att bygga upp sin personlighet, och nedan hittar du en lista med exempel som b\u00f6r inspirera dig att anv\u00e4nda CSS-sid\u00f6verg\u00e5ngar f\u00f6r din egen webbplats:<\/p>\n

Exempel p\u00e5 CSS-sid\u00f6verg\u00e5ngar<\/h2>\n

Cool layout med snygga sid\u00f6verg\u00e5ngar och off-canvas-meny<\/h3>\n

\"Fantastiska<\/a><\/p>\n

Denna webbside\u00f6verg\u00e5ngslayout skapades av NikolayTalanov och den ser bara bra ut i helsk\u00e4rm p\u00e5 ett stort skrivbord. Den ursprungliga id\u00e9n implementerades i HTML5-canvas, men Nikolay har skickligt anpassat den till en CSS-version.<\/p>\n

CSS-sid\u00f6verg\u00e5ngarna ser bra ut, men nackdelen \u00e4r att anv\u00e4ndare kan uppleva vissa skakande eller f\u00f6rsvinnande block om din webbplats z-indexv\u00e4rden inte \u00e4r korrekt konfigurerade.<\/p>\n

folio.transitions<\/strong><\/h3>\n

\"Fantastiska<\/a><\/p>\n

Denna sid\u00f6verg\u00e5ng skapades och lanserades av Foliodot och det \u00e4r en av favoriterna p\u00e5 marknaden. Den har en out-of-the-box sida och avsnitts\u00f6verg\u00e5ngar som helt enkelt \u00e4r vackra. De skulle se fantastiska ut p\u00e5 vilken webbplats som helst, oavsett typ.<\/p>\n

Paginering & layout med klippta bakgrundsdiv:s<\/strong><\/h3>\n

\"Fantastiska<\/a><\/p>\n

Nikolai Talanov kom p\u00e5 en av de b\u00e4sta CSS-sid\u00f6verg\u00e5ngarna du kommer att se d\u00e4r ute. Talanov skapade detta koncept med tanke p\u00e5 att m\u00e5nga m\u00e4nniskor anv\u00e4nder sina tangentbord f\u00f6r att navigera p\u00e5 en webbplats genom att helt enkelt klicka upp och ner.<\/p>\n

Sid\u00f6verg\u00e5ngarna fungerar bra p\u00e5 det h\u00e4r s\u00e4ttet, och de \u00e4r ocks\u00e5 ganska lyh\u00f6rda. Det finns dock vissa prestandaproblem ocks\u00e5. Inneh\u00e5llet tenderar att laddas l\u00e5ngsammare till en b\u00f6rjan, och anv\u00e4ndare kan st\u00f6ta p\u00e5 problem n\u00e4r de \u00f6ppnar en sida med massor av inneh\u00e5ll.<\/p>\n

Skjutreglage \u00f6verg\u00e5ngar<\/strong><\/h3>\n

\"Fantastiska<\/a><\/p>\n

MirkoZoric skapade dessa CSS-sid\u00f6verg\u00e5ngar genom att utforska Swiper-stilen. Han anv\u00e4nder den popul\u00e4ra parallaxeffekten och leker med filter f\u00f6r att f\u00e5 en h\u00e4pnadsv\u00e4ckande effekt.<\/p>\n

Lollipop Transition<\/strong><\/h3>\n

\"Fantastiska<\/a><\/p>\n

Lollipop, som Jeff McCarthy kallade sin sid\u00f6verg\u00e5ng, liknar utseendet och k\u00e4nslan f\u00f6r Android 5.0. Sid\u00f6verg\u00e5ngen imiterar l\u00e5dan\/mappanimeringen fr\u00e5n Android 5.0 Lollipop som anv\u00e4nder en cirkul\u00e4r klubbaliknande effekt.<\/p>\n

sammanhang<\/strong><\/h3>\n

\"Fantastiska<\/a><\/p>\n

Kontext skapades av Hakim El Hattab och det \u00e4r ganska okomplicerat \u2014 det \u00e4r en kontextf\u00f6rskjutning som understryker att sidans kontext har f\u00f6r\u00e4ndrats. Du \u00e4r f\u00f6rmodligen van vid den h\u00e4r typen av \u00f6verg\u00e5ng om du har anv\u00e4nt en enhet som k\u00f6r iOS.<\/p>\n

Cool layout med komplex kedjabar animation<\/strong><\/h3>\n

\"Fantastiska<\/a><\/p>\n

En annan fr\u00e5n NikolayTelanov, den h\u00e4r sid\u00f6verg\u00e5ngen \u00e4r baserad p\u00e5 satellitwebbplatsens prototyp<\/a> och den skapas genom att l\u00e4gga till 2 klasser med JavaScript och en enkel hovring. Detta \u00e4r en demofunktion och den har kedjeanimationer.<\/p>\n

Det \u00e4r en responsiv \u00f6verg\u00e5ng som ocks\u00e5 \u00e4r l\u00e4tt att underh\u00e5lla SCSS-m\u00e4ssigt.<\/p>\n

Hej, visste du att data ocks\u00e5 kan vara vackert?<\/h3>\n

wpDataTables<\/a> kan g\u00f6ra det s\u00e5. Det finns en bra anledning till varf\u00f6r det \u00e4r WordPress-plugin nummer 1 f\u00f6r att skapa responsiva tabeller och diagram.<\/p>\n

\"Fantastiska<\/a><\/p>\n

Ett faktiskt exempel p\u00e5 wpDataTables i naturen<\/p>\n

Och det \u00e4r verkligen l\u00e4tt att g\u00f6ra n\u00e5got s\u00e5 h\u00e4r:<\/p>\n

    \n
  1. Du tillhandah\u00e5ller tabelldata<\/li>\n
  2. Konfigurera och anpassa den<\/li>\n
  3. Publicera det i ett inl\u00e4gg eller sida<\/li>\n<\/ol>\n

    Och det \u00e4r inte bara snyggt, utan ocks\u00e5 praktiskt. Du kan skapa stora tabeller med upp till miljontals rader<\/a>, eller s\u00e5 kan du anv\u00e4nda avancerade filter och s\u00f6kning<\/a>, eller s\u00e5 kan du g\u00e5 vilda och g\u00f6ra det redigerbart<\/a>.<\/p>\n

    "Ja, men jag gillar Excel f\u00f6r mycket och det finns inget s\u00e5dant p\u00e5 webbplatser." Ja, det finns det. Du kan anv\u00e4nda villkorlig formatering<\/a> som i Excel eller Google Sheets.<\/p>\n

    Sa jag att du ocks\u00e5 kan skapa diagram<\/a> med dina data? Och det \u00e4r bara en liten del. Det finns m\u00e5nga andra funktioner<\/a> f\u00f6r dig.<\/p>\n

    Uber-liknande text\u00f6verg\u00e5ngar<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Nicolas Engler skapade dessa \u00f6vers\u00e4ttningar som liknar de du kan se p\u00e5 Uber. De g\u00e5r fr\u00e5n en bild till en annan v\u00e4ldigt smidigt och de \u00e4r perfekta f\u00f6r enkla gr\u00e4nssnitt.<\/p>\n

    Delad 3D-karusell<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Som namnet antyder kom Paul Noble p\u00e5 en intressant id\u00e9 som anv\u00e4nder karusellm\u00f6nstret, bara att det \u00e4r baserat p\u00e5 en delad panel\u00f6verg\u00e5ng i tr\u00e4d olika dimensioner. Detta \u00e4r en av de mest anv\u00e4nda stilarna f\u00f6r CSS-sid\u00f6verg\u00e5ngar.<\/p>\n

    Dummy Multi Layer Page Reveal Effect<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Mehmet Burak Erman \u00e4r skaparen av denna vackra sida avsl\u00f6jar effekt. Det byggdes i en stil med flera lager, med hj\u00e4lp av HTML, CSS och JavaScript. F\u00f6r n\u00e4rvarande \u00e4r sid\u00f6verg\u00e5ngen kompatibel med Chrome, Firefox, Opera och Safari.<\/p>\n

    Tiles Page Transition (CSS)<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Milan Ricoul skapade denna sida med hj\u00e4lp av CSS och den har verkligen f\u00e5tt stor igenk\u00e4nning. Milan skapade den med den klassiska HTML-, CSS- och JavaScript-kombinationen och den \u00e4r kompatibel, som Mehmet Ermans, med de flesta webbl\u00e4sare.<\/p>\n

    Artikel\u00f6verg\u00e5ngssida<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Detta \u00e4r en av CSS-sid\u00f6verg\u00e5ngarna skapade av Muna. Den inspirerades fr\u00e5n b\u00f6rjan av ReAlign 2 p\u00e5 Dribble-webbplatsen med hj\u00e4lp av CSS, men den \u00e4r ocks\u00e5 baserad p\u00e5 HTML och JavaScript. J\u00e4mf\u00f6rt med andra sid\u00f6verg\u00e5ngar p\u00e5 webben \u00e4r detta ocks\u00e5 kompatibelt med Microsoft Edge.<\/p>\n

    Enkel sid\u00f6verg\u00e5ng<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Det finns inte mycket att s\u00e4ga om den h\u00e4r sid\u00f6verg\u00e5ngen \u2013 den \u00e4r precis som den heter: enkel. Den skapades av ktsn och den \u00e4r baserad p\u00e5 HTML-Pug, CSS\/SCSS och JavaScript med vue.js. Du b\u00f6r ge det ett f\u00f6rs\u00f6k om du letar efter n\u00e5got enkelt men imponerande.<\/p>\n

    Avsl\u00f6ja inneh\u00e5llsanimering (och meny)<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Tobias Glaus \u00e4r skaparen av denna enkla inneh\u00e5ll och menyanimering. Den \u00e4r baserad p\u00e5 en enkel avsl\u00f6jningseffekt, men den \u00e4r s\u00e5 effektiv som den borde vara. Om du bara vill ha en grundl\u00e4ggande CSS-sida\u00f6verg\u00e5ng med den stilrena avsl\u00f6jningsstilen, \u00e4r detta ett av dina b\u00e4sta val.<\/p>\n

    \u00d6verg\u00e5ngseffekt f\u00f6r expanderande kortsida<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Det h\u00e4r \u00e4r en kod som fortfarande arbetar p\u00e5 av Rachel Smith, men den har stor potential. Den \u00e4r inte redo att anv\u00e4ndas som en avslutad \u00f6verg\u00e5ng men skaparen har erbjudit den f\u00f6r testning. Efter slutf\u00f6randet kommer \u00f6verg\u00e5ngen att vara anv\u00e4ndbar \u00f6ver webbl\u00e4sare och tillg\u00e4nglig fr\u00e5n alla plattformar.<\/p>\n

    Sid\u00f6verg\u00e5ngar<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Detta \u00e4r MergimUjkanis projekt och \u00f6verg\u00e5ngen best\u00e5r av en enkel sk\u00e4rm med knappar\/menyer att navigera igenom. Om du minns hur gamla TV-apparater brukade st\u00e4ngas av genom att krympa storleken p\u00e5 sk\u00e4rmen till en tunn linje, vet du redan hur denna \u00f6verg\u00e5ng ser ut.<\/p>\n

    De som \u00e4r i behov av vintage CSS-sid\u00f6verg\u00e5ngar b\u00f6r prova den h\u00e4r.<\/p>\n

    Miniatyrbild till helsk\u00e4rms\u00f6verg\u00e5ng<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Denna s\u00f6ml\u00f6sa \u00f6verg\u00e5ng fr\u00e5n en miniatyrbild till en helsk\u00e4rmssida \u00e4r ett absolut m\u00e5ste. Steve Gardner anv\u00e4nde CSS-animationer och Angular f\u00f6r att s\u00e4tta ihop det. Genom att anv\u00e4nda den kan du ut\u00f6ka vilken miniatyrbild som helst till en bakgrund i full storlek.<\/p>\n

    Page Transition Loader<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    ArsenZbidniakov kom med detta f\u00f6rladdarkoncept som kan anv\u00e4ndas varje g\u00e5ng du \u00f6ppnar en ny sida p\u00e5 en webbplats. Den best\u00e5r av en SVG-cirkelladdare som har en extra morphing-effekt.<\/p>\n

    Denna CSS-side\u00f6verg\u00e5ng skulle fungera bra p\u00e5 vision\u00e4ra webbplatser med mycket multimediainneh\u00e5ll.<\/p>\n

    One Page Navigation CSS-meny<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Alberto Hartzet skapade den h\u00e4r ensidiga navigerings- CSS-menyn<\/a> som inneh\u00e5ller n\u00e5gra avsnitt och rena CSS-\u00f6verg\u00e5ngar. Den \u00e4r l\u00e4mplig f\u00f6r enklare webbplatser, portf\u00f6ljer och andra webbplatser som fungerar bra med en ensidig design.<\/p>\n

    Reagera animerade sid\u00f6verg\u00e5ngar<\/strong><\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Sarah Drasner skapade en liten demo f\u00f6r dessa CSS-sid\u00f6verg\u00e5ngar. Hon skapade den med GreenSock och SVG. Sid\u00f6verg\u00e5ngar i React fungerar smidigt och ser bra ut p\u00e5 samma g\u00e5ng, s\u00e5 forts\u00e4tt och testa det.<\/p>\n

    Materialdesign\u00f6verg\u00e5ng<\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    B\u00e5de stilen och animeringen av denna \u00f6verg\u00e5ng \u00e4r helt och h\u00e5llet gjorda i CSS av David Marland. Det g\u00e5r smidigt och det inneh\u00e5ller lite JavaScript f\u00f6r att l\u00e4gga till klasser. \u00d6verg\u00e5ngen kan pausas tills inneh\u00e5llet ers\u00e4tts. Detta \u00e4r en tv\u00e5stegsanimation.<\/p>\n

    Ren CSS En sida vertikal navigering<\/h3>\n

    \"Fantastiska<\/a><\/p>\n

    Den sista p\u00e5 v\u00e5r lista \u00f6ver CSS-sida\u00f6verg\u00e5ngar, denna rena vertikala CSS-navigerings\u00f6verg\u00e5ng av Alberto Hartzet har en klassisk layout f\u00f6r ensidiga webbplatser. \u00c5terigen \u00e4r \u00f6verg\u00e5ngen v\u00e4ldigt enkel men ger en fin touch till webbplatsen.<\/p>\n

    Avslutande tankar om dessa CSS-sid\u00f6verg\u00e5ngar<\/h3>\n

    Det finns stor konkurrens f\u00f6r att h\u00e4nga med i trenderna i den h\u00e4r branschen, s\u00e5 det \u00e4r inte konstigt varf\u00f6r det \u00e4r s\u00e5 sv\u00e5rt att best\u00e4mma sig f\u00f6r n\u00e5got s\u00e5 enkelt som en sid\u00f6verg\u00e5ng.<\/p>\n

    CSS-sid\u00f6verg\u00e5ngar ger dig ett enkelt s\u00e4tt p\u00e5 vilket du kan animera din webbplats utan att f\u00e5 den att laddas l\u00e5ngsamt. Dessutom fr\u00e4mjar det ett fr\u00e4schare utseende och l\u00e4gger till den d\u00e4r touchen av professionalism till vilken webbplats som helst.<\/p>\n

    CSS-sid\u00f6verg\u00e5ngar har kommit l\u00e5ngt under de senaste \u00e5ren, och anv\u00e4ndare b\u00f6r dra nytta av dem f\u00f6r att f\u00f6rb\u00e4ttra sitt anv\u00e4ndarupplevelse och h\u00e5lla anv\u00e4ndarna glada att klicka eller rulla runt.<\/p>\n

    Om du gillade att l\u00e4sa den h\u00e4r artikeln om CSS-sid\u00f6verg\u00e5ngar, b\u00f6r du kolla in den h\u00e4r om CSS-textgl\u00f6deffekter<\/a>.<\/p>\n

    Vi skrev ocks\u00e5 om n\u00e5gra relaterade \u00e4mnen som CSS-mobilmeny<\/a>, HTML-s\u00f6kruta<\/a>, CSS-bildgalleri<\/a>, CSS-redigerare<\/a> och CSS-bildsv\u00e4vningseffekter<\/a>.<\/p>\n

    Inspelningsk\u00e4lla: wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

    CSS-sid\u00f6verg\u00e5ngar har kommit l\u00e5ngt under de senaste \u00e5ren, och anv\u00e4ndare b\u00f6r dra nytta av dem f\u00f6r att f\u00f6rb\u00e4ttra sin UX och h\u00e5lla anv\u00e4ndarna n\u00f6jda<\/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":[910,848,901,755,922,724,868],"tags":[1173],"class_list":["post-227372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-9","category-handledningar","category-koda","category-oeppen-kaella","category-oevrig","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/227372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=227372"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/227372\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/181788"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=227372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=227372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=227372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}