10000 French documentation extended · webdeveloper4testing/fullPage.js@51ad063 · GitHub
[go: up one dir, main page]
Skip to content

Commit 51ad063

Browse files
MercureTonyMercureTony
committed
French documentation extended
1 parent 89234d8 commit 51ad063

File tree

2 files changed

+149
-0
lines changed

2 files changed

+149
-0
lines changed

‎lang/french/how-to-activate-fullpage-extension-fr.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
1. Accédez à https://alvarotrigo.com/fullPage/extensions/activationKey.html. (Quelle est l'URL qui a été envoyée à votre adresse email lors de l'achat de l'extension)
2+
1. Présentez la **clé de licence** qui vous a été remise lors de l'achat de l'article. Aussi disponible dans votre courriel de confirmation d'achat.
3+
1. Un nom de domaine peut être requis afin d'obtenir la **clé d'activation** de votre produit.
4+
1. Une fois que vous avez la **clé d'activation** de votre extension et domaine (générée lors des étapes précédentes) vous devrez ajouter une option dans l'initialisation de fullpage.js sous la forme `nameOfExtension + "Key" : key`.
5+
6+
Par exemple :
7+
8+
```javascript
9+
new fullPage('#fullpage', {
10+
fadingEffect : true,
11+
fadingEffectKey:'ACTIVATION KEY DEVRAIT ÊTRE ICI',
12+
}) ;
13+
```
14+
15+
Idem pour le reste des extensions si vous les utilisez.
16+
Ce sont toutes les options de la clé d'extension pour le moment :
17+
18+
* `fadingEffectKey`
19+
* `responsiveSlidesKey`
20+
* `continuousHorizontalKey`
21+
* `interlockedSlidesKey`
22+
* `scrollHorizontallyKey`
23+
* `resetSlidersKey`
24+
* `offsetSectionsKey`
25+
* `dragAndMoveKey`
26+
* `parallaxKey`
27+
28+
Rappelez-vous que l'utilisation d'extensions nécessite l'utilisation de[`fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/blob/master/dist/fullpage.extensions.min.js) au lieu du fichier fullPage.js habituel (`fullpage.js`) comme expliqué dans[utilisation des extensions](https://github.com/alvarotrigo/fullPage.js#use-extensions).
29+
30+
### Que faire pour les environnements de développement / sites Web ?
31+
Aucune clé d'activation n'est nécessaire pour localhost et 127.0.0.0.1. Tout autre domaine de staging nécessitera une licence (Professionnel ou Business) qui permettra de générer une nouvelle clé pour ceux-ci.
32+
33+
Si vous avez une licence qui vous permet de générer plusieurs clés d'activation, vous pouvez utiliser le même code JS pour toutes. Dans ce cas, vous pouvez utiliser un tableau avec les différentes clés pour chaque domaine, par exemple, si nous utilisons l'extension `scrollHorizontally` pour 3 domaines, nous pouvons faire ce qui suit :
34+
35+
```js
36+
new fullPage('#fullpage', {
37+
scrollHorizontalement : true,
38+
défilementHorizontalementClé : ['domain1_key','domain2_key','domain3_key'].
39+
}) ;
40+
```
41+
42+
De cette façon, l'extension peut être utilisée dans n'importe lequel de ces 3 domaines.
43+
44+
### Clé de licence vs clé d'activation
45+
Les deux sont des clés différentes.
46+
- Vous obtenez la **clé de licence** lors de l'achat d'une extension.
47+
- Vous obtenez la **clé d'activation** lorsque vous activez votre extension pour un domaine particulier (sauf si vous utilisez la Business License). Pour le générer, vous avez besoin de la **clé de licence **.
48+
49+
La clé de licence est composée de 4 groupes de 8 caractères chacun (`XXXXXXXXXXXX-XXXXXXXXXXXXXX-XXXXXXXXXXXX-XXXXXXXXXXXX`) et la clé d'activation a une longueur variable et elle n'est pas composée de groupes séparés (`XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX`)
50+
Il est important de ne pas s'embrouiller les uns les autres.

