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.

To jest cały HTML, który będziemy potrzebować. Cały tekst ma na celu upewnienie się, że obejmuje całą stronę, aby przewijanie było konieczne. Przejdźmy do CSS:

CSS

CSS wymagany do stworzenia efektu paralaksy jest naprawdę prosty, jeśli zrozumiesz, dlaczego jest napisane tak, jak jest. Najpierw musimy ustawić obraz tła pliku .bg div, a następnie musimy powstrzymać div przed przewijaniem, ponieważ akcja przewijania zostanie zastosowana przez jQuery; więc musimy ustawić jego pozycję na ustaloną. Następnie ustawiamy szerokość na 100%, a wysokość na 300%, aby upewnić się, że element div jest większy niż rzeczywisty ekran. Ustawiamy go w lewym górnym rogu i na koniec dajemy indeks z -1, aby upewnić się, że jest on renderowany pod tekstem.

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

To wszystko, czego potrzebujemy dla bg div, teraz wystarczy tylko nadać reszcie naszej stronie (chociaż jest to całkowicie opcjonalne, nie ma wpływu na przewijanie paralaksy):

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

Spróbuj przewinąć stronę teraz, a zobaczysz, że tekst przewija się, ale tło pozostaje niezmienione. Zamierzamy to zmienić za pomocą naszego jQuery:

JQuery

To, czego chcemy, aby jQuery zrobiła, to sprawdzenie, w jakim stopniu użytkownik przewinął i przesunąć tło z mniejszą prędkością. Zamierzamy stworzyć funkcję o nazwie parallax i utworzyć zmienną, która będzie utrzymywać wartość pikseli przewiniętych przez użytkownika:

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

Teraz, aby przesuwać tło z tą samą prędkością, co tekst, ustawiamy najwyższą wartość elementu div jako wartość ujemną zwoju, a następnie zamykamy funkcję. Tak jak w przypadku:

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

Punktem przewijania paralaksy jest jednak przemieszczanie się z inną prędkością, więc aby dostosować prędkość, pomnóżmy wartość przez ułamek, na przykład 0,2 na 20%:

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

Jest jeszcze jedna rzecz do zrobienia, aby uruchomić efekt i to wywołanie funkcji za każdym razem, gdy zostanie wywołane zdarzenie przewijania:

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

Po wykonaniu tego nasz kod jest kompletny. Jeśli przetestujesz plik, zobaczysz, że działa. Aby zmienić prędkość, musimy zmienić ułamek w funkcji; mniejsze frakcje zmniejszają prędkość, a wyższe frakcje ją zwiększają. Możesz zobaczyć ostateczny wynik tego kodu w to pióro, które stworzyłem.

Wniosek

Jak widać, tworzenie efektu paralaksy nie jest tak trudne, jak można się było spodziewać. Oczywiście jest to prosty przykład, ale możesz na tym zbudować, aby stworzyć dowolny rodzaj złożonego efektu paralaksy, który Ci się podoba.

Czy użyłeś efektu paralaksy w projekcie? Czy masz lepszą metodę? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, przesuwanie perspektywy obrazu przez Shutterstock.