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.

Tämä on kaikki HTML, jota tarvitsemme. Kaikki teksti on vain varmistaaksemme, että peittelemme koko sivun niin, että vieritys on välttämätöntä. Pidetään enemmän CSS: lle:

CSS

Parallaalisen vaikutuksen luomiseen tarvittava CSS on todella melko yksinkertainen, jos ymmärrät, miksi se on kirjoitettu tapaan. Ensin on asetettava .bg div: n taustakuva ja sitten joudumme jumittumasta rullaamalla, koska jQuery soveltaa selaustoimintoa; joten meidän on asetettava asema kiinteäksi. Seuraavaksi asetetaan leveys 100 prosenttiin ja korkeus 300 prosenttiin varmistaaksesi, että div on suurempi kuin todellinen näyttö. Asemoimme sen vasemmassa yläkulmassa ja annamme sille z-indeksin -1 varmistaaksemme, että se on tehty tekstin alle.

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

Tämä on kaikki CSS: n, jota tarvitsemme bg div: lle, nyt meidän on vain muotoiltava loppu sivullamme (vaikka tämä on täysin valinnainen, se ei vaikuta parallaksin vieritykseen):

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

Kokeile vierittää sivua nyt ja näet, että teksti rullaa, mutta tausta pysyy kiinteänä, ja aiomme muuttaa sitä jQueryn kanssa:

JQuery

Haluamme jQueryn tekemään sen tarkistamista, kuinka paljon käyttäjä on rullannut ja siirtänyt taustaa hitaammin. Aiomme luoda funktiota, jota kutsutaan parallaksi ja luodaan muuttuja, joka pitää sisällössä pikselien arvon, jonka käyttäjä on selannut:

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

Nyt, jotta taustat siirtyvät samalla nopeudella kuin tekstillä, asetamme divin ylimmän arvon olevan negatiivisen arvon vieritys, sulje sitten toiminto. Niin kuin:

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

Paralaksin vierityspiste on kuitenkin liikkua eri nopeudella, joten nopeuden säätämiseksi kerromme arvon murto-osalla, esimerkiksi 0,2: lla 20%:

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

Sinulla on vain yksi asia tehdä, jotta vaikutus saadaan näkyviin, ja se kutsuu toimintoa aina, kun vieritystapahtuma käynnistyy:

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

Tämän jälkeen koodi on valmis. Jos testaat tiedoston, näet, että se toimii. Nopeuden muuttamiseksi meidän on muutettava funktion murto-osa; Pienemmät jakeet vähentävät nopeutta ja suuremmat jakeet lisäävät sitä. Näet tämän koodin lopullisen tuloksen tämä kynä luonut.

johtopäätös

Kuten näet, parallaksivaiheen luominen ei ole yhtä vaikeaa kuin olette odottaneet. Tietenkin tämä on vain yksinkertainen esimerkki, mutta voit rakentaa tämän luomaan minkäänlaista monimutkaista parallaksia, jota pidät.

Oletko käyttänyt parallaalisvaikutusta projektissa? Onko sinulla parempi menetelmä? Kerro meille kommentit.

Esitetty kuva / pikkukuva, liukuva perspektiivikuva kautta Shutterstock.