lillbra.se

Parallax scrolling med bakgrundsbilder

Den senaste microtrenden inom webbdesign är att använda så kallad parallax scrollning som effekt på bakgrundbilder. Det funkar så att när användaren scrollar så förändras bakgrundsbilden på sajten i takt med, och beroende på hur användaren scrollar. Här hittar du några fina exempel på sajter som använt sig av just detta:

• Ala
• Stijlroyal
• Contrast Rebellion
• 360 Langstrasse
• Gidsy Handbooks
• Volkswagen Beetle

Att göra en liknande effekt på sin egna sajt är inte särskilt svårt. Jonathan Nicol har satt ihop ett exempel med den kod du behöver. Ladda hem och testa själv här: Build a parallax scrolling website interface with jQuery and CSS

(Tack för länktips: @floma, @samuelericson, @codepo8, @emilstenstrom, @pelles)

Veckans länktips – 2011-09-25

• css – MSHTML fallback for data uri:s – Stack Overflow
  Håll koll här om du har bakgrundsbilder som data-uri:er och samtidigt vill stödja IE7 (via @emilstenstrom).
• CSS3 Flexible Box Layout Explained – Smashing Coding
  Så byger du en layout med flexbox i css3.
• Better infinite scrolling with the HTML5 History API – Guillermo Esteves
  Exempel på hur du kan använda html5 history för scrollning som bläddring mellan sidor.
• Revisit Hardboiled CSS3 Media Queries | Shi Chuan’s blog
  Så räknar du ut hur breda mobiltelefonernas skärmar är för dina media-queries.
• Tankestreck i listor i HTML – tekniken.nu
  När du square, circle eller decimal inte passar; så här markerar du listitems med hyphens.

Veckans länktips – 2011-09-18

• Apigee – Free and Enterprise API Management and Infrastructure
  Verktyg för att skapa och mäta API:er (via @andreaskrohn).
• 46elks.com – Empower your apps with Voice, SMS & MMS
  API-tjänst för telefoni och sms (via @yesbabyyes).
• Facebook and Heroku: an even easier way to get started – Facebook Developers
  Skapa en Facebook-app enkelt med Heroku. Wow! (via @bjornlilja)
• jQuery-Timepicker-Addon – trentrichardson @ GitHub
  Bra plugin när användaren även ska välja datum och klockslag.
• blossom — Lean Project Management.
  Projektvertyg online. Någon som testat på?