L'éclaireur: Creating an animated brochure with Webflow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

By

Camille

July 7, 2024

-

5

minutes of reading

La présence en ligne est aujourd'hui primordiale, et pour tous les secteurs, même celui de l'immobilier !

Le besoin

Dans le cas du bâtiment de l'éclaireur, il était nécessaire de rendre consultable leur brochure papier sur leur site. Seulement, l'insertion simple du PDF n'était pas suffisante, et ils souhaitaient une véritable brochure animée, avec :

  • Animation des pages tournées, comme lorsque l'on consulte un livre physique
  • Animation d'arrivée des éléments, pour ajouter un peu de douceur
  • Un design responsive pour être visible aussi bien sur téléphone que sur ordinateur

Pour toutes ces raisons, il était donc nécessaire de construire la brochure en HTML / CSS.

La structure HTML / CSS avec Webflow

L'avantage de Webflow, est qu'il permet de construire grâce à une interface WYSIWYG 1 du code HTML et CSS.

Ce qui signifie qu'au final, si vous aviez construit votre site en "codant pour de vrai" (notez bien la présence de guillemets 🙈 ) vous auriez au final produit plus ou moins les mêmes lignes de code, avec le même "langage de programmation" (pour mes amis les développeurs, encore une fois, notez les guillemets 🙊)

Pourquoi c'est un avantage ? Parce qu'on peut injecter autant de custom code qu'on le souhaite, qu'il soit HTML, CSS ou JS. Ainsi, Webflow n'a plus vraiment de limites, car ce qui n'est pas encore faisable nativement peut-être fait en intégrant les lignes de code dans la page.

Dans le cas appliqué de la brochure du site de "L'éclaireur", nous avons donc développé dans un premier temps une structure statique grâce à Webflow, en intégrant quelques lignes de code CSS non possibles nativement sur Webflow pour la rendre totalement responsive.

Exemple avec le code ci dessous qui s'assure que les pages de la brochure aient toujours le bon format, soit un format de 2/3 en desktop, peu importe le format de l'écran utilisé :

1  :root {
2  	--ratio : 2/3;
3    --brochure-padding: var(--adaptive-sizes--32px);
4  }
5  
6  /* Si ecran plus haut que large - On passe en relatif à la largeur de l'écran et non la hauteur */
7  @media screen and (orientation: portrait) and (min-width: 992px) {
8    .brochure_aspect {
9      max-height: calc(100vw - (var(--brochure-paddings) * 2));
10      max-width: calc((100vw - (var(--brochure-paddings) * 2)) * 2 * var(--ratio));
11    }
12    .brochure_page {
13      font-size: 0.75vw;
14      max-height: calc(100vw - (var(--brochure-paddings) * 2));
15      max-width: calc((100vw - (var(--brochure-paddings) * 2)) * var(--ratio));
16    }
17  }

Il est possible de voir le rendu et de le tester directement dans le designer Webflow, ce qui rend la mise en place de ces codes et HTML CSS encore plus simple.

1 : WYSIWYG = What You See Is What You Get, est une manière de construire des interfaces qui s'est beaucoup démocratisée avec l'avènement du no-code. Elle permet d'accélérer la vitesse de développement pour ceux qui sont du domaine, tout en rendant le développement plus simple pour ceux qui en on besoin sans être des experts.

La force des variables CSS

Vous remarquerez peut-être l'usage de variables CSS et leur puissance est sans limite.

Là où avant, lors de l'ajout de code custom dans une page il pouvait devenir compliqué de le modifier pour une personne moins technique, ces dernières ont vraiment amené une facilité de modification pour tous.

Ici, il serait possible sans avoir à venir modifier directement le code de changer l'espace autour de la brochure, ainsi que le ratio de cette dernière.

NB : à noter que pour que l'exemple soit complet, les variables sont ici définies dans le code, mais elles pourraient être définies depuis l'onglet "Variables" du projet Webflow.

Prenez garde à la responsivité

Mais en soit, en construisant avec Webflow, il est assez aisé de se rendre compte de l'apparence de notre site sur toutes les tailles d'écrans.

L'adaptation du ratio se fait simplement grâce à une dérivé du code présenté pour les formats ordinateurs.

