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.

Dit is al de HTML die we nodig hebben. Alle tekst is alleen maar bedoeld om ervoor te zorgen dat we de hele pagina bedekken, zodat scrollen nodig is. Laten we verder gaan met de CSS:

De CSS

De CSS die nodig is om een ​​parallax-effect te maken, is eigenlijk vrij eenvoudig als je begrijpt waarom het is geschreven zoals het is. We moeten eerst de achtergrondafbeelding van de .bg div instellen en dan moeten we voorkomen dat de div scrolt omdat de scroll-actie door jQuery wordt toegepast; dus we moeten zijn positie instellen op opgelost. Vervolgens stellen we de breedte in op 100% en de hoogte op 300% om er zeker van te zijn dat de div groter is dan het daadwerkelijke scherm. We plaatsen het bovenaan links en geven het uiteindelijk een z-index van -1 om te zorgen dat het onder de tekst wordt weergegeven.

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

Dit is allemaal CSS die we nodig hebben voor de bg div, nu moeten we alleen de rest van onze pagina stylen (hoewel dit volledig optioneel is, heeft het geen invloed op de parallax-scrol):

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

Probeer nu de pagina te scrollen en u zult zien dat de tekst scrollt, maar de achtergrond blijft ongewijzigd, we gaan dat veranderen met onze jQuery:

De jQuery

Wat we willen dat de jQuery doet, is controleren hoe ver de gebruiker heeft geschoven en de achtergrond op een langzamere snelheid verplaatst. We gaan een functie maken met de naam parallax en een variabele maken die de waarde behoudt van de pixels die de gebruiker heeft gescrold:

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

Om de achtergrond op dezelfde snelheid te laten scrollen als de tekst, stellen we de bovenste waarde van de div in op de negatieve waarde van de schuif en sluit vervolgens de functie. Zoals zo:

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

Het punt van parallax scrollen is echter om met een andere snelheid te bewegen, dus om de snelheid aan te passen vermenigvuldigen we de waarde met een breuk, bijvoorbeeld 0.2 voor 20%:

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

Er is nog één ding te doen om het effect te laten lopen en dat is de functie elke keer dat de scroll-gebeurtenis wordt getriggerd oproepen:

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

Als dit is gebeurd, is onze code voltooid. Als u het bestand test, ziet u het werken. Om de snelheid te wijzigen, moeten we de breuk in de functie wijzigen; kleinere fracties verminderen de snelheid en hogere fracties verhogen het. U kunt het eindresultaat van deze code zien in deze pen die ik heb gemaakt.

Conclusie

Zoals je kunt zien is het creëren van een parallax-effect niet zo moeilijk als je misschien had verwacht. Dit is natuurlijk slechts een eenvoudig voorbeeld, maar je kunt hierop voortbouwen om elk soort complex parallaxeffect te maken dat je leuk vindt.

Heb je een parallax-effect in een project gebruikt? Heb je een betere methode? Laat het ons weten in de comments.

Uitgelichte afbeelding / thumbnail, glijdende perspectief afbeelding via Shutterstock.