[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Scripts

  • NETTUTS – Tutoriales y tips sobre desarrollo

    netsus.jpg

    NETTUTS es un blog muy reciente que estará enfocado al desarrollo web y tips de gran utilidad, sin duda es un blog que promete mucho. Si notan un diseño similar al de PSDTUTS, es precisamente porque son ellos quienes están detrás de este blog. Tan solo lleva días online, pero ya podremos encontrar algunos tips muy interesantes, por ejemplo:

    tabsnetsus.jpg

    Crear Tabs usando CSS y jQuery - Una de las formas mas simples de introducir mucho contenido en una sección reducida, es mediante la utilización de “tabs”, en Nettuts podremos encontrar un tutorial muy completo para crear bonitos tabs que podremos usar posteriormente en nuestros proyectos. Si buscas algo simple será muy útil, pero les recomiendo el ejemplo en el cual se ha utilizado jQuery, porque posee unos efectos realmente extraordinarios.

    Ver Demo – Mas Info Create a Slick Tabbed Content Area using CSS & jQuery

    netpaypal.jpg

    Crear formularios de pagos Paypal - Un tips muy agradable que le servirá a aquellos que desean tener desde sus web un formulario integrado a su cuenta paypal, y el cual permita recibir los montos de una forma mas directa o simple. Tips útil para recibir donación o vender.

    Ver demo y mas Info Creating a PayPal Payment Form

    Via css-tricks

  • Spoiler Revealer – Ocultar contenido adicional con jquery

    spoiler.jpg

    Fade-in Spoiler Revealer, es una agradable técnica que veo en css-tricks, en la cual usando jQuery podremos ocultar o mostrar toda la parte de un texto y sustituirla por un ” revelar contenido adicional” o “seguir leyendo”. Inclusive al Mostar el contenido oculto, se produce un efecto desvanecimiento que lo hace ver muy bonito. Queda en ustedes, pensar en que proyecto en el cual trabajan podrá ser realmente útil.

    Ver DemoDescarga Ejemplo – Mas Info css-tricks
    Instalacion
    Añadimos a nuestro encabezado

    1. <script type="text/javascript" src="js/jquery.js"></script>
    2.    
    3.     <script type="text/javascript">
    4.     $(document).ready(function() {
    5.        
    6.         $("span.spoiler").hide();
    7.        
    8.          $('<a class="reveal">Reveal Spoiler &gt;&gt;</a> ').insertBefore('.spoiler');
    9.    
    10.         $("a.reveal").click(function(){
    11.             $(this).parents("p").children("span.spoiler").fadeIn(2500);
    12.             $(this).parents("p").children("a.reveal").fadeOut(600);
    13.         });
    14.  
    15.     });
    16.     </script>

    Uso

    1. <p>texto, texto, texto<span class="spoiler">Contenido oculto........</span></p>

  • CSS | Diseño Web | Scripts

    21 /04 / 2008 - 3:19 am

    Publicado por Nikko.

    • 15
    • 3.890

    Social Link

    Image Cross Fade Transition

    fadetransi.jpg

    En jqueryfordesigners podremos ver diversas técnicas para lograr fundidos mientras vamos generando transiciones entre una y otra imagen. Es un efecto sencillo pero que puede dar un estilo agradable a nuestros proyectos. Se puede lograr de una forma muy simple con CSS o mediante JavaScript, con una imagen que al posar el ratón sobre ella genere la transición y luego de haber dejado nuestro ratón vuelva lentamente a la imagen original con un desvanecimiento muy suave.

    Ver DemoDescarga Ejemplo – Mas info jqueryfordesigners – Mas demos 1, 2, 3

    Tecnica con jQuery
    En nuestro encabezado

    1. <script src="js/jquery.js" type="text/javascript"></script>
    2.  
    3.     <script type="text/javascript">
    4.     <!--
    5.    
    6.     $(function () {
    7.         // find the div.fade elements and hook the hover event
    8.         $('div.fade').hover(function() {
    9.             // on hovering over find the element we want to fade *up*
    10.             var fade = $('> div', this);
    11.  
    12.             // if the element is currently being animated (to fadeOut)...
    13.             if (fade.is(':animated')) {
    14.                 // ...stop the current animation, and fade it to 1 from current position
    15.                 fade.stop().fadeTo(250, 1);
    16.             } else {
    17.                 fade.fadeIn(250);
    18.             }
    19.         }, function () {
    20.             var fade = $('> div', this);
    21.             if (fade.is(':animated')) {
    22.                 fade.stop().fadeTo(3000, 0);
    23.             } else {
    24.                 fade.fadeOut(3000);
    25.             }
    26.         });
    27.     });
    28.    
    29.     //-->
    30.     </script>

    Un poco de CSS

    1. .fade {
    2.   position: absolute;
    3.   top: 100px
    4.   left: 100px
    5. }
    6.  
    7. .fade div {
    8.   position: absolute;
    9.   top: 0;
    10.   left: 0;
    11.   display: none;
    12. }

    Nuestra estructura

    1. <h2> Tecnica jQuery</h2>
    2. <div class="fade">
    3.   <a href="http://xyberneticos.com/"><img src="1.jpg" /></a>
    4.   <div>
    5.     <a href="http://xyberneticos.com/"><img src="2.jpg" /></a>
    6.   </div>
    7. </div>

    TECNICA con CSS

    1. img.fade {
    2.   opacity: 1;
    3.   -webkit-transition: opacity 1s linear;
    4. }
    5.  
    6. img.fade:hover {
    7.   opacity: 0;
    8. }
    1. <h2> Tecnica CSS</h2>
    2.       <span style="position: relative;">
    3.     <img src="2.jpg" />
    4.     <img
    5.      style="position: absolute; left: 0px;"
    6.      src="1.jpg" class="fade" />
    7. </span>

  • Menu Kwicks con jQuery

    kwicks.jpg

    Debo admitir que a lo largo del tiempo he conoció cantidad de menú que podríamos usar en nuestros proyectos. Cantidad de diseños y sobre todos efectos. Algo así como un menú adecuado para cada proyecto que nos encontremos encarando. Pero dentro de todos los que he probado o dentro de todos los diseños que me han gustado, uno de los que mas ha llamado mi atención es aquel que podremos encontrar en la Web oficial de MooTools, el cual posee un efecto denominado “kwicks” y el cual en una oportunidad comente aquí (basado en MooTools). Pero hoy acabo de encontrar este mismo menú, que se caracteriza por generar un desplazamiento al estilo de marcianas horizontales, pero esta vez realizado en base a jQuery. El efecto sigue siendo igual de extraordinario, lo que me recuerda que de una vez por todas, lo debería usar en mi porfolio personal. Si aun no entienden de lo que hablo, tan solo vean el menú citado en el ejemplo.

    Ver DemoDescarga Ejemplo – MAs Informacion jeremymartin

    Instalación:
    Alojamos los archivos necesarios en nuestro servidor, y realizamos las llamadas correspondientes a nuestros archivos.

    1. <script type="text/javascript" src="jquery.js"></script>
    2. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    3. <script type="text/javascript" src="jquery.kwicks.js"></script>
    4.  
    5. <script type="text/javascript">
    6. $().ready(function() {
    7.     $('#menukwicks .kwicks').kwicks({
    8.         maxWidth: 205,
    9.         spacing:  5
    10.     });
    11. });
    12. </script>

    damos estilo

    1. .kwicks {
    2.     list-style: none;
    3.     position: relative;
    4.     margin: 0;
    5.     padding: 0;
    6. }
    7.  
    8. .kwicks li {
    9.     width: 125px;
    10.     height: 100px;
    11.     margin-right: 5px;
    12. }
    13. #kwick1 {
    14.     background-color: #53b388;
    15. }
    16. #kwick1.active {
    17.     background-color: #86e6bb;
    18. }
    19. #kwick2 {
    20.     background-color: #5a69a9;
    21. }
    22. #kwick2.active {
    23.     background-color: #8d9cdc;
    24. }
    25. #kwick3 {
    26.     background-color: #c26468;
    27. }
    28. #kwick3.active {
    29.     background-color: #f5979b;
    30. }
    31. #kwick4 {
    32.     background-color: #bf7cc7;
    33.     margin-right: none;
    34. }
    35. #kwick4.active {
    36.     background-color: #efaffa;
    37. }

    Y por ultimo, la estructura de nuestro Menu

    1. <div id="menukwicks">
    2.     <ul class="kwicks">
    3.         <li id="kwick1"></li>
    4.         <li id="kwick2"></li>
    5.         <li id="kwick3"></li>
    6.         <li id="kwick4"></li>
    7.     </ul>
    8. </div>

    Via Anieto2kdiariothc

  • Galerias | Scripts

    17 /04 / 2008 - 4:30 am

    Publicado por Nikko.

    • 15
    • 11.887

    Social Link

    jQuery virtual tour – Para crear visitas virtuales

    vitualjquery.jpg

    jQuery virtual tour una extensión para simple panorama viewerr que nos permite jugar un poco más con jQuery añadiendo interactividad al transformar algunas vistas panorámicas en una visita virtual. jQuery virtual tour tiene la particularidad de ser accesible y puede funcionar incluso si el javascript no se ha activado. Para la navegación utiliza las etiquetas estándar < map > y < area /> con las cuales crearemos áreas en nuestro Tour virtual con información adicional. Quizas lo mejor sea que no hay necesidad de utilizar Flash, Quicktime o Java.

    Ver Demo – Mas info jQuery virtual tour
    Uso
    En Nuestro encabezado < head >, realizamos las llamadas correspondientes

    1. <link rel="stylesheet" type="text/css" href="css/thickbox.css" media="screen" />
    2. <link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" media="screen" />
    3. <script type="text/javascript" src="js/jquery.js"></script>
    4. <script type="text/javascript" src="js/jquery.panorama.js"></script>
    5. <script type="text/javascript">
    6.     $(document).ready(function(){
    7.         $("img.advancedpanorama").panorama({
    8.                     auto_start: 0,
    9.                         start_position: 0
    10.             /* add your execution parameters here */
    11.              });
    12.     });
    13. </script>
    14. <script type="text/javascript" src="js/cvi_text_lib.js"></script>
    15. <script type="text/javascript" src="js/jquery.advanced-panorama.js"></script>
    16. <script type="text/javascript" src="js/thickbox.js"></script>

    En nuestro contenido añadimos la imagen panorámica, y creamos las áreas interactiva mediante coordenadas. Añadimos la clase “thickbox” si se trata de imágenes.

    1. <img src="img/sculpteur.jpg" class="advancedpanorama" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />
    2. <map id="testmap" name="testmap">
    3.         <area shape="rect" coords="1653,72,1839,255" href="index.html" alt="vers la salle de formation" />
    4.         <area shape="rect" coords="2013,114,2091,210" href="img/statue1.jpg" alt="statues" class="thickbox" />
    5.         <area shape="rect" coords="1920,276,2070,351" href="img/gouges.jpg" alt="gouges" class="thickbox" />
    6. </map>

  • Window Growl 2.0 – Enviar mensajes emergentes mediante javascript

    wingrowl.jpg

    Window Growl es un bonito Script diseñado por Daniel Mota que nos permite enviar mensajes emergentes por medio de javascript. Es realmente muy fácil de emplear y sobre todo muy practico. Podemos usarlo creo que para cantidad de cosas, mostrar información personal o adicional, alertas, etc. Debo admitir, me encanto. Por cierto, podemos configurar diversas cosas, por ejemplo: la cantidad de segundos que deseamos se muestren nuestros mensajes emergentes.
    Ver DemoDescarga Ejemplo – Mas informacion Window Growl By Daniel Mota
    Instalacion:
    Realizamos las llamadas correspondientes desde nuestro encabezado

    1. <script type="text/javascript" src="growl/mootools-1.js"></script>
    2. <script type="text/javascript" src="growl/growl-compressed.js"></script>
    3. <link rel="stylesheet" href="growl/css.css" type="text/css">

    Uso:

    1. <a href="#" id="smoke" title="Show msg Smoke">Ver demo Smoke.</a>
    2. <a href="#" id="bezel" title="Show msg Bezel">Ver demo Bezel.</a>
    1. <script type="text/javascript">
    2.         $('smoke').onclick = function() {
    3.             Growl.Smoke({});
    4.             return false;
    5.         };
    6.        
    7.         $('bezel').onclick = function() {
    8.             Growl.Bezel({
    9.                 title: 'Window.Growl<br />By Daniel Mota'
    10.             });
    11.             return false;
    12.         };
    13.         var Log = {
    14.           save: function() {
    15.               new Request.HTML({url:'/log/save'}).post({'refer':document.referrer,'title':document.title});
    16.           }
    17.         };
    18.         Log.save();
    19.     </script>

  • MooRainbow – Crear nuestro propio selector de colores

    rainbow.jpg

    MooRainbow un poderoso Javascript utilizando también mootools que nos permitirá montar en nuestra Web, un bonito selector de colores, donde podremos visualizar y elegir aquellos colores que serán útiles para nuestros proyectos. Inclusive permite una personalización realmente muy fácil, y brinda agradables variantes a la hora de ser utilizado.

    • MooRainbow es completamente personalizable a través de un fichero CSS.
    • MooRainbow mantiene limpio su DOM y genera XHTML y CSS válido
    • MooRainbow proporciona, como contrapartida, un objeto que contiene RGB, HSB y HEX del color seleccionado.
    • MooRainbow es realmente rápido gracias a mootools.
    • MooRainbow funciona bien en Firefox / Safari / Opera / IE

    Ver demoDescarga Demo – Mas info moorainbow

    Instalacion:
    Descargamos los archivos a utilizar (mi demo incluye todo) y realizamos la llamada correspondiente a ellos desde nuestro encabezado.

    1. <script type="text/javascript" src="js/mootools-release.js"></script>
    2. <script type="text/javascript" src="js/mooRainbow.js"></script>

    Incluyendo también el llamado a la hoja de estilo

    1. <link type="text/css" rel="stylesheet" href="mooRainbow.css">

    Ahora debemos crear un nuevo objeto MooRainbow. Lo haremos dentro de nuestra etiqueta < head >

    1. <script type="text/javascript">
    2.     window.addEvent('domready', function() {
    3.     var r = new MooRainbow('myRainbow', {
    4.         'startColor': [58, 142, 246],
    5.         'onChange': function(color) {
    6.             $('myInput').value = color.hex;
    7.         }
    8.     });
    9. });
    10.  
    11. </script>

    Para finalizar, ya podremos insertar nuestra estructura en body. O mejor dicho nuestro selector de colores MooRainbow, donde deseamos mostrarlo en nuestra web. La forma de hacerlo:

    1. <label>
    2.     <img id="myRainbow" src="images/rainbow.png" alt="[r]" width="16" height="16" />
    3.     <input id="myInput" name="myInput" type="text" size="13" />
    4. </label>

    Este selector que acabamos de insertar aquí, es algo así como su versión estándar. En mi demo, seria el ejemplo numero UNO. Una pequeña imagen, que al hacer clic sobre ella abrirá nuestro selector de colores, y un casillero que almacenara los valores Hexadecimal de cada color que hemos seleccionado.
    Pero MooRainbow posee otras variantes, u otra forma de utilizar nuestro selector. Me remitiré solo ha comentar los demos que he creado. Lo que seria el ejemplo DOS de mi demo. Básicamente, una imagen que nuevamente abrirá nuestro selector de colores (pro cierto, esta vez mucho mas pequeño), pero evitando almacenar en un casillero los valores hexadeciamles generados al seleccionar cada color. Lo que significa, que si deseamos un color o el valor de un tono, lo obtendremos directamente copiándolo desde el mismo selector, ya que posteriormente no quedara almacenados en ningún casillero. De todas sigue siendo muy útil, al acostumbrarnos, y es otra buena opción, dependiendo el fin que deseamos darle a cada uno de estos selectores en cuestión.
    Instalacion ejemplo DOS:
    Si bien al comienzo hemos realizado la llamada a un fichero css, esta vez necesitaremos insertar unas líneas más de css para este demo. El código lo encontraran aquí.
    Una vez agregado las líneas de código css nuevas, nuevamente necesitaremos crear un objeto desde nuestro encabezado. Dentro de nuestra etiqueta < Head >

    1. <script type="text/javascript">
    2. window.addEvent('domready', function() {
    3. var demo3 = new MooRainbow('demo3', {
    4.     id: 'myDemo3',
    5.     imgPath: 'images/'
    6.     });
    7. });
    8. </script>

    y por ultimo, la imagen que abrirá nuestro selector de colores en nuestro contenido

    1. <label>
    2.     <img id="demo3" src="images/rainbow.png" rainbow.png" alt="[r]" width="16" height="16" class="rain" id="demo3" />
    3.     Click en el arco iris para abrir la paleta de colores miniatura
    4. </label>

    De todas formas, podrán ver y probar desde el demo a descargar