Pasé mucho tiempo eligiendo el tema para el tema de hoy. Como resultado, noté que aún no hemos creado colecciones con galerías de imágenes. En mi opinión es un tema excelente, ya que muchos sitios tienen galerías. Francamente, no todos son muy atractivos. Teniendo en cuenta las tendencias actuales en el desarrollo de jquery, html5, etc., pensé que debía haber soluciones mucho más atractivas que las que había encontrado antes. Entonces. Después de pasar un día, logramos encontrar una gran cantidad de guiones. De toda esta montaña decidí seleccionar solo porque me encanta, como ya habrás notado en publicaciones anteriores.
La galería de imágenes es aplicable no sólo en el caso de álbumes de fotos. El guión se puede utilizar, creo que sería aún más correcto, como portafolio para fotógrafos, diseñadores, etc. efectos jquery ayudará a atraer la atención de los visitantes y simplemente agregará elegancia a su sitio.
Entonces. Le informamos sobre una colección de complementos de galería de imágenes jquery para el sitio.
No olvides comentar y recuerda, para no perderte esta colección, puedes agregarla a tus favoritos haciendo clic en la estrella al final del artículo.
S Gallery Un atractivo complemento de galería de imágenes Jquery. La animación funciona usando css3. 
DIAMONDS.JSOcomplemento original para crear una galería de imágenes. Las miniaturas tienen forma de diamante, lo cual es muy popular en este momento. Este formulario está hecho usando css3. El único inconveniente de esta galería es la falta de una caja de luz en la que la foto se abriría en tamaño completo. Es decir, deberá atornillar el complemento de la caja de luz. Este script genera una cuadrícula adaptativa de imágenes en forma de diamante. 
Superbox Una galería de imágenes moderna usando Jquery, css3 y html5. Todos estamos acostumbrados al hecho de que cuando haces clic en una vista previa, la imagen completa se abre en una caja de luz (ventana emergente). Los desarrolladores de este complemento decidieron que la caja de luz ya había dejado de ser útil. Las imágenes de esta galería se abren debajo de la vista previa. Mire la demostración y compruebe que esta solución parece mucho más moderna. 
Galería Gamma Una galería de imágenes elegante, liviana y responsiva con una cuadrícula estilo Pinterest que se ha vuelto muy popular en estos días. El script funciona muy bien tanto en computadoras de escritorio como en dispositivos móviles Ah con cualquier resolución de pantalla. Una excelente solución para crear un portafolio de diseñadores web. 
CUADRÍCULA EN MINIATURA CON VISTA PREVIA AMPLIABLE El complemento es una cuadrícula de imágenes receptiva. Al hacer clic a continuación, aparecerá una foto más grande y una descripción. Bueno para crear un portafolio. 
jGalleryjGallery es una galería de imágenes responsiva de pantalla completa. Los efectos, transiciones e incluso el estilo se pueden personalizar fácilmente. 
Glisse.js Un complemento de galería de imágenes simple pero muy efectivo. Esta es exactamente la solución cuando necesitas crear un álbum de fotos. El complemento admite álbumes y tiene un efecto de volteo genial. 
Mosaic Flow Una galería de imágenes sencilla y responsiva con una cuadrícula estilo Pinterest. 
GalereyaOtra galería elegante con una cuadrícula estilo Pinterest filtrada por categoría. Funciona en navegadores: Chrome, Safari, Firefox, Opera, IE7+, navegador Android, Chrome móvil, Firefox móvil. 
less.jsGran galería de imágenes gratuita usando JQUERY, 5 y CSS3. Tiene una apariencia muy atractiva y sin duda llamará la atención de tus visitantes. 
flipLightBox Una galería de imágenes sencilla. Cuando haces clic en la vista previa, la imagen completa se abre en una caja de luz. 
blueimp GalleryGalería flexible. Capaz de enviar a ventana modal no sólo imágenes, sino también vídeos. Funciona muy bien en dispositivos táctiles. Es fácil de personalizar y es posible ampliar la funcionalidad utilizando complementos adicionales (consulte el siguiente complemento). El complemento de filtro jQuery es un elemento imprescindible para cualquier tipo de sitio web a través del cual podrá presentar un portafolio que funciona fantásticamente. Aquí les mostraré algunos de los mejores complementos de cartera de filtros jquery gratuitos y premium. Estos complementos se pueden utilizar con fines comerciales, corporativos, creativos, de portafolio o cualquier otro relacionado con la exhibición de trabajos de portafolio.
Supongo que es diseñador web y está buscando el mejor complemento de galería jquery filtrable para su cartera para su próximo proyecto. Si tengo razón entonces estás en el lugar correcto. Aquí encontrará algunos de los mejores complementos jQuery de filtro gratuitos y premium. Como diseñador web, también utilicé mucho tiempo este tipo de complementos en mi proyecto para cumplir con los requisitos de mi cliente.
En la mayor parte del tema, verá una galería de filtrado de portafolios donde cualquiera puede mostrar sus trabajos. Es una excelente manera de presentar portafolios en este momento. Estos complementos a continuación tienen todas esas características que también pueden cumplir con sus requisitos. Algunas características que debo mencionarle si no tiene suficiente conocimiento sobre complementos de filtro jquery.
La mayoría de los complementos son responsivos, vienen con múltiples animaciones y efectos de filtrado, animaciones CSS3 únicas, hermosos efectos de desplazamiento, algunos complementos son expandibles y también cada elemento tiene un control deslizante de carrusel separado que a través de puede mostrar más imágenes. Si desea ver una demostración, puede ver nuestra plantilla Bootstrap que lanzamos para nuestros usuarios de forma 100% gratuita. Agregamos el complemento filtrable Elastic Grid a SinglePro que encontrará a continuación. Espero que esta colección te ayude a encontrar el mejor complemento filtrable de jquery. Si esto le resultó útil y cree que puede ser útil para otros, no dude en compartir esta colección en las redes sociales. ¡Gracias!
Filtro gratuito/Complementos filtrables Isotope: filtra y ordena diseños mágicos Complementos de Jquery
Isotope es un complemento de filtro jquery muy conocido en la web. Este filtrado le permitirá implementar una increíble galería de filtrado fluido en su sitio web o plantilla. La mayoría de los diseñadores web utilizaron este complemento en sus proyectos. Es gratuito únicamente para uso personal y de código abierto. Si utiliza este complemento para proyectos comerciales, deberá adquirir una licencia comercial.
Mixitup – Complementos Jquery de filtrado y clasificación animados gratuitos
Mixitup es otro excelente complemento de filtrado de jquery que se puede utilizar perfectamente para cualquier tipo de galerías de portafolios, galerías de imágenes y cualquier otro propósito de galería de filtrado. Tiene una animación de filtrado hermosa y única con suavidad. Mixitup es un proyecto de código abierto bajo licencia Creative Common. Puedes usarlo para proyectos personales o de código abierto. Si desea utilizarlo para sus proyectos comerciales, debe adquirir una licencia comercial.
Shuffle: complementos de clasificación y filtrado responsivos gratuitos para Jquery
Shuffle es un increíble complemento jquery de filtro gratuito inspirado en los complementos de filtro más populares Isotope & Packery. Si está buscando un filtrado jquery para mostrar sus carteras de manera hermosa, Shuffle puede ser su elección correcta. Es un complemento de filtro de cartera jquery gratuito.
Elastic Grid: complemento de filtro de cartera JQuery responsivo
Elastic Grid es un fantástico complemento de filtro js gratuito que le permitirá agregar una galería de filtrado expandible para mostrar cualquier tipo de portafolios. Tiene una hermosa animación de filtro. Cada elemento también tiene un control deslizante de carrusel con contenido de texto. Al utilizar Elastic Grid, puedes darle un aspecto extra poderoso y único a tu proyecto.
jPList: complemento jQuery flexible y gratuito para ordenar, paginar y filtrar
jPlist es un complemento de filtrado jquery avanzado que ofrece algunas funciones avanzadas para filtrar cualquier tipo de datos. Puede filtrar o acortar los datos por páginas, paginación, búsquedas, etc.
Quicksand: complemento jquery gratuito para reordenar y filtrar elementos
Crea una galería filtrable usando Quicksand. Este complemento le permite filtrar sus contenidos por nombre, tamaño y tipos. Tiene una hermosa animación de filtrado que puede presentar muy bien su contenido. Es un complemento de filtro jquery completamente gratuito.
Filtrify: complemento jquery gratuito de filtrado avanzado de etiquetas
Filtrify es un fantástico complemento de clasificación y filtrado que viene con una función de búsqueda avanzada. Se construye con html5 y jQuery. Tiene funcionalidad de búsqueda en tiempo de ejecución. Podrás filtrar tus contenidos por categoría. No sólo eso, también puedes mostrar cuántos contenidos hay disponibles en cada categoría.
Filtro de contenido: complemento de filtro potente CSS3 y Jquery gratuito
Es un increíble complemento jquery de filtro de contenido que viene con algunas características avanzadas y fantásticas. Puede filtrar su contenido por categoría, casilla de verificación y botones de opción. También tiene una función de búsqueda en tiempo de ejecución que le permite filtrar sus contenidos sobre la marcha. Esto se puede utilizar para cualquier tipo de galería de filtrado de contenido o cartera.
Portafolio: complemento Jquery gratuito, interactivo y filtrable
¿Estás creando una plantilla de sitio web? ¿Quiere agregar una galería de portafolios filtrable para exhibir trabajos de portafolios? Entonces este complemento hará exactamente esto por usted. Puede filtrar sus imágenes, portafolios y sus increíbles trabajos utilizando este complemento. Es fácil de implementar y se puede utilizar perfectamente para la galería de filtrado de carteras.
jQuery ListNav – Complemento gratuito de filtrado jQuery basado en letras
ListNav es un complemento simple que se puede utilizar para filtrar el contenido listado. Si tiene muchos contenidos en un estilo de lista y desea agregar una funcionalidad de filtrado simple para esos contenidos, ListNav es perfecto para usted. Este complemento no tiene animación. Simplemente filtrará su contenido en la vista de listado.
No es un complemento de galería de filtrado como isotope, Mixitup. Es un fantástico complemento de filtro de búsqueda jquery en tiempo real. Podrá agregar funcionalidad de búsqueda en tiempo real con texto resaltado en su sitio web utilizando este complemento.
jQuery TickBack – Lista animada que filtra el complemento jQuery gratuito
Agregue una imagen filtrable simple o una galería de contenido usando TickBack. Se puede utilizar para filtrar trabajos de portafolios o cualquier otro relacionado con la exhibición de cualquier tipo de galerías. Es un complemento jquery de filtro de cartera simple y liviano que viene con una agradable animación aleatoria.
Guggenheim: complemento gratuito de filtrado, reordenamiento y paginación animados
Guggenheim viene con toneladas de funciones de filtrado que le permiten implementar una excelente galería de filtrado de imágenes o contenido. Este complemento incluye un control deslizante que significa que no son Solo se puede agregar funcionalidad de filtro. También puede agregar un control deslizante para su galería de contenido. Puede filtrar su contenido de varias maneras, como categoría, casilla de verificación, botones de opción, etc., con un control deslizante de carrusel.
Filtro premium/complementos filtrables Colio – Complemento de filtro de cartera jQuery expansor de contenido
Colio no es sólo un simple complemento de filtro jquery. Viene con un diseño moderno y único. Podrá implementar una galería filtrable con expansor de elementos que también tiene un control deslizante de contenido de carrusel e imágenes con caja de luz. Si está diseñando un sitio web comercial, corporativo o de cartera, este es un complemento imprescindible para su proyecto. Su proyecto será más creativo y poderoso al implementar este complemento jquery de filtro de cartera.
Magnet – Complemento de filtro jQuery de diseños
Magnet es un complemento de filtro de diseño de jquery muy agradable que a través de usted podrá crear diseños filtrables. Viene con animaciones y efectos de filtrado fluidos. Este complemento puede filtrar y adaptar fantásticamente sus diseños en cualquier tipo de ventana gráfica.
bootFolio: el complemento jQuery de filtrado de cartera más ligero
BootFolio es un complemento de filtro de cartera compatible con bootstrap que está construido con animaciones CSS3 puras. Es muy fácil de usar y liviano. Viene con más de 14 animaciones de filtrado, más de 76 diseños de elementos de cartera, más de 167 efectos de desplazamiento de elementos de cartera y más de 10 opciones para configurar correctamente.
Portafolio de cubos: complemento de filtro de cuadrícula jQuery responsivo
Cube puede ser su mejor opción para el filtrado de la galería de su cartera. Viene con amplias funciones. Podrás configurar múltiples funciones de filtrado de estilos en tu proyecto. Puede mostrar cuántos contenidos están disponibles en cada categoría solo con el elemento de categoría y la ventana emergente también. Este complemento incluye un control deslizante de carrusel, un control deslizante de testimonios, 15 plantillas listas para usar, animaciones CSS3, diseño responsivo, diseños de cuadrícula y control deslizante, pestañas, mampostería, galería de caja de luz y mucho más.
Live Swear – Comentarios Filtro de palabras Complemento jQuery
Megafolio es un complemento de filtrado js increíblemente diseñado y desarrollado que se puede utilizar para múltiples propósitos, como portafolios, blogs, galerías, tiendas, etc. Tiene un editor de máscaras visual de arrastrar y soltar, más de 30 máscaras prediseñadas, cuadrícula receptiva y mucho más.
Nova Gallery: complemento de galería de filtros multimedia HTML5 responsivo
Nova es un hermoso complemento jquery de galería de imágenes. Puede crear una galería de imágenes para cualquier tipo de portafolio en vista en miniatura o de ancho completo. Es totalmente responsivo y fácil de implementar.
Dimension – Complemento de galería de cartera de filtros de animación 3D
Es un complemento de filtro de cartera hermoso y creado de forma única que, a través de usted, puede mostrar sus increíbles trabajos de una manera muy agradable. Si está creando una plantilla de sitio web para un portafolio empresarial, creativo y corporativo, entonces mostrar el portafolio es el elemento imprescindible que debe implementar. Entonces, al usar el complemento de filtro Dimension, puedes hacerlo perfectamente.
Avance Más información WP Versión 450 Hazel H https://www..png Hazel H 2015-02-13 19:07:19 2016-12-15 20:17:20 Más de 30 brillantes complementos de filtro jQuery de cartera gratuitos y premium
Un diseño web experimental donde varias columnas de imágenes se animan cuando se hace clic en un elemento del menú. La idea se basa en la tendencia actual de un diseño de cuadrícula donde las columnas están animadas. En nuestra demostración, animamos una cuadrícula de imágenes decorativas y hacemos que las columnas se alejen de forma alterna, revelando algo de contenido debajo. Usamos un divertido efecto de desplazamiento para los elementos del menú e imitamos la animación cuando se van volando. También agregamos una ligera interacción con el movimiento del mouse para las columnas.
Algunos experimentos con el nuevo sistema asombroso de Anime.js donde probamos diferentes efectos para ocultar y mostrar miniaturas en una cuadrícula de imágenes.
Recientemente, se lanzó una nueva versión de anime.js. Una de las grandes características nuevas es su asombroso sistema que hace que el seguimiento complejo y las animaciones superpuestas sean realmente simples. Queríamos probarlo y experimentar con esta nueva función en una cuadrícula de imágenes con muchas miniaturas.
Hoy nos gustaría compartir contigo un pequeño efecto artístico. La idea es mostrar una vista previa rápida de las imágenes en pantalla completa al pasar el cursor sobre un enlace especial. En nuestra demostración utilizamos el concepto del sitio web de un fotógrafo donde el enlace a sus obras desencadena el efecto. Al pasar el mouse, algunas fotos se muestran rápidamente en un bucle. Una vez que se hace clic en el enlace, la imagen actual se reduce y se mueve a su lugar en la cuadrícula. Las animaciones se realizan utilizando TweenMax.
Hoy nos gustaría compartir con usted un diseño de cuadrícula impulsado por Masonry que tiene un efecto de movimiento de desplazamiento sobre los elementos y una vista previa del contenido que se puede desplazar. Una vez que se hace clic en un elemento de la cuadrícula, animamos la imagen al centro de la página y la ampliamos. El fondo del elemento también aumenta, llenando toda la página y formando el nuevo fondo de la vista previa del contenido. La vista previa del contenido se puede desplazar y se muestra más texto debajo de la imagen. Las animaciones funcionan con TweenMax.
DoFilter es un complemento de filtrado y cortocircuito multipropósito Bootstrap con capacidad de respuesta completa creado en la última versión de Bootstrap Framework (v3.3.7), HTML5, CSS3 y jQuery. Sus maravillosas funciones se pueden utilizar para filtrar y acortar el contenido de su sitio web, como cartera, servicio, equipo, blog, productos, precios, preguntas frecuentes, etc. También puede personalizarlo para filtrar y acortar cualquier contenido de su sitio web.
En esta lección escribiremos un hermoso portafolio, con usando jQuery, CSS3 y complemento de línea de tiempo. Timeline es un complemento de jquery que se especializa en mostrar la cronología de eventos. En este portafolio puedes incrustar diferentes tipos datos multimedia: tweets, vídeos, mapas, imágenes, grabaciones y luego organizarlos según la fecha. Si trabajas en el diseño, obtendrás un hermoso portafolio que reflejará tus intereses y tu trabajo.
HTMLComo estándar, el complemento Timeline contiene una combinación de colores claros. Esto es muy conveniente y necesario en la mayoría de los casos. Aunque, para nuestro portafolio, el diseño oscuro es más elegante. Por eso lo optimizamos como nos gusta.
Primero veamos lo básico. marcado html páginas:
índice. HTML
Portafolio de línea de tiempo | Demostración de Tutorialzine
En la sección principal, tenemos los estilos de complemento: timeline.css y estilos.css, que contendrán nuestras decisiones de diseño. Al final de la página conectamos la biblioteca jQuery, el complemento de línea de tiempo y scripts.js, que inicializarán el complemento.
Cuando llamamos al complemento, encuentra un bloque DIV con ID=línea de tiempo. El marcado HTML se monta dentro del bloque, después de lo cual la página queda como sigue:
Johnny B Goode
Diseñador y desarrollador
Marzo de 2009 Mi primer experimento con la fotografía time-lapse.La naturaleza en su máxima expresión en este vídeo.
Marzo de 2010 Diseño de logotipo para una tienda de mascotas Julio de 2009 Otro experimento de lapso de tiempoDado que realizaremos algunos cambios en los estilos CSS, el código anterior brinda una mejor comprensión de cómo funciona la estructura del portafolio. Tenga en cuenta que no cambiaremos los estilos de complementos estándar, solo reescribiremos algunos atributos en nuestro propio archivo CSS. Esto nos da una ventaja en futuros cambios en el diseño de la cartera.
Discutiremos la escritura de CSS en detalle, pero un poco más adelante. Lo único es que tendremos que reescribir todas las instrucciones encima de las existentes, pero nos ocuparemos de esto más a fondo.
jQueryPara inicializar el complemento, necesitamos llamar al método VMM.Timeline():
$(función())( var línea de tiempo = nuevo VMM.Timeline(); timeline.init("data.json"); ));
El método init toma un argumento simple: un recurso de datos. Podría ser un archivo json, como en el código anterior, o una hoja de cálculo de Google.
Para saber más detalladamente cómo funcionadatos.json, descarga el código fuente de la lección. No hay nada complicado aquí, no es necesario describir la estructura de este archivo.
CSSCon el inspector HTML de Firebug, puede definir selectores para un elemento HTML que están escritos en timeline.css. Luego, usando los mismos selectores, puede asignar sus propios estilos en el archivo estilos.css. En algunos casos he usado ! Es importante dar prioridad a tus propios estilos.
Todos los cambios que verá a continuación se agregaron manualmente usando estilos CSS. El resto de los elementos de estilo los instala el complemento de forma predeterminada.
En primer lugar, después de diseñar la página en general, cambiaremos el fondo del portafolio:
#timeline( background:none; ) /* Los eventos individuales en el control deslizante */ .slider .slider-container-mask .slider-container( background:none; ) /* Configuración de una imagen de fondo personalizada */ #timeline div.navigation ( fondo: url("../img/timeline_bg.jpg") repetir; borde superior: ninguno; )
Para crear un efecto 3D en el bloque de navegación, tendremos que usar. El elemento :after es la parte superior oscura y utiliza un degradado lineal para darle un efecto dimensional.
#timeline div.navigation:before( posición:absoluta; contenido:""; altura:40px; ancho:100%; izquierda:0; arriba:-40px; fondo: url("../img/timeline_bg.jpg") repetir; ) #timeline div.navigation:after( posición:absoluta; contenido:""; altura:10px; ancho:100%; izquierda:0; arriba:-40px; fondo:repetir-x; imagen-de-fondo: lineal- gradiente (abajo, #434446 0%, #363839 100%); imagen de fondo: -o-linear-gradient (abajo, #434446 0%, #363839 100%); imagen de fondo: -moz-linear-gradient ( abajo, #434446 0%, #363839 100%); imagen de fondo: -webkit-linear-gradient(abajo, #434446 0%, #363839 100%); imagen de fondo: -ms-linear-gradient(abajo, #434446 0%, #363839 100%); )
#línea de tiempo div.timenav-fondo( color de fondo:rgba(0,0,0,0.4) !importante; ) #línea de tiempo .navigación .timenav-fondo .timenav-interval-fondo( fondo:ninguno; ) #línea de tiempo .top -resaltar (color de fondo: transparente! Importante;)
Vamos a diseñar los botones de acercar y alejar en la barra de herramientas:
#timeline .toolbar( borde:ninguno !importante; color de fondo: #202222 !importante; ) #timeline .toolbar div( borde:ninguno !importante; )
Estilo de escala inferior:
#timeline .navigation .timenav .time .time-interval-minor .minor( margin-left:-1px; ) #timeline .navigation .timenav .time .time-interval div( color: #CCCCCC; )
Flechas para el evento anterior y siguiente:
Control deslizante .nav-previous .icon (fondo: url("timeline.png") desplazamiento sin repetición 0 -293px transparente; ) .slider .nav-previous,.slider .nav-next( font-family: "Segoe UI" ,sans-serif; ) .slider .nav-next .icon ( fondo: url("timeline.png") desplazamiento sin repetición 72px -221px transparente; ancho: 70px !important; ) .slider .nav-next:hover . icono( posición:relativa; derecha:-5px; ) .slider .nav-previous:hover, .slider .nav-next:hover ( color: #666; cursor: puntero; ) #timeline .thumbnail ( borde: medio ninguno; )
Cargando fondo:
#timeline .feedback (color de fondo: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; borde: ninguno; ) #timeline .feedback div( color: #AAAAAA; tamaño de fuente : 14px !importante; peso de fuente: normal; )
#timeline .slider-item h2, #timeline .slider-item h3( font-family:"Antic Slab","Segoe UI",sans-serif; ) #timeline .slider-item h2( color:#fff; ) # línea de tiempo .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( borde: ninguno; )
Finalmente cambiaremos la funda. Utilicé nth-child(1) para vincular solo a la primera diapositiva (portada), que contiene el título y la descripción del portafolio. Estos datos se almacenan en un archivo JSON.
/* Personalizando la primera diapositiva - la portada */ #timeline .slider-item:nth-child(1) h2( font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba( 0,0,0,0.3); espacio en blanco: nowrap; relleno:10px 5px 5px 20px; posición:relativa; derecha:-60px; índice z:10; ) #timeline .slider-item:nth-child(1 ) p i( fuente:normal normal 40px "Dancing Script","Segoe UI",sans-serif; fondo:rgba(0,0,0,0.3); espacio en blanco: nowrap; relleno:5px 20px; posición:relativa; derecha:-60px; índice z:10; ) #línea de tiempo .slider-item:nth-child(1) p .c1( color:#1bdff0; ) #timeline .slider-item:nth-child(1) p . c2( color:#c92fe6; ) #timeline .slider-item:nth-child(1) .media-container ( izquierda: -30px; posición: relativa; z-index: 1; ) #timeline .slider-item:nth -niño(1).credit( text-align: center; )
Todo lo que queda es abrir timeline.psd, que se adjunta en el archivo del complemento, y cambiar el color de algunos íconos. He agregado todos los archivos necesarios a las fuentes para esta lección. ¡Esto completa la creación de un portafolio jQuery con estilo CSS3!
¿Qué hacer al respecto?Puede utilizar este portafolio no solo para mostrar sus últimos proyectos, sino también momentos interesantes e importantes de su carrera. ¡Es como un mini diario de tu vida! Espero que disfrutes este tutorial. Comparta sus pensamientos en los comentarios a continuación.
Competente y visualmente diseñada, en nuestro caso, esta es una página separada, es un elemento importante del sitio web personal o blog de cualquier especialista que haya alcanzado un cierto nivel de habilidad en su actividad profesional.
Una página de portafolio es una especie de informe o resumen visual, con la ayuda del cual puede mostrar claramente a los lectores y visitantes de su sitio web/blog un conjunto de los trabajos completados con más éxito, ya sean fotografías, artículos, publicaciones, elementos de diseño. , etc.
No tengo esa página y, por mi parte, esta es una omisión molesta que debe corregirse lo antes posible, que es en lo que estoy trabajando en este momento.
en espacios infinitos red global, puedes encontrar una gran cantidad plantillas listas para usar páginas para organizar un portafolio, y la variedad de dichas páginas es realmente impresionante. Por lo tanto, aquellos a quienes no les interesa profundizar en todas las complejidades del diseño y desarrollo web siempre podrán encontrar una opción adecuada para ellos. Bueno, para aquellos que carecen de conocimientos en creación de sitios web, les propongo ver un ejemplo de diseño adaptativo, una página de portafolio simple, con filtrado de trabajos terminados por categorías, realizado en , diluido con un atractivo efecto de transición, con elementos de animación.
El diseño de la página, el javascript ejecutable y algunos elementos de diseño fueron creados por el maravilloso diseñador y desarrollador web Kevin Liew (queness.com). Al elegir la solución óptima, para mí era importante que fuera fácil de implementar, la funcionalidad del complemento jQuery y el funcionamiento correcto en todos navegadores modernos, y dada la creciente popularidad del uso de varios dispositivos móviles para navegar por Internet, la adaptabilidad del diseño de la futura página. Sin lujos, lujos de diseño ni complementos pesados.
El diseño básico consta de dos elementos principales de la interfaz de usuario que debemos crear: navegación por pestañas para filtrar las categorías del trabajo enviado y la cuadrícula de miniaturas con un efecto de desplazamiento para que aparezca el título.
Para empezar, para que al final todo funcione, necesitarás la versión 1.7.0 o superior de jQuery. Si aún no lo tiene conectado, agregue la siguiente línea antes de la etiqueta:
Inicie el complemento MixItUp, inserte este código después de los archivos anteriores:
| < script type= "text/javascript" >$(function () ( var filterList = ( init: function () ($("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", efectos: [ "fade" ], atenuación : "snap", // llama al efecto de desplazamiento onMixEnd: filterList. hoverEffect() ); ), hoverEffect: function () ( $("#portfoliolist .portfolio" ). hover( function () ($(this). find ("label") . stop() . animate(( abajo: 0 ) , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate(( arriba: - 30 ) , 500 , "easeOutQuad" ); ) , función () ( $(this). find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ); $( this ) .find("img" ) .stop() .animate(( arriba: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ); |
$(function () ( var filterList = ( init: function () ( $("#portfoliolist").mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", efectos: ["fade"], atenuación : "snap", // llama al efecto de desplazamiento onMixEnd: filterList.hoverEffect() )); ), hoverEffect: function () ( $("#portfoliolist .portfolio").hover(function () ( $(this). find(".label").stop().animate((abajo: 0), 200, "easeOutQuad"); $(this).find("img").stop().animate((arriba: -30 ), 500, "easeOutQuad"); ), función () ( $(this).find(".label").stop().animate((abajo: -40), 200, "easeInQuad"); $( this).find("img").stop().animate((arriba: 0), 300, "easeOutQuad"); )); ) ); filterList.init(); ));
No tiene sentido considerar todas las opciones de complementos por separado; la configuración predeterminada es bastante Mejor opción. Bueno, si alguien quiere experimentar con parámetros, haga todo lo que esté a su alcance.
Para formar el diseño de la página y la apariencia de los elementos, conecte un par de archivos al documento. , uno para estilos básicos, llamémoslo por ejemplo: layout.css y otro pequeño archivo CSS normalize.css, para garantizar una mejor coherencia del navegador en el diseño estándar de elementos:
| < link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" > |
Ahora veamos todo en orden, a ser posible sin agua innecesaria, de forma accesible y comprensible, en nuestro sufrido idioma nativo.
| < ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Todo< li>< span class = "filter" data- filter= "app" >Aplicaciones< li>< span class = "filter" data- filter= "card" >Cartas de negocios< li>< span class = "filter" data- filter= "icon" >Iconos< li>< span class = "filter" data- filter= "logo" >Logo< li>< span class = "filter" data- filter= "web" >diseño web |
En el panel de navegación colocamos la lista completa de obras, divididas en categorías. Necesitamos asociar cada categoría de cartera a través del atributo data-cat con uno u otro elemento de la barra de navegación de acuerdo con el valor en el atributo data-filter. Al hacer coincidir los valores de data-filter con data-cat, los elementos de la cartera se filtrarán por categoría.
Además, añadiremos a la miniatura, oculta por el momento, un pequeño panel con el nombre de la obra y el título de la categoría, que aparece sólo al pasar el cursor sobre la imagen. Y para que sea más fácil formar la apariencia de toda esta estructura en CSS, asignemos las clases correspondientes a los elementos:
| < div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Engendra hosting. ru< span class = "text-category" >Logo< div class = "label-bg" > ......... |
Alojamiento Beget.Ru Logo.........
Tenga en cuenta que puede agregar enlaces a la imagen o directamente a la firma para que el usuario pueda ver completamente todo su trabajo.
Ahora, tranquilamente, pasemos a la parte más interesante, a la formación en CSS de los estilos generales de la interfaz de usuario de nuestra página de portafolio y su versión adaptativa. En el artículo indicaré solo valores básicos (predeterminados), es decir, sin ningún imágenes de fondo y fuentes conectadas, todo esto, para quienes lo necesiten, se puede ver en la demostración o encontrarlo en el archivo con el código fuente.
| .container (posición: relativa; ancho: 960px; margen: 0 auto; /* Podrás ver la cadena de transiciones al cambiar el tamaño de la ventana del navegador */ -webkit-transition: all 1s easy; -moz-transition: all 1s facilidad; -o -transición: todos los 1s facilidad; transición: todos los 1s facilidad; ) #filters (margen: 1%; relleno: 0; estilo de lista: ninguno;) #filters li (float: izquierda;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color: #666; /* agrega una pequeña sombra para el texto */ text-shadow: 1px 1px #FFFFFF; cursor: puntero;) /* cambia el fondo de la categoría al pasar el mouse */ # filtros li span: hover ( fondo : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* fondo del elemento de categoría activo */ #filters li span. activo (fondo: rgb (62, 151, 221); sombra de texto: 0 0 2px #004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: borde-cuadro; -o-box-sizing: borde-cuadro; ancho: 23%; margen: 1%; pantalla: ninguna; flotador izquierdo; desbordamiento: oculto; ) .portfolio-wrapper ( overflow : oculto ; posición : relativa !importante; fondo : #666 ; cursor : puntero ; ) .portfolio img ( max-width : 100% ; posición : relativa ; ) /* las firmas están ocultas de forma predeterminada * / .portfolio .label (posición: absoluta; ancho: 100%; alto: 40px; abajo: -40px;) .portfolio .label-bg (fondo: rgb (62, 151, 221); ancho: 100%; alto: 100 % ; posición : absoluta ; arriba : 0 ; izquierda : 0 ; ) .portfolio .label-text ( color : #fff ; posición : relativa ; índice z : 500 ; relleno : 5px 8px ; ) .portfolio .text-category (pantalla: bloque; tamaño de fuente: 9px;) |
Contenedor ( posición: relativa; ancho: 960px; margen: 0 auto; /* Podrás ver la cadena de transiciones al cambiar el tamaño de la ventana del navegador */ -webkit-transition: todos los 1 fáciles; -moz-transition: todos los 1 facilidad; -o- transición: todos los 1 fácil; transición: todos los 1 fácil; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* agrega una pequeña sombra para el texto */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) /* cambia el fondo de categoría al pasar el mouse */ #filters li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* fondo del elemento de categoría activo */ #filters li span.active ( fondo: rgb(62, 151, 221 ); sombra de texto: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing : cuadro de borde; -o-box- tamaño: cuadro de borde; ancho: 23%; margen: 1%; pantalla: ninguna; flotante: izquierda; desbordamiento: oculto; ) .portfolio-wrapper ( desbordamiento: oculto; posición: relativa !importante; antecedentes: #666; cursor:puntero; ) .portfolio img ( ancho máximo: 100%; posición: relativa; ) /* las firmas están ocultas de forma predeterminada */ .portfolio .label ( posición: absoluta; ancho: 100%; altura:40px; abajo:-40px; ) .portfolio .label-bg (fondo: rgb(62, 151, 221); ancho: 100%; alto:100%; posición: absoluta; arriba:0; izquierda:0; ) .portfolio .label-text (color: # fff; posición: relativa; índice z:500; relleno:5px 8px; ) .portfolio .categoría de texto ( display:block; tamaño de fuente:9px; )
En la segunda parte, directamente en la misma hoja de estilo, utilizando varias consultas de medios, crearemos secciones CSS alternativas. Para garantizar que el diseño de nuestra página se muestre correctamente en las pantallas de varios dispositivos móviles, también agregaremos reglas CSS alternativas para diferentes pantallas a estas secciones. Por lo tanto, podemos anular fácilmente cualquier regla establecida previamente en nuestra tabla CSS para navegadores normales y lograr esa adaptabilidad tan deseada.
| /* Tableta */ @media solo pantalla y (ancho mínimo: 768 px) y (ancho máximo: 959 px) (.container (ancho: 768 px;)) /* Móvil - Nota: Diseño para 320 px de ancho*/ solo @media pantalla y (ancho máximo: 767 px) (.container (ancho: 95%;) #portfoliolist .portfolio (ancho: 48%; margen: 1%;)) /* Móvil - Nota: Diseño para 480px de ancho */ @media solo pantalla y (ancho mínimo: 480 px) y (ancho máximo: 767 px) (.container (ancho: 70%;)) |
/* Tableta */ @media solo pantalla y (ancho mínimo: 768 px) y (ancho máximo: 959 px) ( .container ( ancho: 768 px; ) ) /* Móvil - Nota: Diseño para 320 px de ancho*/ solo @media screen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Móvil - Nota: Diseño para 480px de ancho */ @media solo pantalla y (ancho mínimo: 480 px) y (ancho máximo: 767 px) ( .container ( ancho: 70%; ) )
Eso es todo. Nuestra maravillosa página bajo el amplio título "Portafolio" está lista, solo queda llenarla con sus igualmente maravillosos y destacados trabajos y exhibirla para que todo el mundo la vea. Todavía puedes estar tranquilo, modesto y orgulloso de ti mismo. Lo principal es no exagerar en este asunto.
Mire nuevamente el ejemplo y, si es necesario, tome el código fuente; en su tiempo libre, en un ambiente hogareño tranquilo, podrá llevar este trabajo a la perfección.
Al crear la lección se utilizó el siguiente material: . Allí se encuentra la página del portafolio original, prístina y recién salida de la pluma del autor.
¡Buena suerte a todos y disfruten el resto del corto verano!
