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.

Þetta er allt HTML sem við ætlum að þurfa. Öll textinn er bara til að tryggja að við náum yfir alla blaðsíðuna þannig að það sé nauðsynlegt að fletta. Skulum frekar fara í CSS:

The CSS

The CSS þarf að búa til parallax áhrif er í raun frekar einfalt ef þú skilur hvers vegna það er skrifað hvernig það er. Við þurfum fyrst að setja bakgrunnsmyndina á .bg div og þá þurfum við að stöðva div frá því að fletta því að skrun aðgerðin verður beitt af jQuery; þannig að við þurfum að setja stöðu sína fast. Næst stillum við breiddina í 100% og hæðin í 300% til að tryggja að div sé stærri en raunverulegur skjár. Við stillum það efst til vinstri og gefumst það z-vísitölu -1 til að tryggja að það sé gert undir textanum.

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

Þetta er allt CSS sem við þurfum fyrir bg div, nú þurfum við bara að stilla restina af síðunni okkar (þótt þetta sé alveg valfrjálst, þá hefur það ekki áhrif á parallaxrollið):

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

Reyndu að fletta að síðunni núna og þú munt sjá að textinn flettir en bakgrunnurinn er fastur, við munum breyta því með jQuery okkar:

The jQuery

Það sem við viljum að jQuery sé að gera er að athuga hversu langt notandinn hefur flett og færa bakgrunninn á hægari hraða. Við ætlum að búa til aðgerð sem kallast parallax og búa til breytu sem mun halda gildi punkta sem notandinn hefur flett:

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

Nú, til að gera bakgrunninn að skruna í sama hraða og textinn setjum við efst gildi div til að vera neikvætt gildi skrunans, lokaðu síðan aðgerðinni. Eins og svo:

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

Hins vegar er benda á parallaxrollun að hreyfa sig á annan hraða, svo að stilla hraða við margfalda gildi með broti, til dæmis 0,2 fyrir 20%:

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

Það er aðeins eitt til að gera tilraunirnar til að keyra og það kallar aðgerðina í hvert skipti sem flettitilburðurinn er kallaður:

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

Með því að gera þetta er númerið okkar lokið. Ef þú prófir skrána munt þú sjá það virka. Til að breyta hraða þurfum við að breyta brotinu í aðgerðinni; minni brot minnka hraða og hærri brot auka það. Þú getur séð lokaúrslit þessa kóða í þetta penni sem ég bjó til.

Niðurstaða

Eins og þú sérð að búa til parallax áhrif er ekki eins erfitt og þú gætir búist við. Auðvitað er þetta bara einfalt dæmi, en þú getur byggt á þessu til að búa til hvers konar flókið parallax áhrif sem þú vilt.

Hefur þú notað parallax áhrif í verkefni? Hefurðu betri aðferð? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, renna sjónarhorni mynd um Shutterstock.