Le plus gros challenge ici sera de garder la même structure au sein de chaque page, car vous n'aurez en général pas beaucoup de marge de manoeuvre si vous souhaitez garder chaque page similaire à la version papier sur le téléphone.

Je vous conseillerai ici d'opter pour des unités relatives à leur parent, tel que le em ou le cqw afin de pouvoir jouer en fonction des pages sur la taille de la police par rapport à son parent, ce dernier pouvant s'adapter à la largeur ou hauteur en fonction du besoin de chaque page.

L'animation "livre" avec Turn.JS

Une fois la structure HTML créée avec Webflow, nous pouvons donc interagir avec via du Javascript.

Quand il s'agit de créer des animations de type livre, la meilleure librairie disponible à ce jour est turn.js selon moi.

Très simple à mettre en place, elle propose un panel de fonction pour avoir des intégrations clavier et personnaliser les effets.

Il suffit d'ajouter les bons sélecteurs sur votre page et le tour est joue !

Choisir ses sélecteurs JS (ou jQuery)

Que ce soit pour du JavaScript, ou son framework jQuery, je vous conseille d'utiliser la fonctionnalité des custom attributs de Webflow plutôt que de prendre des classes ou mettre des ids.

Ces deux derniers sont trop souvent modifiés, soit par Webflow lui-même lors de copier coller intempestif, soit par des personnes faisant des mises à jour dans le Webflow. Les attributs ont l'avantage de ne pas être utilisés pour le design lui-même et sont donc moins souvent modifiés.

Vous pouvez voir notre article sur comment ajouter et utiliser les attributs sur Weflow pour plus de détails 😉

Une fois vos attributs placés, et votre petit code JS intégré, votre animation de brochure est en place.

Et la responsivité ?

Turn.js s'occupe lui même de passer de deux pages à une quand la taille l'écran le demande, donc pas besoin de vous en préoccuper pour le coup !

Ajouter des contrôle clavier

Si vous souhaitez que vos pages puissent être tournées via le clavier, vous pouvez simplement ajouter le code suivant dans votre page (après le parametrage de turn.js)

Dans l'exemple ci-dessous, il s'agit des touches flèche gauche et droite, pour faire respectivement précédent et suivant :

