Renseignement technique utilisée

Résolu/Fermé

kush91170 Messages postés 57 Date d'inscription mercredi 8 janvier 2014 Statut Membre Dernière intervention 22 juillet 2015 - 27 juin 2015 à 15:38
kush91170 Messages postés 57 Date d'inscription mercredi 8 janvier 2014 Statut Membre Dernière intervention 22 juillet 2015 - 28 juin 2015 à 00:10

Bonjour à tous,

Je suis actuellement en phase de production de mon site perso. J'ai repéré une page que j'ai vraiment aimée et j'aimerais faire le même type sur ma page principale. Le principe est simple, lors du scroll, la page se coupe en deux verticalement, pour passer à l'autre page derrière. Pour illustrer mon explication voici le site en question : https://www.cinematheque.fr/zooms/demy/fr/index.php

C'est la première page, lorsqu'on clique sur "entrer". J'aimerais savoir comment je pourrais faire ça. Merci d'avance pour vos réponses !! :)

A voir également:

Renseignement technique utilisée
Impossible d'allumer la lampe torche car la lumière est utilisée par une autre application ✓ - Forum Sony
Logiciel faux contrôle technique - Forum Logiciels
Mytf1 un problème technique est survenu ✓ - Forum Réseaux sociaux
Samsung ce0168 fiche technique - Forum Samsung
Mémoire utilisée sans raison ✓ - Forum Virus

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
27 juin 2015 à 16:03

Bonjour
en fait ca ne change pas de page
ce sont 2 div en position absolute et par dessus le reste avec z-index
au clic sur entrer les 2 div obtiennent un margin left et right négatifs (-50%)
grace à la function animate() de jquery
http://jquery.developpeur-web2.com/documentation/effets/animate.php
donc
html : 2 div + le reste du contenu

css : 2 div en position absolute et par dessus avec z-index

jquery : fonction click() fonction animate() + bibliothèque jquery

kush91170 Messages postés 57 Date d'inscription mercredi 8 janvier 2014 Statut Membre Dernière intervention 22 juillet 2015 3
27 juin 2015 à 16:13

D'accord ok, en fait c'est tout con finalement, je voyais pas du tout le truc comme ça. En tout cas je te remercie grandement, tu m'as bien débloqué ! Merci encore !!

kush91170 Messages postés 57 Date d'inscription mercredi 8 janvier 2014 Statut Membre Dernière intervention 22 juillet 2015 3
28 juin 2015 à 00:10

J'aurais besoin de ton aide une dernière fois, je ne comprends pas mais mon code ne fonctionne pas, pourtant tout m'a l'air bon, tu aurais une idée ? Merci :)

<section id="block">
    <div id="left">
        <button id="go">» Run</button>
    </div>    
    <div id="right"></div>
</section>

$(document).ready.(function(){
    $( "#go" ).click(function() {
      $( "#left" ).animate({
          marginLeft: "-50%",
          left: "-=50"
        }, 1500);
  });
});

$(document).ready.(function(){
    $( "#go" ).click(function() {
      $( "#right" ).animate({
          marginRight: "-50%",
          right: "-=50"
        }, 1500);
  });
});

Discussions similaires

-HELP- Les MASTERMINDS !

Fausse vignette controle technique

MyTF1 "Un problème technique est survenu"

Site LE BON COIN : Une erreur technique est survenue

revue technique evinrude

Discussions similaires

Newsletters