Home page
We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.
We offer the following services:
Branding
Logos
Websites
Web applications
Web development – HTML5, CSS, jQuery
Content Management Systems
Responsive Web Design
Illustration
Business cards
Letterheads and compliment slips
Flyers
Mailers
Appointment cards
Sub page
Before you choose us to take on your project you will probably want to know a bit more about us, so meet the team:
 
Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.
Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.
 
Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross on projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.
  
Joey and Phoebe focus on bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.

Det här är all HTML som vi behöver. All text är bara för att säkerställa att vi täcker hela sidan så att rullning är nödvändig. Låt oss gå vidare till CSS:

CSS

Den CSS som krävs för att skapa en parallell effekt är faktiskt ganska enkel om du förstår varför det är skrivet som det är. Vi måste först ställa in bakgrundsbilden för .bg div och då måste vi stoppa div från att bläddra eftersom bläddringsåtgärden kommer att tillämpas av jQuery; så vi måste ställa sin position till fasta. Nästa ställer vi bredden till 100% och höjden till 300% för att säkerställa att div är större än den faktiska skärmen. Vi placerar den längst upp till vänster och ger slutligen ett z-index på -1 för att se till att det görs under texten.

.bg {background: url('bg.jpg') repeat;position: fixed;width: 100%;height: 300%;top:0;left:0;z-index: -1;}

Det här är all CSS vi behöver för bg div, nu behöver vi bara stila resten av vår sida (även om det här är helt valfritt, påverkar det inte parallaxrullen):

section {color: #fff;font-family: arial;width: 500px;margin: auto;line-height: 20px;font-size: 16px;}

Prova att rulla sidan nu och du ser att texten rullar men bakgrunden stannar fast, vi kommer att ändra det med vår jQuery:

JQuery

Vad vi vill att jQuery ska göra är att kontrollera hur långt användaren har rullat och flytta bakgrunden med en långsammare hastighet. Vi ska skapa en funktion som heter parallax och skapa en variabel som håller värdet på pixlarna som användaren har rullat:

function parallax(){var scrolled = $(window).scrollTop();

Nu, för att få bakgrunden att bläddra i samma hastighet som texten ställer vi upp det högsta värdet för div som scrollens negativa värde och stänger sedan funktionen. Såhär:

    $('.bg').css('top', -(scrolled) + 'px');}

Parallellrullningspunkten är dock att flytta med en annan hastighet, så att justera hastigheten vi multiplicerar värdet med en bråkdel, till exempel 0,2 för 20%:

function parallax(){var scrolled = $(window).scrollTop();$('.bg').css('top', -(scrolled * 0.2) + 'px');}

Det finns bara en sak att göra för att få effekten att gå och det kallas funktionen varje gång bläddringsevenemanget utlöses:

$(window).scroll(function(e){parallax();});

Efter att ha gjort detta är vår kod klar. Om du testar filen ser du den fungerar. För att ändra hastigheten måste vi ändra fraktionen i funktionen. mindre fraktioner minskar hastigheten och högre fraktioner ökar den. Du kan se det slutliga resultatet av den här koden i den här pennan jag skapade.

Slutsats

Som du kan se att skapa en parallax effekt är inte så svårt som du kanske har förväntat dig. Naturligtvis är detta bara ett enkelt exempel, men du kan bygga på detta för att skapa någon form av komplicerad parallax-effekt som du gillar.

Har du använt en parallaxeffekt i ett projekt? Har du en bättre metod? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, glidande perspektivbild via Shutterstock.