Tema: Paso rápido de hojas simulado con un pageFlip
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/01/2013, 12:18
Avatar de Bravenap
Bravenap
 
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años, 11 meses
Puntos: 4
Paso rápido de hojas simulado con un pageFlip
Hola a todos. Vuelvo de nuevo por aquí después de mucho tiempo para ver si me podéis echar una mano. Estoy atascado en una simulación de una libro con paso de hojas. En concreto, quiero que cuando se estén cargando nuevos contenidos parezca que se están pasando las hojas rápidamente. La simulación hacia adelante o hacia detrás de una en una está conseguido gracias al código Pageflip v0.3.2 de Charles Mangin, pero no el efecto automático que intento definir en la función pasaPaginas(). Se usa conjuntamente con jQuery 1.8.2.

He quitado muchas de las líneas comentadas porque me paso de longitud.

principal.js

Código Javascript: 
Ver original
  1. var tNormal = 500;
  2. var omiteAjustes = false;
  3.  
  4. $(document).ready(function(){ ajustaPaginas(); });
  5.  
  6. function ajustaPaginas() {
  7.     var alto = $('.pageContent').first().height();
  8.     var ancho = $('.pageContent').first().width();
  9.     $('.pageContent').each(function(oP) {
  10.         var $pc = $(this);
  11.         var $p1 = $pc.children('div').children('p').first();
  12.         if(typeof $p1.html() !== 'undefined' && $p1.html() !== false) {
  13.             var text = $p1.html().trim();
  14.             var first = text.charAt(0);
  15.             if(first!='<') { $p1.html('<span class="inicial">'+first+'</span>'+text.substring(1)); }
  16.         }
  17.  
  18.         $pc.css({'overflow':'visible','visibility':'hidden','display':'block'});
  19.         var rAlt = $pc.children('div').first().height();
  20.         $pc.css({'overflow':'hidden','visibility':'visible','display':'block'});
  21.         while($pc.height() < rAlt) {
  22.             var copy = $pc.clone().attr('id', 'copia'+oP).css( {
  23.                 'margin-top':'-'+(alto-20)+'px',
  24.                 'height':alto*2+'px',
  25.                 'background-position-y':(alto-20)+'px'});
  26.             $pc.css('clip','rect(0px '+ancho+'px '+(alto-5)+'px 0px)')
  27.             $pc.after(copy);
  28.             $pc = $pc.next('.pageContent');
  29.             alto = alto*2;
  30.         }
  31.     });
  32.     if($('.pageContent').length % 2 != 0){ 
  33.         $('#pagesContainer').append('<div class="pageContent"><div></div></div>');
  34.     }
  35.     
  36.     var totPags = $('.pageContent').length;
  37.     $('.pageContent').each(function(i,p) {
  38.         if(i % 2 == 0) {
  39.             $(p).append('<div class="pagIzda">'+(i+1)+'</div>').css({
  40.                 'background-image':'url(\''+rutaDef+'imagenes/fondoLibroImpar2.jpg\')',
  41.                 'background-position-y':'left','background-size':'100%'});
  42.             if(parseInt($(p).css('background-position-y')) != 0) {
  43.                 $(p).children('.pagIzda').css('top',(parseInt($(p).css('background-position-y'))*2)-5);}
  44.             if(i != 0) {
  45.                 //$(this).children(':last').prepend('< ').css({'cursor':'pointer'}).click(function() { previousPage(); });
  46.                 //$('#pagPrev').show().click(function() { previousPage(); });
  47.             } else {
  48.                 //$('#pagPrev').hide();
  49.             }
  50.         } else {
  51.             $(p).append('<div class="pagDcha">'+(i+1)+'</div>').css({
  52.                 'background-image':'url(\''+rutaDef+'imagenes/fondoLibroPar2.jpg\')',
  53.                 'background-position-y':'right','background-size':'100%'});
  54.             if(i != (totPags-1) ) {
  55.                 //$(this).children(':last').append(' >').css({'cursor':'pointer'}).click(function() { nextPage(); });
  56.                 //$('#pagSig').show().click(function() { nextPage(); });
  57.             } else {
  58.                 //$('#pagSig').hide();
  59.             }
  60.         }
  61.     });
  62.     
  63.     pageWidth = $(".pageContent:first").width();
  64.     pageHeight = $(".pageContent:first").height();
  65.     $("#pagesContainer").css("width", 2 * pageWidth).css("height", pageHeight);
  66.     $(".pageContent > div:first-child").css("width", pageWidth).css("height", pageHeight);
  67.     pageLayout();
  68. }
  69.  
  70. function pasaPaginas() {
  71.     $('#pagesContainer').html('');
  72.     //pageLayout();
  73.     $('#pagesContainer').append('<div class="pageContent"><div></div></div>');
  74.     $('#pagesContainer').append('<div class="pageContent"><div></div></div>');
  75.     $('#pagesContainer').append('<div class="pageContent"><div></div></div>');
  76.     $('#pagesContainer').append('<div class="pageContent"><div></div></div>');
  77.     pageIndex = $('.pageContent').length - 2;
  78.     //omiteAjustes = true;
  79.     pageLayout();
  80.     var q = new Queue();
  81.     for(var n = 0; n < 10; n++) {
  82.         q.add(function(proxy) { nextPage(1000); proxy.end(); });
  83.         q.add(function(proxy) { espera(); proxy.end(); });
  84.         //q.add(function(proxy) { pageLayout(); proxy.end(); });
  85.         q.add(function(proxy) { previousPage(0); proxy.end(); });
  86.         q.add(function(proxy) { espera(); proxy.end(); });
  87.        //q.add(function(proxy) { pageLayout(); proxy.end(); });
  88.     }
  89.     q.process();
  90.     return;
  91.     omiteAjustes = false;
  92. }
  93.  
  94. function espera() {
  95.     setTimeout('',1000);
  96.     var d = new Date();
  97. }
  98.  
  99. var Queue = function() { this._tasks = []; };
  100. Queue.prototype.add = function(fn, scope) {
  101.     this._tasks.push({ fn: fn, scope: scope });
  102.     return this;
  103. };
  104. Queue.prototype.process = function() {
  105.     var proxy, self = this;
  106.     task = this._tasks.shift();
  107.     if(!task) { return; }
  108.     proxy = { end: function() { self.process(); } };
  109.     task.fn.call(task.scope, proxy);
  110.     return this;        
  111. };
  112. Queue.prototype.clear = function() {
  113.     this._tasks = [];
  114.     return this;
  115. };
  116.  
  117. /* 
  118. Javascript Pageflip v0.3.2 by Charles Mangin ([email protected])
  119. Creative Commons License
  120. ...
  121. */
  122.  
  123. var page1, page2, page3, page4, page0, pageN1;
  124.  
  125. var pageIndex = 0;
  126. var pageWidth;
  127. var pageHeight;
  128.  
  129. function pageLayout() {
  130.     page1 = $(".pageContent:eq(" + pageIndex + ")");
  131.     page1.addClass("page1").css("zIndex", 1);
  132.     page2 = $(".pageContent:eq(" + parseInt(pageIndex + 1) + ")");
  133.     page2.addClass("page2").css({"left": pageWidth,"zIndex": 3,"paddingRight":0,"width": pageWidth});
  134.  
  135.     if( $(".pageContent").length > parseInt(pageIndex + 2) ) { // if there's a next page...
  136.         if(!omiteAjustes) {$('#pagSig div').show().unbind('click').click(function() { nextPage(tNormal); });}
  137.         page3 = $(".pageContent:eq(" + parseInt(pageIndex + 2) + ")");
  138.         page3.addClass("page3").css({"left": pageWidth * 2,"zIndex": 4,"width":0,"marginLeft":0,"paddingLeft":0});
  139.         page4 = $(".pageContent:eq(" + parseInt(pageIndex + 3) + ")");
  140.         page4.addClass("page4").css({"left": pageWidth,"zIndex": 2});
  141.     } else {
  142.         $('#pagSig div').hide();
  143.     }
  144.  
  145.     if(pageIndex > 1) {
  146.         if(!omiteAjustes) {$('#pagPrev div').show().unbind('click').click(function() { previousPage(tNormal); });}
  147.         page0 = $(".pageContent:eq(" + parseInt(pageIndex - 1) + ")");
  148.         page0.addClass("page0").css({"left": 0,"zIndex": 0});
  149.         pageN1 = $(".pageContent:eq(" + parseInt(pageIndex - 2) + ")");
  150.         pageN1.addClass("pageN1").css({"left": 0,"zIndex": 0});
  151.     } else {
  152.         $('#pagPrev div').hide();
  153.     }
  154. }
  155.  
  156. function previousPage(flipTime) {
  157.  
  158.     page0.css("zIndex", 6).css("paddingRight",0);
  159.     page0.children("div:first").css("marginLeft",-1 * pageWidth)
  160.     pageN1.css("zIndex", 5).css("width",0);
  161.     page0.children("div:first").animate({marginLeft: 0}, flipTime);
  162.     page0.animate(
  163.         {left: pageWidth,width: pageWidth,paddingRight: 30},
  164.         {duration: flipTime,specialEasing: {left: "swing",width: "swing",paddingRight: "linear"}
  165.     }
  166.     );
  167.     pageN1.animate(
  168.         {width: pageWidth}, flipTime, "swing", function() {
  169.             page1.removeClass("page1").unbind('click');
  170.             page2.removeClass("page2").unbind('click');
  171.             page3.removeClass("page3");
  172.             page4.removeClass("page4");
  173.             page0.removeClass("page0");
  174.             pageN1.removeClass("pageN1");
  175.             pageIndex -= 2;
  176.             pageLayout();
  177.             $(this).dequeue();
  178.         }
  179.     );
  180.    if(omiteAjustes) {pageLayout();}
  181. }
  182.  
  183. function nextPage(flipTime) {
  184.     page3.animate( {left: 0,width: pageWidth},{duration: flipTime},{easing: "swing"});
  185.     page2.animate({width: 0}, flipTime, "swing", function() {
  186.         page1.removeClass("page1").unbind('click');
  187.         page2.removeClass("page2").unbind('click');
  188.         page3.removeClass("page3");
  189.         page4.removeClass("page4");
  190.         if(pageIndex > 1) {
  191.             page0.removeClass("page0");
  192.             pageN1.removeClass("pageN1");
  193.         }
  194.         pageIndex += 2;
  195.         pageLayout();
  196.         $(this).dequeue();
  197.         }
  198.     );
  199.    if(omiteAjustes) {pageLayout();}
  200. }

Y las estructura HTML:
Código HTML: 
Ver original
  1. <section id="principal">
  2.   <div id="pagPrev"><div><img src="imagenes/flechaIzda.png" /></div></div>
  3.   <div id="pagSig"><div><img src="imagenes/flechaDcha.png" /></div></div>
  4.   <div id="pagesContainer">
  5.     <div class="pageContent"><div>
  6.       <p>Lorem ipsum dolor sit amet, ....</p>
  7.       <p>Lorem ipsum dolor sit amet, ....</p>
  8.     </div></div>
  9.     <div class="pageContent"><div>
  10.       <p>Lorem ipsum dolor sit amet, ....</p>
  11.       <p>Lorem ipsum dolor sit amet, ....</p>
  12.     </div></div>
  13.   </div>
  14. </section>

Muchas gracias.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!