Renseignement technique utilisée

Résolu

kush91170 Messages postés 57 Date d'inscription Statut Membre Dernière intervention -
kush91170 Messages postés 57 Date d'inscription Statut Membre Dernière intervention - 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 !! :)

Afficher la suite

A voir également:

Renseignement technique utilisée
Logiciel dessin technique gratuit - Télécharger - CAO-DAO
Notice technique pdf - Guide
Faux support technique - Accueil - Arnaque
Mytf1 un problème technique est survenu - Forum Box et Streaming vidéo
Fdj suite à une erreur technique merci de réessayer ultérieurement ✓ - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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 Statut Membre Dernière intervention 3

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 Statut Membre Dernière intervention 3

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 !

Problème pcs

MyTF1 "Un problème technique est survenu"

Pcs coupon déjà utilisé

mode d'emploi pour le Ce 0168

Votre réponse

Discussions similaires