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.

Das ist alles HTML, das wir brauchen werden. Der gesamte Text soll nur sicherstellen, dass wir die ganze Seite abdecken, so dass das Scrollen notwendig ist. Lasst uns mehr über das CSS erfahren:

Das CSS

Das CSS, das benötigt wird, um einen Parallaxeffekt zu erzeugen, ist eigentlich ziemlich einfach, wenn Sie verstehen, warum es so geschrieben ist, wie es ist. Zuerst müssen wir das Hintergrundbild des .bg divs setzen und dann müssen wir das div vom Scrollen abhalten, weil die Scroll-Aktion von jQuery angewendet wird; Also müssen wir seine Position auf fix festlegen . Als nächstes setzen wir die Breite auf 100% und die Höhe auf 300%, um sicherzustellen, dass das Div größer ist als der eigentliche Bildschirm. Wir positionieren es oben links und geben ihm schließlich einen Z-Index von -1, um sicherzustellen, dass es unter dem Text gerendert wird.

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

Das ist alles CSS, das wir für das bg div brauchen, jetzt müssen wir nur den Rest unserer Seite gestalten (obwohl dies völlig optional ist, hat es keinen Einfluss auf den parallax scroll):

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

Versuchen Sie, die Seite jetzt zu scrollen, und Sie werden sehen, dass der Text scrollt, aber der Hintergrund bleibt fixiert. Wir werden das mit unserer jQuery ändern:

Die jQuery

Wir wollen mit jQuery überprüfen, wie weit der Benutzer gescrollt hat und den Hintergrund langsamer bewegen. Wir werden eine Funktion namens Parallax erstellen und eine Variable erstellen, die den Wert der Pixel enthält, die der Benutzer gescrollt hat:

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

Um nun den Hintergrund mit der gleichen Geschwindigkeit wie den Text scrollen zu lassen, setzen wir den oberen Wert des div auf den negativen Wert des Scrolls und schließen die Funktion. Wie so:

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

Der Punkt des Parallax Scrolling ist jedoch, sich mit einer anderen Geschwindigkeit zu bewegen. Um die Geschwindigkeit anzupassen, multiplizieren wir den Wert mit einem Bruch, zum Beispiel 0,2 für 20%:

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

Es gibt nur noch eine weitere Möglichkeit, um den Effekt zu aktivieren, und zwar jedes Mal, wenn das Scroll-Ereignis ausgelöst wird:

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

Danach ist unser Code vollständig. Wenn Sie die Datei testen, wird sie funktionieren. Um die Geschwindigkeit zu ändern, müssen wir den Bruch in der Funktion ändern; kleinere Fraktionen reduzieren die Geschwindigkeit und höhere Anteile erhöhen sie. Sie können das Endergebnis dieses Codes sehen diesen Stift habe ich erstellt.

Fazit

Wie Sie sehen, ist das Erstellen eines Parallax-Effekts nicht so schwer, wie Sie es erwartet haben. Natürlich ist dies nur ein einfaches Beispiel, aber Sie können darauf aufbauen, um jede Art von komplexem Parallax-Effekt zu erzeugen, den Sie mögen.

Haben Sie in einem Projekt einen Parallax-Effekt verwendet? Hast du eine bessere Methode? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, Gleitendes perspektivisches Bild über Shutterstock.