Créer un site parallax avec Drupal

Créer un site parallax avec Drupal

Jeudi, Août 1, 2013

Modules requis :
Omega 3, delta, Context, View, Views_field_view.

La bibliothèque javascript superscrollorama : http://johnpolacek.github.io/superscrollorama/

Ajouter au subtheme omega les fichiers .js de la bibliothèque scrollorama:

  1.   Placer les librairies javascript de scrollorama dans le dossier (a créer) 'js' du theme.
  2. Ajouter le code suivant dans le fichier template.php de notre subtheme omega :
    function fb_multimedia_preprocess_html(&$variables) {
      drupal_add_js(drupal_get_path('theme', 'fb_multimedia') . '/js/jquery.superscrollorama.js', array(
        'scope' => 'header',
        'weight' => '15'
      ));
      drupal_add_js(drupal_get_path('theme', 'fb_multimedia') . '/js/jquery-1.9.1.min.js', array(
        'scope' => 'header',
        'weight' => '16'
      ));
      drupal_add_js(drupal_get_path('theme', 'fb_multimedia') . '/js/greensock/TweenMax.min.js', array(
        'scope' => 'header',
        'weight' => '17'
      ));
    }

    (d'autre solutions existent pour ajouter plus simplement un .js a Drupal mais n'accepte pas les sous-dossiers dans le repertoire 'js'. >Plus d'info)

Créer les zones et regions dans le subtheme Omega

Nous créons de nouvelles zones dans notre soustheme Omega pour chaque "page" parallax.

  1. Dans MONTHEME.info ajouter les zones :
    zones[accueil] = 'Accueil'
    zones[internet] = 'Internet'
    zones[graphisme] = 'Graphisme'
    zones[portfolio] = 'Portfolio'
    zones[apropos] = 'A propos'
    zones[contact] = 'Contact'
    zones[blog] = 'Blog'


    Aller dans les paramètres du theme et placer les nouvelles zones dans la section contenu et paramètrer leur poid respectif pour les ordonner. Afin de récuperer ces éléments avec jquery, ajouter la classe 'parallax' à chacune.
  2. Ajouter les regions :
    regions[accueil_first] = 'Accueil first'
    regions[internet_first] = 'Internet first'
    regions[graphisme_first] = 'Graphisme first'
    regions[portfolio_first] = 'Portfolio first'
    regions[apropos_first] = 'A propos first'
    regions[contact_first] = 'Contact first'
    regions[blog_first] = 'Blog first'


    Aller dans les paramètres du theme et placer les nouvelles regions dans leur zone respectives. Indiquez également la largeur de chaque région.
  3. Exporter le theme pour enregistrer ces changements.

Créer une page d'accueil personnalisée

La page de Drupal par défaut comporte de infomations que nous ne souhaitons pas afficher.
Pour cela nous créons une nouvelle vue appelée 'front page' avec pour chemin 'front-page' sans titre et sans contenu. Specifier ensuite le chemin de cette page dans admin>site information>
page d'accueil par defaut: front-page

Configurer le menu

  1. Installer le module menu_attributes. Afin de specifier un ID à chaque item du menu.
    Les liens du menu doivent pointer sur les zones précédement créées sur la page d'accueil. par exemple :
    Nom du lien :  'Internet'
    lien : '#zone-internet'
     

Bienvenue sur le blog !

Il s'agissait au départ d'un recueil de notes donc certains billets sont plutôt succincts.
J'espère que vous y trouverez l'info qu'il vous manque dans votre recherche.
Vos commentaires sont les bienvenus.

Bonne lecture !

Mois / Années

Recherche