Tema: Multiscroll
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/05/2014, 12:14
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Multiscroll
Hola estoy haciendo mi web con multiscroll y quisiera saber como hago para añadir un tercer div en cada uno de los slider. Como en el ejemplo donde pone RONAN MEROThttp://wandaprint.com/home

Código Javascript: 
Ver original
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  6.     <title>multiscroll.js - split multi-scrolling pages plugin</title>
  7.     <meta name="author" content="Alvaro Trigo Lopez" />
  8.     <meta name="description" content="multiscroll plugin by Alvaro Trigo. Create divided multi-scrolling pages with two splited vertical layouts or panels." />
  9.     <meta name="keywords"  content="multiscroll,jquery,alvaro,trigo,plugin,divided,splitscreen,screen,panels,layouts,vertical,split,splited" />
  10.     <meta name="Resource-type" content="Document" />
  11.  
  12.     
  13.     <link rel="stylesheet" type="text/css" href="../jquery.multiscroll.css" />      
  14.     <link rel="stylesheet" type="text/css" href="examples.css" />       
  15.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  16.     <script type="text/javascript" src="../vendors/jquery.easings.min.js"></script>
  17.     <script type="text/javascript" src="../jquery.multiscroll.js"></script>
  18.  
  19.     <script type="text/javascript">
  20.      $(document).ready(function() {
  21.             $('#myContainer').multiscroll({
  22.                 sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
  23.                 anchors: ['first', 'second', 'third'],
  24.                 menu: '#menu',
  25.                 css3: true,
  26.                 paddingTop: '70px',
  27.                 paddingBottom: '70px'
  28.             });
  29.         });
  30.     </script>
  31.  
  32.  
  33.     <style>
  34.     h1{
  35.         color: #fff;
  36.     }
  37.     
  38.     /* Fixed header and footer.
  39.     * --------------------------------------- */
  40.     #header, #footer{
  41.         position:fixed;
  42.         height: 50px;
  43.         display:block;
  44.         width: 100%;
  45.         z-index:9;
  46.         text-align:center;
  47.         padding: 20px 0 0 0;
  48.         src: url(webfontkit-20130325-045916/stop-webfont.ttf);
  49.         background-color: #FF0000;
  50.         font-family: StopD;
  51.         color: #FFF;
  52.         font-size: 36px;
  53.     }
  54.     
  55.     #header{
  56.         top:0px;
  57.     }
  58.     #footer{
  59.         bottom:0px;
  60.     }
  61.     </style>
  62. </head>
  63. <body>
  64. <div id="header">ELECTRODISEÑO</div>
  65. <div id="footer">Footer</div>
  66.  
  67.  
  68. <ul id="menu">
  69.     <li data-menuanchor="first"><a href="#first">Inicio</a></li>
  70.     <li data-menuanchor="second"><a href="#second">Second slide</a></li>
  71.     <li data-menuanchor="third"><a href="#third">Third slide</a></li>
  72. </ul>
  73.  
  74. <div id="myContainer">
  75.  
  76.     <div class="ms-left">
  77.         <div class="ms-section" id="left1">
  78.         <img src="http://www.forosdelweb.com/../imagenes_menu/FOTO1.png" width="100%" height="100%"> </div>
  79.  
  80.         <div class="ms-section" id="left2">
  81.             <h1>Left 2 </h1>
  82.         </div>
  83.  
  84.         <div class="ms-section" id="left3">
  85.             <h1>Left 3</h1>
  86.         </div>
  87.     </div>
  88.     
  89.     <div class="ms-right">
  90.         <div class="ms-section" id="right1">
  91.         <img src="http://www.forosdelweb.com/../imagenes_menu/FOTO2.png" width="100%" height="100%"> 
  92.         </div>
  93.         <div class="ms-section" id="right2">
  94.             <h1>Right 2</h1>
  95.         </div>
  96.         <div class="ms-section" id="right3">
  97.             <h1>Right 3</h1>
  98.         </div>
  99.     </div>  
  100. </div>
  101.  
  102. </body>
  103. </html>

Gracias y un saludo