Défilement horizontal discret avec CSS et jQuery

Un de mes sites les plus préférés est celui du Oxford Hotel en Roumanie. J'aime la simplicité du site et comment il circule. J'essaie de créer un effet de défilement similaire en utilisant jquery et j'ai eu un certain succès jusqu'à un certain point. Mon problème est avec CSS ... Je ne suis pas un magicien dans ce département.Défilement horizontal discret avec CSS et jQuery

En tout cas, ... mes questions!

1. Comment puis-je d'abord m'assurer que la classe ".box" sera au centre de la page quand le lien correspondant est cliqué? En ce moment, il se positionne sur la gauche. Ensuite, comment puis-je modifier ce code pour que l'utilisateur ne puisse voir que la largeur de l'écran et non pas le navigateur/le reste de mes divs? .box? Référez-vous au lien Oxford si vous avez besoin de voir un exemple de ce que je voudrais réaliser.

Ceci est une partie de mon CSS actuel.

body { 
background: #f2f2f2; 
text-align:left; 
color:#666; 
font-size:14px; 
font-family:georgia, 'time new romans', serif; 
margin:0 auto; 
padding:0; 
} 

#menu { 
background: #333333; 
position: fixed; 
top: 0px; 
left: 0; 
border: 1px solid #000; 
clear: both; 
float: left; 
font-family: helvetica, sans-serif; 
font-size: 18px; 
text-transform: uppercase; 
margin: 0; 
padding: 18px; 
z-index: 500; 
filter: alpha(opacity=75); 
opacity: .75; 
} 

#menu ul{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 

#menu ul li{ 
list-style-type: none; 
color: #777; 
display: inline; 
margin: 0; 
padding: 0 10px 0 10px; 
} 

#menu ul li a{ 
text-decoration: none; 
list-style-type: none; 
color: #777; 
display: inline; 
margin: 0; 
padding: 0; 
} 

#menu ul li a:hover{ 
text-decoration: none; 
list-style-type: none; 
color: #fff; 
display: inline; 
margin: 0; 
padding: 0; 
} 

#container { 
position: absolute; 
top: 120px; 
width: 70000px; 
margin: 0; 
padding: 0; 
} 

.box { 
background: white; 
border: 3px dashed #f2f2f2; 
width: 600px; 
float: left; 
font-size: 10px; 
line-height: 15px; 
margin: 0; 
padding: 5px 30px 30px 30px; 
}

Source

2010-04-04 zen

C'est assez impressionnant de voir comment l'hôtel a réussi à fonctionner sans JavaScript. – zneak

@zneak: ils utilisent ** JS ** pour le défilement fluide. – BalusC

@BalusC: Je voulais dire que si vous désactivez Javascript, cela fonctionne toujours. Pas de défilement lisse, mais fonctionne toujours. – zneak

Votre CSS contient beaucoup de choses inutiles et n'est pas vraiment SSCCE -flavored, il est donc difficile de clouer la cause racine de votre problème. Pour commencer, vous pouvez le faire fonctionner dans un environnement JS-disabled à l'aide d'identificateurs de fragment (<a href="#someid"> avec <div id="#someid">). Le reste de la magie est fait avec overflow: hidden (de sorte que "autres" cases ne s'affichent pas) et position: relative (de sorte que l'élément sait où il est relativement à positionner).

Eh bien, voici un SSCCE pour que vous ayez quelque chose à commencer. Il suffit de le copier et de le coller.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 2573478</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('#menu a').click(function() { 
        $('#boxes').animate({ 
         left: -300 * $('.box').index($(this.hash)) // 300 is width of single box. 
        }, 1000); 
        return false; 
       }); 
      }); 
     </script> 
     <style> 
      #container { 
       position: relative; 
       width: 300px; 
       height: 300px; 
       border: 1px solid black; 
       overflow: hidden; /* So that #boxes doesn't appear in full glory. */ 
      } 
      #boxes { 
       position: relative; 
       width: 900px; /* 3 boxes of each 300px makes 900px. */ 
      } 
      #container .box { 
       float: left; 
       width: 300px; 
       height: 300px; 
      } 
      #box1 { background: #fcc; } 
      #box2 { background: #cfc; } 
      #box3 { background: #ccf; } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="boxes"> 
       <div id="box1" class="box">box1</div> 
       <div id="box2" class="box">box2</div> 
       <div id="box3" class="box">box3</div> 
      </div> 
     </div> 
     <ul id="menu"> 
      <li><a href="#box1">box1</a></li> 
      <li><a href="#box2">box2</a></li> 
      <li><a href="#box3">box3</a></li> 
     </ul> 
    </body> 
</html>

Vous pouvez trouver ici un live example. J'espère que cela t'aides.

Source

2010-04-04 04:52:18 BalusC

Vous avez de la chance, ami. Je viens a publié hier un nouveau plugin jQuery qui fait cette chose:

http://www.simplesli.de

J'ai essayé de le rendre aussi simple que possible de mettre en place, mais au fond, dans chaque diapositive, vous pouvez créer un div de quelque façon que vous aimez. Bonne chance!

Source

2010-04-06 20:03:29 dclowd9901

Lien en réponse mort. – Pang

Défilement horizontal discret avec CSS et jQuery

Répondre

Questions connexes