Inspiration från codrops

"Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge."

Den twittrade länken ledde till en demosida. På demosidan fanns en länk till demon innan, och så var karusellen igång. Jag bläddrade igenom många inspirerande experiment. Här kommer de jag tyckte var mest intressanta!

Blädderbart

Innehållet är upplagt som en bok, två sidor för varje uppslag, en framsida och en baksida. Den stora grejen är att det går att bläddra sig genom innehållet, oavsett om du tittar på sidan med en datorskärm eller en mobilskärm. Det går att klicka på artiklarna och läsa hela, för hela texterna inte får plats på sidorna. Innehållet anpassas efter storleken på fönstret. Det innebär att den är fullt anpassad för mobilen också. Det gillas!

Sidan visas, på datorn, bäst i Safari och Chrome.

Besök http://tympanus.net/Development/FlipboardPageLayout/

Riktad hovereffekt

Detta är den nya varianten av bildgalleri där en kort beskrivande text dyker upp vid hover. I denna variant bestämmer nämligen pekarens riktning när den hovrar bilden från vilket håll som texten glider in från. Det ger känslan av att det är en ruta bakom som följer med pekaren och visar olika text beroende på bild. Det ger ett bra flöde!

Besök http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/ 

4-delat bildspel

Tänk dig några bilder och att du sedan klipper varje bild i fyra bitar. Bilderna sätts sedan ihop och när du bläddrar mellan dem så är varje del som ett eget bildspel, men till slut ser det ändå ut som en enda bild. Det är vad detta är.

Besök http://tympanus.net/Tutorials/CSS3SlidingImagePanels/

Knappar med klickeffekt

Knappar kan utformas på alla möjliga olika sätt. Se ut på ett sätt när den visas och ett annat sätt när den blir klickad på. Här är knapparna utformade så att de ska se ut som riktiga fysiska knappar som trycks ner.

Besök http://tympanus.net/Tutorials/CSSButtonsPseudoElements/  

Tumnaglar som gömmer sig

Detta är något som sticker ut. Kolla in det!

Besök http://tympanus.net/Tutorials/ProximityEffect/   

Test av övergångar i bildspel

Bildspel som ser ut att bläddras i 3D.

Besök http://tympanus.net/Development/ImageTransitions/  

2012-05-08

Allmänt

Kommentarer

Masonry

Masonry på dragster.se

Istället för att floata divar på många olika sätt och ändå få massa luft mellan dem kan du använda Masonry. Den känner av bredden på dina divar och passar ihop dem till ett mosaikmönster. Se bilden ovan för att se hur det ser ut på Dragsters startsida.

Läs mer om jQuery Masonry, eller prova på Vanilla Masonry, som inte använder jQuery!

2012-05-04

Allmänt

Kommentarer

Kort om Facebook Timeline

För någon månad sedan introducerades alla sidor på Facebook för Timeline. Det kom till profilsidorna bara några månader sedan, och nu var det alltså företagens och övrigas tur.

Dragster undrade hur Timeline på Facebook fungerade. Dragnet satte ihop en presentation med HTML5 slideshow och berättade. Bilderna i presentationen kommer från Tour Africas Facebook-sida. Ni kan också ta del av presentationen: 

http://dragnet.se/webbdesign/facebook-timeline/index.html

Källor och ytterligare information:

AllFacebook: “7 Crucial Things About Timeline For Facebook Pages”
http://www.allfacebook.com/facebook-pages-timeline-7-2012-02
Marketingland: “New Facebook Pages Released With Timeline, Pinning & Private Messaging”
http://marketingland.com/new-facebook-pages-released-with-timeline-pinning-private-messaging-7034
Pando Daily: “Facebook Brings Timeline To Brand Pages”
http://pandodaily.com/2012/02/29/facebook-brings-timeline-and-a-new-admin-panel-to-pages/
Dagens Media: "Fem tips om Facebook Timeline för Pages"
http://www.dagensmedia.se/asikter/article3449364.ec

 

 

Just nu-appen uppe!

Ja, det är sant. Dragsters första riktiga native app ligger uppe på Appstore och Google Play för er att ladda ner gratis!

» Så här ser Just nu-appen ut i Android

MKSE gillar Tour Africa!

Förra veckan tipsade jag Martin Edenström om Tour Africas nya fina hemsida som Dragnet programmerat. Idag kan vi alla läsa om den på mkse.com. Vad tyckte han då? Jo...

"Ett väl genomfört jobb av byråerna."

Kolla in mer:

Adobe Shadow

Med nya Adobe Shadow (beta) kan utvecklare koppla ihop en smart telefon med datorn och se sidan renderas i de båda enheterna. Jag ser fram emot att testa detta!

Feedback på photo viewer

Dragsters julkalender, som jag skrev om i måndags, är byggt på något som heter photo viewer. Jag skickade ett meddelande till Marco, som utvecklat photo viewer och fick detta svar:

Hello Elisabeth,

Thank you for your mail.

Your change to the photo viewer looks absolutely awesome - well done! That's the kind of stuff that I love to see; people that remix my work, and improve it in a huge way. Well done!

Have a nice day.

Greetings,
Marco
http://www.marcofolio.net/
http://twitter.com/marcofolio

