[SOLUCIONADO] Uso de efectos para mostrar contenidos

madman_18 · #1 (**permalink**) 25/04/2013, 02:47

Hola a todos!

Estoy queriendo usar librerías que me animen el contenido a medida que voy desplazándome por la página.

Usando la librería http://johnpolacek.github.io/scrollorama/ siempre me saca firebug este fallo (por lo que supongo que es lo que no se hace ningún tipo de efecto):

TypeError: targetBlock is undefined
if (anim.pin || targetBlock.pin || targetIndex === 0) { line 313

y la verdad que no sé qué falla porque es la primera vez que uso ese tipo de librería..

Os pongo el código por si se os ocurre algo o veis algún fallo:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.2.min.js"></script>   
        <script type="text/javascript" src="js/scrollorama/js/jquery.scrollorama.js"></script>
        <script type="text/javascript" src="js/scrollorama/js/jquery.lettering-0.6.1.min.js"></script>
 
    </head>
    <body>
        <p id="console"></p>
        <header class="cabecera">
            <section class="barra-menu">
                <article class="logo">
                </article>
                <div class="limpia"></div>
            </section>
             <nav class="menu">
                <ul>
                    <li><a href="">Opcion 1</a></li>
                    <li><a href="">Opcion 1</a></li>
                    <li><a href="">Opcion 1</a></li>
                    <li><a href="">Opcion 1</a></li>
                </ul>
            </nav>
        </header>   
        <section class="scrollblock" id="bloque-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada, ligula aliquet sodales gravida, libero mi sagittis sapien, luctus pellentesque urna lacus a quam. Suspendisse nec est vitae sem ultricies pellentesque. Proin tellus diam, semper sit amet viverra quis, commodo in urna. Nullam ut enim libero. Ut consequat laoreet nulla a auctor. Pellentesque non quam quis augue semper iaculis. Suspendisse ac augue in mi rhoncus ullamcorper eu non risus. Nulla scelerisque sapien vel ligula adipiscing blandit. Suspendisse euismod cursus iaculis. Sed sed laoreet mi. Mauris iaculis rhoncus libero imperdiet luctus. Vivamus vulputate feugiat bibendum. Aliquam est eros, convallis sit amet accumsan et, tempus eget dui.
 
Nunc vel est mi. In facilisis bibendum mauris sed elementum. In ut turpis a elit mollis imperdiet at posuere nibh. Quisque commodo magna sit amet enim ultrices lacinia. Morbi pellentesque interdum sapien, ullamcorper congue lacus euismod id. Etiam nunc nisl, feugiat placerat euismod eget, aliquam in risus. Integer eu arcu erat, vitae cursus nunc. Sed porttitor, magna at tristique cursus, orci sapien fermentum mauris, a pellentesque nisi neque sit amet dolor.
 
Maecenas dapibus quam quis tellus viverra viverra porttitor orci dignissim. Suspendisse aliquam malesuada turpis, vel fermentum velit bibendum nec. Maecenas rutrum pharetra mollis. Fusce lacus erat, suscipit sed tristique eu, molestie a leo. Sed in rhoncus libero. Etiam sit amet nisl nibh, sed tristique ipsum. Nunc sit amet ligula nibh, ac accumsan mauris. Aenean ullamcorper molestie lectus, id scelerisque ante tincidunt eu. Duis pretium elit condimentum lorem lobortis congue.
 
In dolor magna, interdum non vulputate sed, cursus vitae arcu. Sed sodales neque eget ipsum gravida lacinia. Aliquam quam magna, auctor at malesuada id, gravida eget tortor. Integer ligula leo, fringilla sit amet vulputate in, elementum non sem. Nulla pharetra euismod varius. Mauris aliquam, velit ac dignissim lacinia, massa diam ullamcorper ligula, non vehicula mauris metus sit amet justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lectus lacus, tincidunt a congue id, aliquam id nibh. Morbi venenatis velit tincidunt risus congue accumsan pulvinar lectus lobortis.
 
Morbi pretium mauris eu nisl molestie cursus. Nunc iaculis lorem eu tortor sodales ac venenatis sapien dignissim. Vivamus elit sem, tristique sit amet suscipit vitae, iaculis et dui. Pellentesque et ante nisl. Maecenas ultricies sodales eros, eget tempor dui placerat sed. Curabitur laoreet pulvinar lacus id tempus. Proin lacus tellus, pellentesque non convallis eget, auctor eget tortor. Morbi lobortis, arcu non feugiat hendrerit, lorem diam vehicula ipsum, vel molestie ante orci quis turpis. 
        </section>
        <section class="scrollblock" id="bloque" style="position:relative!important;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada, ligula aliquet sodales gravida, libero mi sagittis sapien, luctus pellentesque urna lacus a quam. Suspendisse nec est vitae sem ultricies pellentesque. Proin tellus diam, semper sit amet viverra quis, commodo in urna. Nullam ut enim libero. Ut consequat laoreet nulla a auctor. Pellentesque non quam quis augue semper iaculis. Suspendisse ac augue in mi rhoncus ullamcorper eu non risus. Nulla scelerisque sapien vel ligula adipiscing blandit. Suspendisse euismod cursus iaculis. Sed sed laoreet mi. Mauris iaculis rhoncus libero imperdiet luctus. Vivamus vulputate feugiat bibendum. Aliquam est eros, convallis sit amet accumsan et, tempus eget dui.
 
Nunc vel est mi. In facilisis bibendum mauris sed elementum. In ut turpis a elit mollis imperdiet at posuere nibh. Quisque commodo magna sit amet enim ultrices lacinia. Morbi pellentesque interdum sapien, ullamcorper congue lacus euismod id. Etiam nunc nisl, feugiat placerat euismod eget, aliquam in risus. Integer eu arcu erat, vitae cursus nunc. Sed porttitor, magna at tristique cursus, orci sapien fermentum mauris, a pellentesque nisi neque sit amet dolor.
 
Maecenas dapibus quam quis tellus viverra viverra porttitor orci dignissim. Suspendisse aliquam malesuada turpis, vel fermentum velit bibendum nec. Maecenas rutrum pharetra mollis. Fusce lacus erat, suscipit sed tristique eu, molestie a leo. Sed in rhoncus libero. Etiam sit amet nisl nibh, sed tristique ipsum. Nunc sit amet ligula nibh, ac accumsan mauris. Aenean ullamcorper molestie lectus, id scelerisque ante tincidunt eu. Duis pretium elit condimentum lorem lobortis congue.
 
In dolor magna, interdum non vulputate sed, cursus vitae arcu. Sed sodales neque eget ipsum gravida lacinia. Aliquam quam magna, auctor at malesuada id, gravida eget tortor. Integer ligula leo, fringilla sit amet vulputate in, elementum non sem. Nulla pharetra euismod varius. Mauris aliquam, velit ac dignissim lacinia, massa diam ullamcorper ligula, non vehicula mauris metus sit amet justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lectus lacus, tincidunt a congue id, aliquam id nibh. Morbi venenatis velit tincidunt risus congue accumsan pulvinar lectus lobortis.
 
Morbi pretium mauris eu nisl molestie cursus. Nunc iaculis lorem eu tortor sodales ac venenatis sapien dignissim. Vivamus elit sem, tristique sit amet suscipit vitae, iaculis et dui. Pellentesque et ante nisl. Maecenas ultricies sodales eros, eget tempor dui placerat sed. Curabitur laoreet pulvinar lacus id tempus. Proin lacus tellus, pellentesque non convallis eget, auctor eget tortor. Morbi lobortis, arcu non feugiat hendrerit, lorem diam vehicula ipsum, vel molestie ante orci quis turpis. 
        </section>        
        <script>
        $(document).ready(function() {          
            // initialize the plugin, pass in the class selector for the sections of content (blocks)
            var scrollorama = $.scrollorama({
                            enablePin:'false',
                            blocks:'.scrollblock' 
                        });
            // assign function to add behavior for onBlockChange event
            scrollorama.onBlockChange(function() {
                var i = scrollorama.blockIndex;
                $('#console')
                    .css('display','block')
                    .text('onBlockChange | blockIndex:'+i+' | current block: '+scrollorama.settings.blocks.eq(i).attr('id'));
            });
            
            // animate some examples
            scrollorama
                .animate('#bloque',{ delay: 200, duration: 600, property:'zoom', start:8 });
                });
    </script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-2821890-9']);
      _gaq.push(['_trackPageview']);
    </script>       
    </body>
</html>

Ya he encontrado lo que pasaba: Se ve que el efecto no puedes aplicarlo a todo el bloque, sino que debe ser al contenido de dicho bloque. :D