[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: jQuery

  • jQuery – Fade in/out

    jqueryfade.jpg

    Jquery Fade In.Fade Out – Liberia Jquery que nos permitirá agregar efectos de desvanecimiento a cualquier elemento de nuestra web, sea Texto, imágenes o todo elemento dentro de un DIV. Los desvanecimientos se presentan en un 30% y al situarnos sobre el mismo lo lleva al 100%, haciéndolo visualmente muy atractivo.

    Ver DemosDescarga Script – Uso e Info Jquery Fade In.Fade Out

    Fuente visual-blast

  • Crear un Menu de navegación al estilo de Vimeo.com

    vimeo.jpg

    Si siempre te agrado el menú de navegación utilizado en Vimeo.com, hoy aprenderás a crearlos para tus proyectos personales. Posee un estilo muy llamativo y le efecto justo y necesario. Lo mas atractivo del menú, es el cuadro que despliega al situarnos en el cuadro de búsqueda, brindándonos más opciones que podremos elegir antes de realizarla las búsquedas por todo nuestro sitio.

    Ver Demo - Descarga de Codigo – Articulo Original  jankoatwarpspeed

  • Sexy Page Curls – Doblar tus esquinas con jQuery

    sexycurlplugin.jpg

    Anteriormente comentamos algunas opciones para lograr esos efectos donde la esquina de nuestra web simula una hoja de papel desplegándose. Efecto que muchos gustan ver y utilizar. Estos efectos solíamos generarlos mediante javascript + imágenes + .sfw (flash). Sexy Page Curls, nos muestra otra alternativa, esta vez basada en Jquery, con un efecto tan atractivo como los demás y con el mismo fin.
    Enlace Sexy Page Curls

    Via webmasterlibre

    1. <script type="text/javascript" src="turn/turn.js"></script>
    2. <link rel="stylesheet" type="text/css" href="turn/turn.css">
    3.  
    4. <script>
    5.   $(document).ready(function(){
    6.     $( '#target' ).fold();
    7.   });
    8.   </script>

  • Easy Slider – Plugin jQuery ideal para tu porfolio

    easyslider.jpg

    Otro agradable plugin jQuery para agregar a nuestra extensa lista. Easy Slider, como llama a este plugin Alen Grakalic, nos permitirá deslizar horizontalmente o verticalmente tanto imágenes como cualquier otro contenido que se nos ocurra. Es completamente configurable tan solo con CSS, lo que permite una integración realmente simple a nuestro sitio. Si desean ver una idea de cómo podrían llegar a implementar Easy Slider en sus porfolios, basta con visitar templatica, otro de los sitios de Alen Grakalic, donde ha logrado integrar Easy Slider de una forma maravillosa.

    Demos

    Mas Info Easy SliderDescarga ejemplos

    Uso:

    1. <script type="text/javascript" src="js/jquery.js"></script>
    2. <script type="text/javascript" src="js/easySlider.packed.js"></script>
    3. <script type="text/javascript">
    4.     $(document).ready(function(){  
    5.         $("#slider").easySlider({
    6.             orientation:'vertical'
    7.         });
    8.     });
    9. </script>

    agregando estilo

    1. /* Easy Slider */
    2.  
    3.     #slider ul, #slider li{
    4.         margin:0;
    5.         padding:0;
    6.         list-style:none;
    7.         }
    8.     #slider, #slider li{
    9.         /*
    10.             define width and height of container element and list item (slide)
    11.             list items must be the same size as the slider area
    12.         */
    13.         width:696px;
    14.         height:241px;
    15.         overflow:hidden;
    16.         }
    17.     span#prevBtn{}
    18.     span#nextBtn{}                 
    19.  
    20. /* // Easy Slider */

    Contenido

    1. <div id="slider">
    2.         <ul>               
    3.             <li><a href="#"><img src="images/01.jpg" alt="Descripcion" /></a></li>
    4.             <li><a href="#"><img src="images/02.jpg" alt="Descripcion" /></a></li>
    5.             <li><a href="#"><img src="images/03.jpg" alt="Descripcion" /></a></li>
    6.             <li><a href="#"><img src="images/04.jpg" alt="Descripcion" /></a></li>
    7.             <<li><a href="#"><img src="images/05.jpg" alt="Descripcion" /></a></li>        
    8.         </ul>
    9.     </div>

    El script automáticamente agregara la navegación “anterior” y “próximo”, pero se le ha asignado un ID (identificación) que pueden utilizar para darle un poco de estilo mediante CSS

    1. <span id="prevId"><a href="javascript:void(0);">Previous</a></span>
    2. <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

  • Crear un Widget Amazon Books con jQuery y XML

    amazonboxxml.jpg

    Create an Amazon Books Widget with jQuery and XML, un fabuloso tutorial paso a paso que nos permitirá crear un Widget Amazon Books con jQuery y XML, algo así como una caja donde exponer nuestros productos totalmente navegable mediante su carrusel. Inclusive nos permitirá añadir una breve descripción del producto, algo que lo torna mucho más interesante. Requiere de JavaScript y jQuery, esta ultima diseñada para recorrer documentos XML con facilidad, archivo que utilizaremos para actualizar los datos en nuestro widget de productos.

    Ver demoDescarga demo – Mas info Create an Amazon Books Widget
    Uso
    Realizar las llamadas desde nuestro encabezado < head > – Observar que se hace referencia a la ubicación del archivo book.xml, documento que utilizaremos para actualizar los datos de nuestro widgets:

    1. <script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    2. <script language="javascript" type="text/javascript" src="js/books.js"></script>
    3. <script language="javascript" type="text/javascript">
    4.  
    5.     $(function(){
    6.         BOOKS.init({
    7.             xmlPath : "data/books.xml",
    8.             imgPath : "images",
    9.             perView : 4
    10.         });
    11.     });
    12.  
    13. </script>

    Un poco de estilo

    1. #books {
    2.     width: 515px; /* optional */
    3. }
    4. #books img {
    5.     border: 0;
    6. }
    7. #books .clear_both {
    8.     clear: both;
    9. }
    10. #books .float_left,
    11. #books  ul li {
    12.     float: left;
    13.     display: inline;
    14. }
    15. #books .float_right {
    16.     float: right;
    17. }
    18. #books .overclear {
    19.     width: 100%;
    20.     overflow: hidden;
    21. }
    22.  
    23. /* styles */
    24.  
    25. #books .buttons {
    26.     position: relative;
    27.     height: 30px;
    28.     margin: 0 0 5px 0;
    29. }
    30. #books .prev {
    31.     position: absolute;
    32.     top: 0;
    33.     left: 0;
    34.     visibility: hidden;
    35. }
    36. #books .next {
    37.     position: absolute;
    38.     top: 0;
    39.     right: 0;
    40. }
    41. #books .showing {
    42.     margin: 5px 60px 0 60px;
    43.     text-align: center;
    44.     font-size: .8em;
    45. }
    46. #books .top {
    47.     background: url(../images/books_top.gif) repeat-x;
    48. }
    49. #books .inner {
    50.     padding: 0 0 0 20px;
    51.     margin: 0 0 -20px 0;
    52.     background: url(../images/books_left_mid.gif) repeat-y;
    53. }
    54. #books  ul {
    55.     margin: 0;
    56.     padding: 0;
    57.     list-style-type: none;
    58.     background: url(../images/books_right_mid.gif) repeat-y top right;
    59. }
    60. #books  ul li {
    61.     display: none;
    62.     position: relative;
    63.     margin: 0;
    64.     padding: 0 20px 20px 0;
    65.     font-size: .8em;
    66.     z-index: 1;
    67. }
    68. #books  ul li.loader {
    69.     display: block;
    70.     float: none;
    71.     height: 115px;
    72.     margin: 0 0 20px -20px;
    73.     background: url(../images/books_loader.gif) no-repeat center center;
    74. }
    75. #books  ul li a.info {
    76.     position: absolute;
    77.     bottom: 20px;
    78.     right: 20px;
    79. }
    80. #books  ul li a.thumb {
    81.     display: block;
    82.     border: 1px solid #ddd;
    83. }
    84. #books  ul li a.thumb img {
    85.     display: block;
    86.     margin: 0;
    87.     padding: 3px;
    88. }
    89. #books .btm {
    90.     background: url(../images/books_btm.gif) repeat-x;
    91. }
    92. .books_tool_tip {
    93.     display: none;
    94.     position: absolute;
    95.     top: 0;
    96.     left: 0;
    97.     width: 350px;
    98.     z-index: 9999;
    99. }
    100. .books_tool_tip .books_pointer_left {
    101.     position: absolute;
    102.     top: 0;
    103.     left: 0;
    104.     width: 10px;
    105.     height: 10px;
    106.     background: url(../images/books_pointer_left.gif);
    107. }
    108. .books_tool_tip .books_pointer_right {
    109.     position: absolute;
    110.     top: 0;
    111.     right: 0;
    112.     width: 10px;
    113.     height: 10px;
    114.     background: url(../images/books_pointer_right.gif);
    115. }
    116. .books_tool_tip .inner {
    117.     border: 1px solid #ddd;
    118.     padding: 15px 15px 3px 15px;
    119.     margin: 0 0 0 9px;
    120.     background: #fff;
    121. }
    122. .books_tool_tip .inner_right {
    123.     margin: 0 9px 0 0;
    124. }
    125. .books_tool_tip .inner p {
    126.     font-size: .8em;
    127.     margin: 0;
    128.     padding: 0 0 12px 0;
    129. }

    Contenido

    1. <div id="books">
    2.         <div class="overclear buttons">
    3.             <a href="#" class="prev"><img src="images/books_prev.gif" width="40" height="30" alt="Previous" /></a>
    4.             <div class="showing"><!-- showing --></div>
    5.             <a href="#" class="next"><img src="images/books_next.gif" width="40" height="30" alt="Next" /></a>
    6.         </div>
    7.         <div class="overclear top">
    8.             <img src="images/books_left_top.gif" width="20" height="20" alt="" class="float_left" />
    9.             <img src="images/books_right_top.gif" width="20" height="20" alt="" class="float_right" />
    10.         </div>
    11.         <div class="inner">
    12.             <ul class="overclear">
    13.                 <li class="loader"><!-- loader --></li>
    14.             </ul>
    15.         </div>
    16.         <div class="overclear btm">
    17.             <img src="images/books_left_btm.gif" width="20" height="20" alt="" class="float_left" />
    18.             <img src="images/books_right_btm.gif" width="20" height="20" alt="" class="float_right" />
    19.         </div>
    20.     </div>

  • CSS | jQuery | Scripts

    16 /12 / 2008 - 9:15 pm

    Publicado por Nikko.

    • 15
    • 20.658

    Social Link

    Animated Drop Down Menu – Con jQuery y Css

    menuanimado.jpg

    Animated Drop Down Menu with jQuery, un bonito menú desplegable basado en jQuery y Css. Muy práctico para ubicarlo en la sección superior de nuestro header, ya que ocupa muy poco lugar y a su vez lograra llamar la atención de los usuarios. Me recuerda mucho al menú de NETTUTS como a todos los de la red de Envato.

    Ver DemoDescarga

    Uso
    Realizar las llamadas correspondientes desde nuestro encabezado < head>

    1. <script type="text/javascript" src="jsfiles/jquery.js"></script>
    2. <script type="text/javascript">
    3. $(document).ready(function () {
    4.     $("ul.menu_body li:even").addClass("alt");
    5.     $('img.menu_head').click(function () {
    6.     $('ul.menu_body').slideToggle('medium');
    7.     });
    8.     $('ul.menu_body li a').mouseover(function () {
    9.     $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    10.     });
    11.     $('ul.menu_body li a').mouseout(function () {
    12.     $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    13.     });
    14. });
    15. </script>

    agregar estilo

    1. ul, li{margin:0; padding:0; list-style:none;}
    2. .menu_head{border:1px solid #998675;}
    3.  
    4. .menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
    5. .menu_body li{background:#493e3b;}
    6. .menu_body li.alt{background:#362f2d;}
    7. .menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
    8. .menu_body li a:hover{padding:15px 10px; font-weight:bold;}

    nuestro Menu

    1. <img src="images/navigate.png" width="184" height="32" class="menu_head" />
    2. <ul class="menu_body">
    3. <li><a href="#">About Us</a></li>
    4. <li><a href="#">Portfolio</a></li>
    5. <li><a href="#">Clients</a></li>
    6. <li><a href="#">Blog</a></li>
    7. <li><a href="#">Support Forums</a></li>
    8. <li><a href="#">Gallery</a></li>
    9. <li><a href="#">Contact Us</a></li>
    10. </ul>

    Mas Info Animated Drop Down Menu with jQuery,

  • Start/Stop Slider – Más formas de generar contenido deslizante

    stopstarslider.jpg

    Start/Stop Slider otra atractiva propuesta por Chris Coyier para generar Contenido Deslizante (Slider) en tus proyectos online. Requiere de jquery y es completamente personalizable desde su archivo startstop-slider.js, basta tener un poco de conocimiento o tiempo y curiosidad. Start/Stop Slider posee una característica que es fácil deducir ya con el nombre del proyecto, nos permite mediante un botón parar la animación de nuestro slider cuando lo deseemos, una buena forma de permitir a nuestros usuarios leer con tranquilidad las cosas que deseemos mostrar en ellos. Además posee otras funcionalidades, que invito a que conozcan testeando Start/Stop Slider desde sus ordenadores.

    Ver Demo - Descarga - Mas Info Start/Stop Slider by: Chris Coyier

    Uso:
    Realizar la llamada correspondiente a nuestros script desde el encabezado de nuestro theme < head >…

    1. <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
    2.     <script type="text/javascript" src="js/startstop-slider.js"></script>

    Añadir estilo en nuesra hoja de Style.css

    1. #slider          { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
    2.                    position: relative; margin: 50px 0; }
    3. #mover           { width: 2880px; position: relative; }
    4. .slide           { padding: 40px 30px; width: 900px; float: left; position: relative; }
    5. .slide h1        { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
    6.                    color: #ac0000; }
    7. .slide p         { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
    8. .slide img       { position: absolute; top: 20px; left: 400px; }
    9. #slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
    10.                    padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

    Contenido

    1. <div id="slider">
    2.  
    3.             <div id="mover">
    4.        
    5.                 <div id="slide-1" class="slide">
    6.                
    7.                     <h1>Garden Rack</h1>
    8.                    
    9.                     <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
    10.                    
    11.                     <a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a>
    12.                    
    13.                 </div>
    14.                
    15.                 <div class="slide">
    16.                
    17.                     <h1>Tulip Bulbs</h1>
    18.                    
    19.                     <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
    20.                    
    21.                     <a href="#"><img src="images/slide-2-image.png" alt="learn more" /></a>
    22.                    
    23.                 </div>
    24.                
    25.                 <div class="slide">
    26.                
    27.                     <h1>Garden Gloves</h1>
    28.                    
    29.                     <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
    30.                    
    31.                     <a href="#"><img src="images/slide-3-image.png" alt="learn more" /></a>
    32.                    
    33.                 </div>
    34.            
    35.             </div>
    36.        
    37.         </div>


Pagina 7 de 9123456789