‎lang/french/parallax-extension-fr.md

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
![](https://cloud.githubusercontent.com/assets/1706326/23580315/f28edab4-00f6-11e7-90f9-81ffafd77b0e.gif)
2+
3+
Lisez [Utilisation des extensions] (https://github.com/alvarotrigo/fullPage.js#use-extensions) avant d'utiliser l'option parallaxe.
4+
- [Démo en direct](http://alvarotrigo.com/fullPage/extensions/parallax.html)
5+
- [Structure HTML requise](https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax#required-html-structure)
6+
- [Application de l'arrière-plan](https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax#applying-the-background)
7+
- [Options](https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax#options)
8+
- [Options de l'effet parallax](https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax#parallax-effect-options)
9+
- [Méthodes](https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax#methods)
10+
11+
## HTML
12+
Afin d'utiliser l'effet parallaxe dans les sections et les diapositives, un nouvel élément devra être ajouté avec la classe `fp-bg`. Il devrait s'agir d'un `div` vide placé comme premier enfant de la section ou de la diapositive. Comme ce qui suit :
13+
14+
```html
15+
<div class="fp-bg"></div>
16+
```
17+
18+
Ce serait l'élément auquel vous devrez appliquer le fond au lieu de la section ou des diapositives à laquelle il appartient.
19+
20+
Par exemple :
21+
```html
22+
<div id="fullpage">
23+
<div class="section" id="section1">
24+
<div class="fp-bg"></div>
25+
Diapositive 1.1
26+
</div>
27+
<div class="section" id="section2">
28+
<div class="slide" id="slide2-1">
29+
<div class="fp-bg"></div>
30+
Diapositive 2.1
31+
</div>
32+
<div class="slide" id="slide2-2">
33+
<div class="fp-bg"></div>
34+
Diapositive 2.2
35+
</div>
36+
</div>
37+
</div>
38+
```
39+
40+
Cette structure peut être vue dans le code source de
41+
[la page de démonstration de parallax] (http://alvarotrigo.com/fullPage/extensions/parallax.html).
42+
43+
> Si pour une raison quelconque vous ne voulez pas ajouter un nouvel élément dans votre mise en page, vous pouvez définir l'option `property` dans `parallaxOptions` sur `background` afin d'appliquer l'effet à la section courante ou au fond de diapositive.
44+
> Comme expliqué dans Options de l'effet Parallax, je ne recommande de le faire que si c'est vraiment nécessaire, car les performances ne seront pas les mêmes que lors de l'utilisation des éléments `fp-bg`.
45+
46+
<br>
47+
48+
## Appliquer l'arrière-plan
49+
L'arrière-plan doit être appliqué à l'élément `fp-bg` de la même manière que vous l'appliqueriez à une section ou une diapositive.
50+
Vous pouvez utiliser le CSS ou le style en ligne.
51+
52+
Par exemple :
53+
```css
54+
#section1.fp-bg{
55+
background-image : url('imgs/alvaro-genious.jpg') ;
56+
background-size : cover;
57+
background-position : center 80% ;
58+
}
59+
```
60+
## Options
61+
62+
| Option | Description |
63+
| ------------- | ------------- |
64+
| **Parallax** | (par défaut `false`). [Extension de fullPage.js](http://alvarotrigo.com/fullPage/extensions/). Définit s'il faut ou non utiliser les effets de fond de parallax sur les sections / diapositives. |
65+
| **parallaxOptions:** | (par défaut : `{ type:'reveal', pourcentage : 62, propriété:'translate'}`). Permet de configurer les paramètres de l'effet de fond de parallaxe lors de l'utilisation de l'option `parallax:true`. |
66+
<br>
67+
68+
### Options de l'effet parallax
69+
Vous pouvez les voir en action [dans la page de démonstration](http://alvarotrigo.com/fullPage/extensions/parallax.html)
70+
71+
Description des options configurables disponibles dans l'option `parallaxOptions` :
72+
73+
| parallaxOptions | Description |
74+
| ------------- | ------------- |
75+
| **type** | (par défaut `reveal`) Les valeurs possibles sont `cover` et `reveal`. Permet de choisir si la section/la diapositive en cours sera supérieure ou inférieure à celle de destination. Lorsque vous utilisez le `cover`, la section ou la diapositive suivante apparaîtra couvrant une partie de la section ou de la diapositive en cours. L'utilisation de `reveal` inversera simplement l'effet et couvrira un peu celui de la destination tout en le révélant. |
76+
| **percentage** | (62 par défaut) permettent de définir le pourcentage de l'effet parallax par rapport à la fenêtre. Avoir une valeur plus petite aura un effet de parallaxe plus petit, et avoir 100, qui est le maximum, montrera des fonds complètement statiques. |
77+
| **propriété** | Les valeurs possibles sont `translate` et `background`. Définit si nous voulons appliquer l'effet parallax à l'élément `fp-bg` ou directement à la propriété de fond de la section ou de la diapositive. Il est recommandé d'utiliser la valeur par défaut pour cette option.
78+
|
79+
80+
Notez que l'utilisation de l'élément `fp-bg` fournit une bien meilleure performance car il utilise l'accélération matérielle translate3d. L'option est là pour ceux qui, pour une raison particulière, ne veulent pas ajouter l'élément supplémentaire `fp-bg` dans chaque section ou diapositive ou ne peuvent simplement pas modifier le balisage HTML.
81+
82+
## Méthodes
83+
Vous pouvez les voir en action [dans la page de démonstration](http://alvarotrigo.com/fullPage/extensions/parallax.html)
84+
85+
#### setOption(nomEnOption, valeur)
86+
Définit une valeur pour une option donnée. `nomEnOption` peut être l'une quelconque des options disponibles dans `parallaxOptions'. (`type`, `pourcentage` ou `bien`).
87+
```javascript
88+
modifier la valeur de la propriété `type`
89+
fullpage_api.parallax.setOption('type','cover') ;
90+
91+
modification de la valeur de la propriété `pourcentage`
92+
fullpage_api.parallax.setOption('percentage','30');
93+
```
94+
---
95+
### destroy()
96+
Éteint l'effet paralax.
97+
```javascript
98+
fullpage_api.parallax.destroy();
99+
```

0 commit comments

Comments
 (0)
0