1var Webflow = Webflow || [];
2  Webflow.push(function () {
3    loadApp()
4
5    document.addEventListener("keydown", function (event) {
6      if (event.key === "ArrowRight") {
7        flipbook.turn("next");
8      } else if (event.key === "ArrowLeft") {
9        flipbook.turn("previous");
10      }
11    });
12
13    document.addEventListener('click', function (e) {
14      if (e.target.matches('[cd-custom-next="trigger"]')) {
15        flipbook.turn("next");
16      } else if (e.target.matches('[cd-custom-previous="trigger"]')) {
17        flipbook.turn("previous");
18      }
19    });

Les animations d'arrivé des éléments avec jQuery et JS

Place maintenant à la dernière étape : les animations d'arrivé.

Définition des animations

Vous avez la possibilité de définir différentes animations en fonction des éléments. Par exemple, nous avons fait une animation "slide from left" pour les textes, mais une animation de "zoom out" pour les images :

1  const animationOneSelector =
2        'p, h1, h2, h3, h4, h5, h6';
3  const animationTwoSelector =
4        'img, svg';
5
6
7flipbook.bind("turning", function (event, page, view) {
8      flipbook.find(animationOneSelector).stop().css({
9        opacity: 0,
10        position: 'relative',
11        left: '-10px'
12      });
13      flipbook.find(animationTwoSelector).stop().css({
14        transform: 'scale(1.2)',
15        opacity: 0
16      });;

Les sélecteurs pourraient ici encore être des attributs si on souhaite pouvoir contrôler avec plus de détails l'animation de chaque élément, ou avec des sélecteurs globaux, comme dans l'exemple, pour quelque de très uniforme.

Ajouter un délai entre l'animation de chaque élément

Pour une effet encore plus sympa, nous avons décidé d'ajouter un petit délai entre chaque élément, pour avoir quelque chose de vraiment progressif et smooth.

Prenez <contact> avec nous

We love a challenge

//
Contact us
-
-
->
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--

What our customers have to say

Admittedly, we're not very objective about our prowess,

but them... Yes !

The communication was always nice, considerate, and warm. Camille gave honest feedback on some of my ideas and suggested ways to improve them. She was always open to feedback and took it well. I also found the technical quality, project structure, and animations excellent.

Isabell Hergoz

Founder

Working with Codelius agency and Camille was actually made IT fun, not stressful. She has a unique combination of getting the high level design, giving experienced inputs, the French artistic touch and ability to implement low level custom solutions. At the end of the project I wished she was a collage. Hope to work with her again one day.

Adam M.

Operations Manager & BI Analyst

Camille and the Codelius team delivered exactly what we needed in a timely manner - she was a pleasure to work with and we look forward to working with them again in the future.

Tessa

Co-Founder

Camille is the right person for your webflow, airtable and other nocode projects. She's professional, a good listener and does high-quality work. I recommend her without hesitation!

Sébastien Pieta

Manager

Great, we're super happy to receive the site so we can make the returns, thank you very much!

[...] At first glance, we're very happy!

Constantin R.

Co-founder

The advantages of working with Codelius: responsiveness, flexibility and rigor

Mathieu

CEO

From design to development, the result is exactly what we wanted, and it's really very beautiful. We're delighted with the project. On the dev side - setting up the design - Camille was superbly patient and flexible in making sure I got the desired result down to the pixel. Hats off to Camille!

Jeff

Manager

[...] Codelius was able to meet this need, offering us fast, clean results. When we needed something a little more advanced, [...] they went beyond technology to create a custom solution! They were always on hand to answer our questions and help us get the hang of things!

Grégoire G.

CEO

Camille is so strong that I won't recommend her, I want to keep her all to myself ;p Super fluid, fast and devilishly efficient. Clearly above my expectations and perfectly briefed with very little to go on. A nugget!

Basptiste W.

CEO

Working with Camille was really easy. We used a Google Doc and WhatsApp and only needed one quick video call. I was very happy with the price and the quality of the site.

Chris Tyler

Founder

We've been certified experts by Webflow themselves since 2020. It's our tool of choice, with Webflow we can do wonders!

Most of our Webflows developments are based on a Figma model. It enables our customers to validate a design before conceiving it.

We partner with a web design agency to combine our know-how and offer our customers the best option for their wildest projects.

why?
how?

We answer your questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Contact us

Are you Webflow experts?

Yes! ✨

Camille, our head trainer, has been a certified Webflow expert since January 2022 🤩

Since then, she has continued to update herself with new best practices to make sure she trains you to the best of her ability.

How many people will be working on my project?

There are several of us in the company, and we each have our own specialities 👀

We will choose who will be in charge of your project depending on the requests you have, but in any case, you will never be in contact with more than two people, to avoid loss of information and time 🙌

Of course, if you request it, you will be able to meet the inner workings of the machine 🙊

How many people work for Codelius?

There are currently two of us! A couple of entrepreneurs, united by the desire to do our best every day, but also to become the best versions of ourselves.

During your projects, you'll probably only be in touch with me, the site's little voice, aka Camille 😉 Geoffrey prefers to stay in the shadows 🙊

Do you work well?

As best we can!

We are committed to providing quality and easy-to-use solutions for our customers over time 🙌

How long does development take?

The development time depends on the project you wish to carry out (size of the site, advanced functionalities or not, application, etc), and on the resources you are able to provide (models, images, logo, graphic charter, etc) ✨

But since we know that "it depends" is not a satisfactory answer, here are a few pointers to help you determine the duration of your project ✌️

  • Website project with mock-ups already created by a designer, simple arrival animations: approx. 15 days development time
  • Website project with designs created directly on Webflow: approximately 1 month of design and development.
  • Simple application (customer account and a few functions) with mock-ups already created by a designer: approx. 2 months' development time
  • Complex application (customer account and numerous functions) with mock-ups already created by a designer: approx. 4 months' development time
  • Simple and complex applications with designs created directly on Webflow: between 4 and 6 months' development time

The best way to find out how long your project will last is to contact us and tell us all about it , and that's over here! 👇