Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Animation pour la transition entre les pages.

  • KalinKessler
  • KalinKessler's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 3 months ago #146295 by KalinKessler
Animation pour la transition entre les pages. was created by KalinKessler
Bonsoir je cherche à créer un effet de transition entre les pages de questions. En effet la transition entre les différentes pages est à mon gout un peu sec :laugh: ce qui fait qu'on sent moins la différence d'un groupe de question à un autre, à part le texte qui change. Comment dois je m'y prendre?
Merci de m'avoir lu
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 months ago #146296 by DenisChenu
Replied by DenisChenu on topic Animation pour la transition entre les pages.
Tu peux jouer avec les effets de transition css :

1. Tu ajoute une classe 'loading' au body
2. Tu ajoute 2 événement : window.onbeforeunload et $(document).ready(function(){
3. Class loading: opacity: 0et les transition sur body sur body

Et voila. APrès tu peut utiliser width/height/color / etc ....
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
  • KalinKessler
  • KalinKessler's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 3 months ago #146299 by KalinKessler
Replied by KalinKessler on topic Animation pour la transition entre les pages.
Merci bien.. j'ai pas trop bien compris, dans quelle partie du code on peut trouver le body et ou ajouter nos deux éventements
merci encore pour votre spontanéité.
The topic has been locked.
  • KalinKessler
  • KalinKessler's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 3 months ago #146309 by KalinKessler
Replied by KalinKessler on topic Animation pour la transition entre les pages.
Bonjour, j'ai retrouver le body
1. j'ai ajouter la class loading comme vous l'avez dit.
2. j'ai aussi ajouter les 2 evenements dans template.js en copiant dans le lien que vous m'avez donner.
3. j'ai ajouter dans template.css les propriétés sur le body et la class loading. mais ça ne marche toujours pas. j'ai vraiment besoin de votre aide. merci d'avance .
voici les codes.
1.
Code:
<body class="loading default lang-{SURVEYLANGUAGE} {SURVEYFORMAT}">
 
    <nav class="navbar navbar-default navbar-fixed-top" id="topsurveymenubar">
        <div class="navbar-header col-xs-12 col-sm-6 col-lg-8">
2.
Code:
window.onbeforeunload = function() {
        $("body").removeClass("loaded").addClass("loading");
   };
  disableEnterSubmit();
  fixLabelClass();
  $(document).ready(function(){
    removeBack();
    addScrollTop();
    fixSelectWidth();
    if(bMoveLanguageSelect || bCloneNavigator){$("<div class='tools cloned-tools' />").appendTo("#head .wrapper");}
    if(bCloneNavigator){cloneNavigator();}
    if($("#changelangbtn").length &amp;&amp; bMoveLanguageSelect){moveLanguageSelect();}
    if( ($("#changelangbtn").length &amp;&amp; bMoveLanguageSelect) || bCloneNavigator){fixTitleWidth();}
    if(bHeaderFixed){headerFixed();}
    if(bMoveIndex){updateIndex();}
    hovercolumn();
    tableinput();
    movePrevButton();
    updateSlider();
    // Opera mini labelling touch
    operamini = window.operamini &amp;&amp; ({}).toString.call( window.operamini ) === "[object OperaMini]";
    if(operamini){
      $('label > input:checkbox, label > input:radio, input:radio + label, input:checkbox + label').bind('click', function(){
      });
    }
    $("body").removeClass("loading").addClass("loaded");
  })
3.
Code:
body.loading .starthidden{opacity:0}
body {-webkit-transition:opacity 400ms linear; transition:opacity 400ms linear; }
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 3 months ago #146310 by DenisChenu
Replied by DenisChenu on topic Animation pour la transition entre les pages.
Bien sur que cela ne passe pas : le lien que je t'ai donné il faut prendre uniquement ce dont tu as besoin.

....

Just les liges qui parlent de removeClass("loaded").addClass("loading"), regarde la documentation jquery : api.jquery.com/ , les quiges de mozilla sur la javascript : developer.mozilla.org/fr/docs/Web/JavaScript/Guide et sur le css developer.mozilla.org/fr/Apprendre/CSS

Sinon : pour des besoins professionnels : support.sondages.pro/ , mais je suis en vacances dès cette parème
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
More
7 years 3 months ago - 7 years 3 months ago #146315 by Ben_V
Replied by Ben_V on topic Animation pour la transition entre les pages.
Salut Denis,
si je peux me permettre, il est possible de lier ce post à cette autre discussion contenant une démo que tu as mise en ligne pour montrer un questionnaire avec background + transition (latérale) entre les pages... C'est un bon exemple pour aider @KalinKessler s'il veut/peut se dépatouiller en inspectant le code source, voire à le convaincre de te demander une prestation de service à ce sujet.. à ton retour bien sûr!

A ce sujet, bonnes vacances et fêtes de fin d'année à tous :)
Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Last edit: 7 years 3 months ago by Ben_V.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
Moderators: Nickko

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source