Kolla vidare:

2012-03-01

Allmänt

Kommentarer

Dragsters julkalender 2011

Dragsters julkalender för 2011 skiljde sig från övriga år. Temat var Dragster-året som gått. Vad hade Dragster egentligen sysslat med under det händelserika året 2011? Dragnet programmerade ihop en sida för att presentera detta medan Dragster fyllde luckorna.

Dragster julkalender 2011

» Visning i datorn

Luckorna

Alla luckor visas på en sida. Allt eftersom decemberdagarna gick blev en ny lucka aktuell. Den gick på dag och klockslag. Kl 23:59 visades en lucka och två minuter senare blev nästa dags lucka aktuell. Det gjorde att innehållet kunde fyllas på i förväg och "publiceringen" kunde sedan sköta sig själv.

Kollen, om luckan var aktuell, dåtida eller framtida, gjordes både när luckan presenterades och när innehållet hämtades vid öppning. Det gick alltså inte att kolla på någonting i förväg. Den aktuella luckan lades överst och blev röd. De luckor som redan öppnats låg i lagret under och de som inte öppnats låg underst och visade Dragster-loggan istället för en luckbild.

Dragsters julkalender 2011 - 10e december

» Kalendern som den såg ut 10e december

Javascript som användes

Polaroid photo viewer
Det hela baserades på en polaroid photo viewer som gjorts av Marco Kuiper. Målet var att anpassa denna så kalendern skulle kunna följas även i läsplatta och smart mobil. 

jQuery UI
Inbyggt i polaroid photo viewer fanns jQuery UI. Draggable användes när en bild flyttades med muspekaren. Från början ändrades bildens rotation när den flyttades eller klickades på, men det kommenterades ut för denna kalender.

Detect Mobile Browsers
En liten kodsnutt från detectmobilebrowsers.com som avgör om besökaren surfar från en mobil eller inte. Här lades ipad till för att få samma funktionalitet för ipadens touchscreen som mobilerna.

Doubletap
På de små enheterna med touch så är det krångligt att klicka på de små siffrorna för att öppna en lucka. En doubletap är mycket smidigare. En doubletap känns av och triggar ett klick på den luckans siffra, så egentligen händer det exakt samma sak som när man klickar på siffran.

Toucharea
För att kunna flytta runt bilderna på en touch screen används toucharea. Med hjälp av den kan man få tag i händelser som touchdragstart och touchdragmove, vilket är precis vad som händer när en bild  flyttas.

Fancybox
Till sist lades Fancybox 2.0 in. Den visar luckorna i rätt format oavsett enhet.

Dragster julkalender 2011 i mobil

» Kalendern i mobil

Dragster julkalender 2011 i mobil

» Lucköppningen i mobil

Besök dragster.se/jul

Dragnet på Webbdagarna

Skärmdump från Webbdagarnas hemsida

På torsdag den här veckan äger Webbdagarna rum i Göteborg. Det är en konferens om allt som hör marknadsföring på internet till, proppad med seminarier om e-handel, sociala medier och den mobila webben. Dragnet i form av Jonas kommer deltaga i en paneldebatt om reklambyråns roll och framtid i Göteborg. Vi ses där!

2010-09-15

Allmänt

Kommentarer

Nya ansikten på Dragnet

Jakob och Elisabeth

Hej Jakob ny projektledare och Elisabeth ny programmerare och Dragnets nyaste förmågor. Hur är det idag?
J: Det är en riktigt skön försommardag idag. Succé
E: Idag är jag på gott humör. Solen skiner och det är sista dagen på min praktik. Efter idag får jag betalt för kodandet.

Vad har ni gjort idag?
J: Jag har ätit gröt och svarat på mail, men klockan är inte nio ännu. Sen har jag tagit reda på att man kan överklaga sin p-pot via mail till trafikpolisen-goteborg.vastragotaland[at]polisen.se. Det kan vara en av världens längsta epostadresser.

E: Dagen började med ett besök på Bics nya kampanjsajt Still chic (still-chic.com). Där finns det en tävling där den som skickat in den mest pinsamma historian vinner shopping för 15000 kr. Det är såklart jag som har programmerat sidan! Dagen fortsatte med den ständiga kampen att få en sida att se bra ut i IE6.

Jakob - Hur många instrument behärskar du egentligen?
Jag spelar ganska många instrument, men jag behärskar egentligen bara gitarr. Just nu över jag mest på dragspel, till mina grannars stora glädje.

Elisabeth - Du har hamnat i sushiträsket - hur ska en bra sushi vara?
Bitarna ska inte vara för stora och det ska vara avocado istället för gurka till mig. Om många ska äta tillsammans är den bästa sushin den hemlagade. Det krävs mycket förberedelser, men alla kan kombinera sin egen perfekta maki-rulle så det går på ett ut. Idag har jag haft tur för Maria (copy) bjöd mig på sushi-lunch. Hon utmanade mig att klara en Rubiks kub, jag klarade det och vann en lunch.

Vilken webbsajt kan ni inte vara utan?
J: Chuck Norris facts
E: Dragnets hemsida (och Facebook).

2010-06-13

Allmänt

Kommentarer