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.

Αυτό είναι το HTML που χρειαζόμαστε. Το όλο κείμενο είναι μόνο για να διασφαλίσουμε ότι καλύπτουμε ολόκληρη τη σελίδα, έτσι ώστε να είναι απαραίτητη η κύλιση. Ας δούμε περισσότερο στο CSS:

Το CSS

Το CSS που απαιτείται για να δημιουργήσετε ένα φαινόμενο παράλλαξης είναι στην πραγματικότητα αρκετά απλό αν καταλάβετε γιατί είναι γραμμένο με τον τρόπο που είναι. Πρώτα πρέπει να ορίσουμε την εικόνα φόντου του .bg div και στη συνέχεια πρέπει να σταματήσουμε το div από την κύλιση γιατί η ενέργεια κύλισης θα εφαρμοστεί από το jQuery. οπότε πρέπει να θέσουμε τη θέση του σταθερή. Στη συνέχεια, ρυθμίζουμε το πλάτος στο 100% και το ύψος στο 300% για να βεβαιωθείτε ότι το div είναι μεγαλύτερο από την πραγματική οθόνη. Το τοποθετούμε στο πάνω αριστερό άκρο και τελικά το δίνουμε ένα z-δείκτη -1, για να βεβαιωθούμε ότι αυτό αποδίδεται κάτω από το κείμενο.

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

Αυτό είναι όλο το CSS που χρειαζόμαστε για το bg div, τώρα πρέπει απλώς να σχεδιάσουμε το υπόλοιπο της σελίδας μας (αν και αυτό είναι εντελώς προαιρετικό, δεν επηρεάζει το scroll parallax):

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

Δοκιμάστε την κύλιση της σελίδας τώρα και θα δείτε ότι το κείμενο κυλάει αλλά το φόντο παραμένει σταθερό, πρόκειται να το αλλάξετε αυτό με το jQuery:

Το jQuery

Αυτό που θέλουμε να κάνει το jQuery είναι να ελέγξει πόσο μακριά έχει μετακινηθεί ο χρήστης και να μετακινήσει το φόντο με πιο αργή ταχύτητα. Θα δημιουργήσουμε μια λειτουργία που ονομάζεται parallax και θα δημιουργήσουμε μια μεταβλητή που θα κρατήσει την τιμή των εικονοστοιχείων που έχει μετακινηθεί από το χρήστη:

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

Τώρα, για να κάνετε το κύλινδρο υποβάθρου με την ίδια ταχύτητα με το κείμενο που θέσαμε την κορυφαία τιμή του div να είναι η αρνητική τιμή του κυλίνδρου, κλείστε τη λειτουργία. Σαν:

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

Ωστόσο, το σημείο παράλληλης κύλισης είναι να μετακινηθεί με διαφορετική ταχύτητα, έτσι ώστε να ρυθμίσουμε την ταχύτητα πολλαπλασιάζοντας την τιμή με ένα κλάσμα, για παράδειγμα 0,2 για 20%:

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

Υπάρχει μόνο ένα ακόμα πράγμα που πρέπει να κάνετε για να ενεργοποιήσετε το εφέ και αυτό καλεί τη λειτουργία κάθε φορά που ενεργοποιείται το συμβάν κύλισης:

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

Έχοντας κάνει αυτό, ο κωδικός μας είναι πλήρης. Εάν δοκιμάσετε το αρχείο, θα δείτε ότι λειτουργεί. Για να αλλάξουμε την ταχύτητα, πρέπει να αλλάξουμε το κλάσμα της λειτουργίας. τα μικρότερα κλάσματα μειώνουν την ταχύτητα και τα υψηλότερα κλάσματα το αυξάνουν. Μπορείτε να δείτε το τελικό αποτέλεσμα αυτού του κωδικού στο αυτό το στυλό που δημιουργούσα.

συμπέρασμα

Όπως μπορείτε να δείτε δημιουργώντας ένα φαινόμενο parallax δεν είναι τόσο δύσκολο όσο μπορεί να περίμενε κανείς. Φυσικά, αυτό είναι απλώς ένα απλό παράδειγμα, αλλά μπορείτε να βασιστείτε σε αυτό για να δημιουργήσετε οποιοδήποτε είδος σύνθετου φαινόμενου parallax που σας αρέσει.

Έχετε χρησιμοποιήσει ένα φαινόμενο παράλλαξης σε ένα έργο; Έχετε μια καλύτερη μέθοδο; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, συρόμενη εικόνα προοπτικής μέσω Shutterstock.