Frise

Frise et tracés svg

1. Créer un ficher illustrator avec votre trait, si plusieurs tracé, tout mettre dans un seul calque.

Astuce : Sélectionner tous les claques > cliquer sur les 3 petits traits à gauche > inverser les calques

2. Exporter le tracé en svg

3. Importer le fichier dans Vivus Instant 

4. Réglages :

- choisir dans Animation type "one by one"
- Modifier si besoin la durée de l'animation dans "Duration in ms"

5. télécharger le fichier, le renommer "trait.svg"et l'importer dans "Template"

6. Ajouter dans le HTML le script du Viewportcheck. Attention de ne pas le mettre deux fois, si vous avez déjà ajouté les animations sur les wrappers.
Si c'est le cas, venir simplement ajouter la ligne en gras ci-dessous.

<script src="/js/modernizr.js"></script>
<script src="/js/jquery.viewportchecker.js"></script>
<script> $(document).ready(function() {
$('.wrapper-page-1 #wrapper-bloc-2').viewportChecker({classToAdd: 'frise',offset: 100});
});
var temp = $(".template-header").height();
$(".template-header").height(temp); <script>

7. Modifier dans le script au dessus la ligne en gras, la première partie de la ligne entre les '...', selon où vous souhaitez mettre la frise (page, wrapper bloc, wrapper content, tableau etc.)

8. ajouter dans le CSS :

.frise {
background-image: url(/template/trait.svg);
background-repeat: no-repeat;
background-position: 50%;
}

9. Exemples

Vaudeurs > histoire
Transports Guivarch > histoire
Villebougis > accueil

RETOUR