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.

Dette er all HTML vi trenger. All teksten er bare for å sikre at vi dekker hele siden, slik at rulling er nødvendig. La oss gå videre til CSS:

CSS

CSS som kreves for å opprette en parallax-effekt er faktisk ganske enkelt hvis du forstår hvorfor det er skrevet slik det er. Vi må først sette bakgrunnsbildet til .bg div og da må vi stoppe div fra å rulle fordi rullespillet vil bli brukt av jQuery; så vi må sette sin posisjon til fast. Deretter setter vi bredden til 100% og høyden til 300% for å sikre at div er større enn selve skjermen. Vi plasserer den øverst til venstre og til slutt gir den en z-indeks på -1 for å sikre at den blir gjengitt under teksten.

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

Dette er alt CSS vi trenger for bg div, nå trenger vi bare å stilere resten av siden vår (selv om dette er helt valgfritt, påvirker ikke parallaxrullen):

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

Prøv å rulle siden nå, og du vil se at teksten ruller, men bakgrunnen forblir løst, vi skal endre det med vår jQuery:

JQuery

Det vi vil at jQuery skal gjøre, er å sjekke hvor langt brukeren har rullet og flytte bakgrunnen til en lavere hastighet. Vi skal lage en funksjon som heter parallax og lage en variabel som vil holde verdien av pikslene brukeren har rullet:

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

Nå, for å få bakgrunnen å rulle med samme hastighet som teksten, setter vi toppverdien av div til den negative verdien av rullen, og lukker deretter funksjonen. Som så:

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

Men punktet med parallellrulling er å bevege seg med en annen hastighet, slik at vi justerer hastigheten vi multipliserer verdien med en brøkdel, for eksempel 0,2 for 20%:

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

Det er bare en ting å gjøre for å få effekten i gang, og det kalles funksjonen hver gang rullehendelsen utløses:

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

Etter å ha gjort dette, er vår kode fullført. Hvis du tester filen, ser du den fungerer. For å endre hastigheten, må vi endre brøkdelen i funksjonen; mindre fraksjoner reduserer hastigheten og høyere fraksjoner øker den. Du kan se det endelige resultatet av denne koden i denne pennen jeg opprettet.

Konklusjon

Som du kan se å lage en parallax-effekt er ikke så vanskelig som du kanskje har forventet. Selvfølgelig er dette bare et enkelt eksempel, men du kan bygge på dette for å skape noen form for komplekst parallax-effekt som du liker.

Har du brukt en parallell effekt i et prosjekt? Har du en bedre metode? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, glidende perspektivbilde via Shutterstock.