Construire le site Web StartupGiraffe

Nous avons lancé notre nouveau StartupGirafe site web il ya quelques mois, et nous avons voulu écrire un article sur la façon dont nous avons créé une partie de l'interface pour toute personne intéressée.

Notre objectif était de créer un site amusant et réactif qui mettait en valeur notre marque. Une fois nos amis à Barrel NY accepté de faire la conception graphique pour le site, nous savions que nous pourrions également tirer de quelques astuces. Nous leur avons dit que nous voulions une girafe vraiment grande, mais nous n’avons pas vraiment vu toutes les possibilités jusqu’à ce que nous ayons récupéré les dessins: il y avait des polygones de couleurs, d’angles et de formes différents en arrière-plan; au premier plan, il y avait toutes sortes d'éléments qui pouvaient bien fonctionner sur un site de parallaxe ... et il y avait cette énorme girafe.

Le défi pour nous était de nous assurer de ne pas aller trop loin avec le Javascript afin de taxer les performances du site et de distraire l'expérience utilisateur. Finalement, nous avons décidé d'abandonner l'idée d'une parallaxe en faveur d'un effet de "girafe en croissance".

Vous pouvez voir un exemple de l'effet ici , et si vous souhaitez suivre le code, vous pouvez télécharger les fichiers sources ici .

Structure du site

Au niveau de base, le site contient 3 sections jumelles empilées les unes sur les autres. La copie et le contenu principal du site se trouvent sur la couche supérieure, la girafe se trouve sur la deuxième couche et l'arrière-plan polygonal sur la couche arrière:

Pour cette démo, nous omettons le wrapper d'arrière-plan car il n'y a pas grand chose à faire.

Effet girafe croissant

Fondamentalement, notre objectif était de fixer le logo "Startup Giraffe" pendant que la girafe se lève, puis de libérer le logo dans le flux normal de la page à un certain point. Comme la girafe doit commencer à se lever dès que l'utilisateur commence à défiler, son nez doit être juste en dessous du pli, quelle que soit la hauteur de l'écran.

Il y a vraiment plusieurs façons de le faire (et nous sommes très ouverts aux suggestions), mais celle que nous avons choisie jQuery.waypoints comme moyen de détecter et de répondre aux événements de défilement.

Pour être sûr que la girafe glisse derrière le logo, nous plaçons le logo dans une enveloppe fixe à l’intérieur de la section "content". La girafe est un frère de la section de contenu. Les deux sections sont absolument positionnées.

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

L'étape suivante consistait à installer la girafe et le logo. Nous avons utilisé JavaScript pour définir la girafe juste en dessous du pli. Ensuite, définissez la hauteur de la première section comme étant la hauteur de la fenêtre plus le nombre de pixels que nous souhaitons afficher pour la girafe avant de laisser le logo défiler vers le haut.

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

Avec la girafe cachée juste en dessous du pli, on pouvait la voir défiler sous le logo fixe. Ensuite, il ne restait plus qu'à laisser le logo défiler pour qu'il ne reste pas figé sur la page.

Le plugin waypoints nous permet d'appeler une fonction lorsque l'utilisateur fait défiler un élément DOM. Il nous permet également de détecter dans quelle direction l'utilisateur doit faire défiler. Nous avons utilisé ces événements "haut" et "bas" pour ajouter ou supprimer une classe qui fait basculer la propriété de position du logo entre fixe et absolu.

Nous avons également utilisé la propriété offset de la fonction waypoint pour modifier la position du waypoint par une valeur de pixel entière. Étant donné que la classe absolue (logo défilant) alignera le logo au bas de son parent, nous voulions que le décalage soit la hauteur du logo plus la distance du logo par rapport au haut du site moins la hauteur totale du div du premier contenu (que nous définissons sur le chargement de la page).

 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});

Outre quelques autres cloches et sifflets, c’est à peu près tout. Le logo reste maintenant fixe jusqu'à ce que la girafe atteigne environ 380 pixels sur la page.

Vous avez des questions? Vous avez une meilleure façon de le faire? Faites le nous savoir dans les commentaires.