StartupGiraffe Web Sitesini Oluşturmak

Yeniimizi başlattık StartupGiraffe web sitesi birkaç ay önce, ve biz ilgilenen herkes için önyüz bir parçası nasıl yaptığımız hakkında bir yazı yazmak anlamında.

Amacımız markamızı gösteren eğlenceli ve duyarlı bir site oluşturmaktı. Bir zamanlar arkadaşlarımız Namlu NY Sitenin grafik tasarımını yapmayı kabul ettiğimizde, bazı düzgün numaraların da çekilebileceğini biliyorduk. Onlara gerçekten uzun bir zürafayı istediğimizi söyledik, ancak tasarımları geri alana kadar tüm olasılıkları gerçekten görmedik: arka planda farklı renklere, açılara ve şekillere sahip çokgenler vardı; Ön planda, bir paralaks web sitesinde iyi çalışabilecek her türlü öğe vardı ... ve o muazzam zürafa vardı.

Bizim için sorun, sitenin performansını vergilendirmek ve kullanıcı deneyimini dağıtmak için Javascript ile fazla uzağa gitmediğimizden emin olmaktı. Sonuçta, bir “büyüyen zürafa” etkisinin lehine bir paralaks fikrini çıkarmaya karar verdik.

Etkinin bir örneğini görebilirsiniz. İşte ve kodla birlikte takip etmek isterseniz kaynak dosyaları buradan indirin .

Site yapısı

Temel düzeyde, site birbiri üzerine yığılmış 3 kardeş bölümleri içerir. Sitenin kopya ve ana içeriği üst katmana oturur, zürafa ikinci katmanda ve arka tabakadaki poligonal arka planda bulunur:

Bu demo için, arka plan sarıcısını çıkartacağız çünkü fazla bir şey yok.

Büyüyen zürafa etkisi

Temel olarak, amacımız zürafa yükselirken “Startup Giraffe” logosunu düzeltmek, ardından logosunu sayfanın normal akışına belirli bir noktada bırakmaktı. Zürafa, kullanıcı hareket etmeye başlar başlamaz yükselmeye başlaması gerektiğinden, ekran yüksekliği ne olursa olsun burnunun hemen kıvrımın altında olması gerekir.

Bunu yapmak için gerçekten çok çeşitli yollar var (ve kesinlikle önerilere açığız), ancak seçtiğimiz jQuery.waypoints kaydırma olaylarını algılamak ve yanıtlamak için bir araç olarak.

Zürafanın logonun arkasına kaydığından emin olmak için, logoyu “içerik” bölümünde sabit bir sarıcıya koyarız. Zürafa, içerik bölümünün bir kardeşi. Her iki bölüm kesinlikle konumlandırılmıştır.

HTML

CSS

body {background-color: #000;}#content-wrapper, #giraffe-wrapper {position: absolute;top: 0px;left: 0px;width: 100%;}#first-content {position: relative;}#big-logo-wrapper {position:fixed;top: 250px;width: 100%;max-width: 1920px;}#big-logo {width:465px; height:231px;display:block; margin:0 auto;}#giraffe {position: relative;left: 100px;height: 3200px;}

JavaScript

Bir sonraki adım zürafayı ve logoyu kurmaktı. Zeminin hemen altındaki zürafayı ayarlamak için JavaScript'i kullandık. Ardından, pencere bölümünün ilk yüksekliğinin yüksekliğini, logonun yukarı kaymasına izin vermeden önce zürafa için göstermek istediğimiz piksel sayısını ayarlayın.

$(function() {var windowHeight = $(window).height(),giraffe = $("#giraffe"),firstHeight = windowHeight + 380,firstContent = $("#first-content");giraffe.css("top", windowHeight + "px");firstContent.css("height", firstHeight + "px")});

Zeminin hemen altında gizli olan zürafa ile, sabit logonun altında yukarı doğru ilerlediğini görebiliyorduk. Ardından, logonun kaydırılmasına izin vermeliydik, böylece sayfada sabit kalmadı.

Yol işaretleri eklentisi, kullanıcı belirli bir DOM öğesini geçtiğinde bir işlevi çağırmamıza izin verir. Ayrıca kullanıcının hangi yönde ilerleyeceğini tespit etmemize olanak sağlar. Bu "yukarı" ve "aşağı" olayları kullanarak, logonun konum özelliğini sabit ve mutlak arasında değiştiren bir sınıf eklemek veya kaldırmak için kullandık.

Ayrıca, yolnoktanın konumunu tamsayı piksel değeriyle değiştirmek için yol noktası işlevinin ofset özelliğini de kullandık. Mutlak (kayan logo) sınıfı logoyu ana sayfanın altına hizalayacağından, ofsetin logonun yüksekliğinden ve logonun sitenin tepesinden uzaklığı ile ilk içerik div'inin toplam yüksekliğinden uzak olmasını istedik. (sayfa yüküne ayarladığımız).

 var logo = $('#big-logo-wrapper');firstContent.waypoint(function( direction) {if ( direction === 'down' ) {logo.addClass("first-scroll");} else {logo.removeClass('first-scroll');}},{offset: logo.height() + (parseInt(logo.css("top"))) - firstHeight});

Birkaç başka çan ve ıslık yanında, bu oldukça fazla. Logo, zürafanın sayfa başına yaklaşık 380 piksel almasına kadar sabit kalıyor.

Sorunuz var mı? Bunu yapmanın daha iyi bir yolu var mı? Yorumlarda bize bildirin.