Las galerías de imágenes y los controles deslizantes son algunos de los formatos de jQuery más populares. Gracias a ellos, puede agregar la cantidad necesaria de contenido visual al sitio, mientras ahorra un espacio valioso.
Las galerías y los controles deslizantes hacen que la página esté menos concurrida, pero aun así le permiten agregar todas las imágenes que necesita para transmitir el mensaje. Serán especialmente útiles para las tiendas online.
En el artículo de hoy, reunimos las mejores galerías de imágenes y controles deslizantes de jQuery para usted.
Para instalarlos, simplemente agregue los complementos seleccionados a la sección principal de la página HTML junto con la biblioteca jQuery y configúrelos de acuerdo con la documentación (solo un par de líneas de código).
Elige cuál de estos elementos encajará perfectamente en tu proyecto.
Bootstrap Slider es un control deslizante de imágenes optimizado para dispositivos móviles gratuito con desplazamiento de tocar y deslizar. Se verá increíble en cualquier pantalla y en cualquier navegador. Puede cargar imágenes, videos, texto, miniaturas y botones a los controles deslizantes.
Product Preview Slider incorpora todo el potencial de jQuery, se adapta perfectamente a cualquier interfaz. También estará satisfecho con la calidad y la limpieza del código de este complemento.
Expandable Image Gallery es un complemento increíble que se convierte en una galería de pantalla completa con solo un clic. Se puede utilizar para la sección "Acerca de nosotros" o para ver la información del producto.
Fotorama es un complemento de galería jQuery receptivo que funciona tanto para navegadores de escritorio como móviles. Ofrece muchas opciones de navegación: miniaturas, desplazamiento, botones de avance y retroceso, presentaciones de diapositivas automáticas y marcadores.
Control deslizante inmersivo le permite crear una experiencia única de visualización de diapositivas similar al control deslizante de Google TV. Puede cambiar la imagen de fondo para que sea borrosa para mantener el enfoque en las fotos principales.
Leastjs es un complemento jQuery receptivo que lo ayudará a crear una galería increíble. Cuando pasas el cursor sobre la imagen, aparece el texto, cuando haces clic, la ventana se expande a pantalla completa.
Este plugin es perfecto para portafolios. Creará bloques de imágenes horizontales (verticales en pantallas pequeñas) a las que se anclará el contenido seleccionado.
Squeezebox Portfolio Template ofrece efectos de movimiento de cartera. Cuando pasa el cursor sobre la imagen principal (o bloque), aparecen elementos anclados.
Shuffle Images es un increíble complemento receptivo que te permite crear una galería con imágenes que cambian al pasar el mouse por encima.
El complemento Free jQuery Lightbox lo ayuda a mostrar una o más imágenes en una página. También se pueden ampliar y devolver a su tamaño original.
PgwSlider es un control deslizante de imagen minimalista. El código jQuery es pequeño, por lo que la velocidad de carga de este complemento lo sorprenderá gratamente.
La Galería de Polaroids Dispersas es un increíble control deslizante de diseño plano. Sus elementos se mueven aleatoriamente al cambiar de imagen, lo que se ve increíble.
Filtro de contenido hinchable - Solución perfecta para y cartera. Este complemento permite a los usuarios pasar rápidamente de una categoría a otra.
Simple jQuery Slider hace honor a su nombre. Este complemento combina elementos de JavaScript, HTML5 y CSS3. En la demostración, solo está disponible la carga de texto de forma predeterminada, pero si realiza algunos cambios, también puede agregar contenido visual.
Glide JS es un control deslizante jQuery simple, rápido y receptivo. Es fácil de configurar y el complemento no ocupará mucho espacio.
Este sorprendente control deslizante de carga de imágenes y texto de jQuery es perfecto para cualquier sitio. Deleitará a los usuarios con un ligero efecto de paralaje y una apariencia de texto lento.
Compuesta de manera competente y diseñada visualmente, en nuestro caso, esta es una página separada, es un elemento importante de un sitio web o blog personal, de cualquier especialista que haya alcanzado un cierto nivel de habilidad en su actividad profesional.
Una página de cartera es una especie de informe, o un resumen visual, con la ayuda de la cual puede demostrar claramente a los lectores y visitantes del sitio / blog, un conjunto de los trabajos completados más exitosos, ya sean fotos, artículos, publicaciones. , elementos de diseño, etc.
No tengo esa página y, por mi parte, esta es una omisión desafortunada que debe corregirse lo antes posible, en lo que estoy trabajando en este momento.
En espacios infinitos red global, puede encontrar una gran cantidad de plantillas de página listas para usar para organizar portafolios, y la variedad de tales páginas es realmente impresionante. Por lo tanto, quien se preocupe por todas las complejidades del diseño y desarrollo web siempre podrá encontrar una opción adecuada para sí mismo. Bueno, para aquellos que sufren de conocimiento en la construcción de sitios web, propongo analizar un ejemplo de diseño adaptativo, una página de cartera simple, con filtrado de trabajo realizado por categoría, hecho en, diluido con un efecto de transición atractivo, con elementos de animación.
El diseño de la página, el javascript ejecutable y algunos elementos de diseño, dieron a conocer "a la montaña", un maravilloso diseñador y desarrollador web Kevin Liew (queness.com). Al elegir la solución óptima, fue importante para mí la facilidad de ejecución, la funcionalidad del complemento jQuery, el funcionamiento correcto en todos los 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 campanas y silbatos de diseño pretenciosos ni complementos pesados.
El diseño base consta de los dos elementos principales de la interfaz de usuario que necesitamos construir, la navegación con pestañas para filtrar las categorías del trabajo enviado y la cuadrícula de miniaturas con el efecto de título flotante.
Para empezar, para que todo funcione eventualmente, se requerirá jQuery al menos la versión 1.7.0. Si aún no lo ha conectado, agregue la siguiente línea antes de la etiqueta :
Ejecute el complemento MixItUp, pegue 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" ] , easing : "snap", // invocar el efecto hover onMixEnd: filterList. hoverEffect() ) ) ; ), hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function () ($(this) . find(".label" ) .stop() .animate(( bottom: 0 ) , 200 , "easeOutQuad" ) ; $(this) .find("img" ) .stop() .animate(( top: - 30 ) , 500 , "easeOutQuad" ) ; ) , function () ($(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this) .find("img" ) .stop() .animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList.init() ; ) ) ; |
No tiene sentido considerar todas las opciones de complementos por separado, la predeterminada es la mejor opción. Bueno, si alguien se pone a experimentar con parámetros, por favor, todo está en su mano.
Para formar el diseño de la página y la apariencia de los elementos, conecte un par de archivos al documento .
, uno para los estilos base, llamémoslo layout.css y otro pequeño archivo CSS normalize.css , para una mejor consistencia del navegador en el estilo predeterminado de los elementos:
| < link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" > |
Ahora analizaremos todo en orden, si es posible sin agua innecesaria, de manera accesible y comprensible, en nuestra sufrida lengua natal.
| < ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Todos < 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, dividida en categorías. Necesitamos conectar 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 filtro de datos con data-cat, los elementos de la cartera se filtrarán por categoría.
Además, a la miniatura, oculta por el momento, le agregaremos un pequeño panel con el nombre de la obra y el título de la categoría, que aparece solo cuando pasas el cursor sobre la imagen. Para que sea más fácil formar apariencia de toda esta construcción en CSS, escribiremos 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" >Hosting Beget. ru < span class = "text-category" >Logo < div class = "label-bg" > ......... |
Tenga en cuenta que puede agregar enlaces a la imagen o directamente a la firma para que el usuario pueda ver todo su trabajo en su totalidad.
Ahora, tranquilamente muermo, 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 los valores básicos (predeterminados), es decir, sin imágenes de fondo ni fuentes conectadas, todo esto, quien lo necesite, puede verse en la demostración o encontrarse en el archivo fuente.
| .container (posición: relativa; ancho: 960px; margen: 0 automático; /* Podrá ver la cadena de navegación cuando se cambie el tamaño de la ventana del navegador */-webkit-transition: todos los 1 son sencillos; -moz-transition: todo 1s facilidad; -o-transición: todos los 1s facilidad; transición : todo 1s facilidad; ) #filtros ( margen : 1 % ; relleno : 0 ; estilo de lista : ninguno ; ) #filtros li ( flotante : izquierda ; ) #filtros li intervalo ( pantalla : bloque ; relleno : 5px 20px ; texto-decoración : ninguno ; color : #666 ; /* agrega algo de sombra al texto */ sombra de texto: 1px 1px #FFFFFF; cursor: puntero; ) /* cambiar el fondo de la categoría al pasar el mouse */#filters li span: hover (fondo: #34B7CD; text-shadow: 0 0 2px #004B7D; color: #fff;) /* fondo del elemento de la categoría activa */#filters li span.active (fondo: rgb (62, 151, 221); text-shadow: 0 0 2px #004B7D; color: #fff; ) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; ancho : 23 % ; margen : 1 % ; pantalla : ninguno ; flotante : izquierda ; desbordamiento : oculto ; ) .portfolio-wrapper ( desbordamiento: oculto; posición: relativa! importante; fondo: #666; cursor: puntero; ) .portfolio img (ancho máximo: 100%; posición: relativa;) /* los subtítulos están ocultos por defecto */.portfolio .label ( posición : absoluta ; ancho : 100% ; altura : 40px ; inferior : -40px ; ) % ; posición : absoluta ; arriba : 0 ; izquierda : 0 ; ) .portfolio .label-text ( color : #fff ; posición : relativa ; índice z : 500 ; relleno : 5px 8px ; ) pantalla : bloque ; tamaño de fuente : 9px ; ) |
Contenedor ( posición: relativo; ancho: 960 px; margen: 0 automático; /* Podrá ver la cadena de transición cuando se cambie 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 facilidad; transición: todos los 1 facilidad; ) #filtros ( margen: 1%; relleno: 0; estilo de lista: ninguno; ) #filtros li ( flotador: izquierda; ) #filtros li intervalo (display: block; padding:5px 20px; text-decoration:none; color:#666; /* agrega algo de sombra al texto */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) /* cambia el fondo de la categoría al pasar el mouse */ #filters li span:hover (fondo: #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 ); text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border- box; -o-box- sizing: border-box; ancho: 23 %; margen: 1 %; pantalla: ninguno; flotante: izquierda; desbordamiento: oculto; ) .po rtfolio-wrapper ( desbordamiento: oculto; posición: relativa !importante; fondo: #666; cursor:puntero; ) .portfolio img ( max-width:100%; posición: relativa; ) /* las etiquetas están ocultas por defecto */ .portfolio .label ( posición: absoluta; ancho: 100%; altura:40px; bottom:-40px; ) .portafolio .label-bg ( fondo: rgb(62, 151, 221); ancho: 100%; alto:100%; posición: absoluta; superior:0; izquierda:0; ) .portfolio .label-text ( color: # fff; posición: relativa; índice z: 500; relleno: 5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )
En la segunda parte, justo en la misma hoja de estilo, con la ayuda de varias consultas de medios, crearemos secciones CSS alternativas. Para que el diseño de nuestra página se muestre correctamente en las pantallas de varios dispositivos móviles, agregaremos reglas CSS alternativas para diferentes pantallas a estas secciones. Por lo tanto, anulamos fácilmente cualquier regla establecida previamente en nuestra tabla CSS para navegadores normales y logramos la adaptabilidad tan deseada.
| /* Tableta */ Pantalla @media solo y (ancho mínimo: 768 píxeles) y (ancho máximo: 959 píxeles) (.container (ancho: 768 píxeles;)) /* Móvil - Nota: Diseño para ancho de 320px*/@media solo pantalla y (ancho máximo: 767px) (.container (ancho: 95%;) #portfoliolist .portfolio (ancho: 48%; margen: 1%;)) /* Móvil - Nota: Diseño para ancho de 480px */ Pantalla @media solamente y (ancho mínimo: 480 píxeles) y (ancho máximo: 767 píxeles) (.container (ancho: 70%;)) |
/* Tableta */ Pantalla solo @media 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ñado para un ancho de 480 px */ @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 nombre de gran capacidad "Portafolio" está lista, solo queda llenarla con sus obras no menos maravillosas y sobresalientes, y exhibirla para todo el mundo. Todavía puedes en silencio, modestamente, estar orgulloso de ti mismo. Lo principal es no exagerar en este asunto.
Vuelva a ver el ejemplo y, si es necesario, tome el código fuente, en su tiempo libre, en un ambiente hogareño tranquilo, puede llevar este trabajo a la perfección.
Al crear la lección, el material utilizado fue: . El original, prístino, solo de la pluma del autor, la página del portafolio, se encuentra allí.
¡Buena suerte a todos y con el beneficio del cuerpo, pasen el resto del corto verano!
El tiempo no se detiene y con él avanza. Esto también afectó a Internet. Ya puede notar cómo está cambiando la apariencia de los sitios, especialmente el diseño adaptativo es muy popular. Y como resultado, muchos nuevos controles deslizantes de jquery sensibles, galerías, carruseles o complementos similares.
1. Control deslizante de publicaciones horizontales sensibles
Carrusel horizontal receptivo con instrucciones de instalación detalladas. Está hecho en un estilo simple, pero puedes diseñarlo tú mismo.
2. Control deslizante en Glide.js
Este control deslizante es adecuado para cualquier sitio web. Utiliza código abierto Glide.js. Los colores del control deslizante se pueden cambiar fácilmente.
3. Presentación de diapositivas de contenido inclinado
Control deslizante de contenido receptivo. Lo más destacado de este control deslizante es el efecto 3D de las imágenes, así como varias animaciones de apariencia aleatoria.
4. Control deslizante con lienzo HTML5
Control deslizante muy hermoso e impresionante con partículas interactivas. Hecho con lienzo HTML5
5. Control deslizante de transformación de imagen
Control deslizante con efecto morphing (transformación suave de un objeto a otro). A este ejemplo el control deslizante es muy adecuado para la cartera de un desarrollador web o un estudio web en forma de cartera.
6. Control deslizante circular
Slider en forma de círculo con efecto de voltear la imagen.
7. Control deslizante de fondo borroso
Control deslizante receptivo con cambio y desenfoque de fondo.
8. Control deslizante de moda sensible
Control deslizante de sitio web simple, liviano y receptivo.
9. Slicebox - deslizador de imágenes 3D jQuery(ACTUALIZADO)
Versión actualizada del control deslizante Slicebox con correcciones y nuevas funciones.
10.Cuadrícula de imágenes receptivas animadas gratuitas
Un complemento de jQuery para crear una cuadrícula de imágenes flexible que cambiará tomas usando diferentes animaciones y tiempos. Esto puede quedar bien como fondo o elemento decorativo en el sitio, ya que podemos configurar la aparición selectiva de nuevas imágenes y sus transiciones. El plugin está hecho en varias versiones.
11. Control deslizante flexible
Complemento gratuito universal para su sitio web. Este complemento viene en múltiples opciones de control deslizante y carrusel.
12. Marco de fotos
Fotorama es un complemento universal. Tiene muchas configuraciones, todo funciona de forma rápida y sencilla, es posible ver las diapositivas en pantalla completa. El control deslizante se puede usar tanto en tamaño fijo como adaptable, con y sin miniaturas, con y sin desplazamiento circular y mucho más.
PDPuse el slider varias veces y creo que es uno de los mejores
13. Deslizador de galería de miniaturas 3D gratuito y receptivo.
Galería de controles deslizantes experimentales Diseño de panel 3D con rejilla y efectos de animación interesantes.
14. Control deslizante en css3
Control deslizante receptivo hecho con css3 con una apariencia suave de contenido y animación ligera.
15. Control deslizante WOW
Control deslizante WOW es un deslizador de imágenes con sorprendentes efectos visuales.
17.Elástico
Deslizador elástico con capacidad de respuesta completa y miniaturas deslizantes.
18. Hendidura
Este es un control deslizante sensible a pantalla completa que utiliza animación css3. El deslizador está hecho en dos versiones. La animación se hace bastante inusual y bellamente.
19. Galería de fotos receptiva más
Galería deslizante gratuita simple con carga de imágenes.
20. Control deslizante receptivo para WordPress
Control deslizante libre de respuesta para WP.
21. Control deslizante de contenido de paralaje
Slider con efecto parallax y control de cada elemento con CSS3.
22. Control deslizante con encuadernación musical
Control deslizante usando JPlayer de código abierto. Este control deslizante se parece a una presentación con música.
23. Control deslizante con jmpress.js
El control deslizante receptivo se basa en jmpress.js y, por lo tanto, permitirá aplicar algunos efectos 3D interesantes a las diapositivas.
24. Presentación rápida de diapositivas
Presentación de diapositivas con cambio rápido de diapositivas. Las diapositivas cambian al pasar el mouse por encima.
25. Acordeón de imágenes con CSS3
Imagen acordeon con css3.
26. Un complemento de galería optimizado al tacto
Esta es una galería receptiva que está optimizada para dispositivos táctiles.
27. Galería 3D
Galería de pared 3D- creado para el navegador Safari, donde el efecto 3D será visible. Cuando se ve en un navegador diferente, la funcionalidad estará bien, pero el efecto 3D no será visible.
28. Control deslizante con paginación
Control deslizante de paginación sensible con control deslizante jQuery UI. la idea es utilizar un concepto de navegación simple. Es posible rebobinar todas las imágenes o cambiar entre diapositivas.
29. Montaje de imágenes con jQuery
Disposición automática de imágenes en función del ancho de la pantalla. Una cosa muy útil cuando se desarrolla un sitio de cartera.
30. Galería 3D
Un control deslizante circular 3D simple en css3 y jQuery.
31. Modo de pantalla completa con efecto 3D en css3 y jQuery
Control deslizante con la capacidad de ver imágenes a pantalla completa con una hermosa transición.
Long eligió el tema para el tema de hoy. Como resultado, noté que aún no hemos hecho selecciones con galerías de imágenes. Creo que es un gran tema porque galerias presentes en muchos sitios. Francamente, ninguno de ellos es muy atractivo. Teniendo en cuenta las tendencias de desarrollo actuales jquery, html5 etc. Pensé, porque ya debería haber soluciones mucho más atractivas que las que conocí antes. Asi que. 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án notado en publicaciones anteriores.
galería de imágenes se aplica no solo a con álbumes de fotos. Se puede usar el script, creo que será 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.
Asi que. Colección para su atención complemento jquery ov galerías de imágenes 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.
En este tutorial, escribiremos un hermoso portafolio usando jQuery, CSS3 y el complemento Timeline. Timeline es un complemento de jquery que se especializa en mostrar una línea de tiempo de eventos. En este portafolio, puede insertar diferentes tipos de medios: tweets, videos, mapas, imágenes, publicaciones y luego organizarlos según la fecha. Si trabajas en el diseño, obtendrás un hermoso portafolio que reflejará tus intereses y trabajo.
De forma predeterminada, el complemento Timeline contiene un esquema de color claro. Esto es muy conveniente y necesario en la mayoría de los casos. Aunque, para nuestra cartera, el diseño oscuro es más elegante. Por lo tanto, lo optimizamos de la manera que nos gusta.
Primero, veamos el marcado html básico de la página:
índice.html
En la sección principal, tenemos los estilos de los complementos, timeline.css y styles.css, que contendrán nuestras opciones de diseño. Al final de la página, incluimos 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. Dentro del bloque, monta el marcado html, después de lo cual la página se convierte en la siguiente:
Dado que realizaremos algunos cambios de estilo CSS, el código anterior brinda una mejor idea de cómo está estructurada la cartera. Tenga en cuenta que no cambiaremos los estilos predeterminados del complemento, solo sobrescribiremos 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 tarde. Lo único es que tendremos que reescribir todas las instrucciones sobre las existentes, pero de esto nos ocuparemos más adelante.
Para inicializar el complemento, debemos llamar al método VMM.Timeline():
$(function()( var timeline = new VMM.Timeline(); timeline.init("data.json"); ));
El método init toma un argumento simple, un recurso de datos. Puede ser un archivo json, como en el código anterior, o una hoja de cálculo de Google.
Para obtener más información sobre cómo funcionadatos.json, descargue las fuentes de la lección. No hay nada complicado aquí, no hay necesidad de describir la estructura de este archivo.
Con Firebug HTML Inspector, puede definir selectores para un elemento HTML, que se definen en timeline.css. Después de eso, usando los mismos selectores, puede asignar sus estilos en el archivo styles.css. En algunos casos he utilizado ! importante para priorizar sus propios estilos.
Todos los cambios que verás a continuación se agregan manualmente usando estilos CSS. El complemento establece el resto de los elementos de estilo de forma predeterminada.
En primer lugar, después de diseñar la página en general, cambiaremos el fondo de la cartera:
#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; border-top:ninguno; )
Para crear un efecto 3D, en el cuadro de navegación, tendremos que usar . El elemento :after es la parte superior oscura y usa un degradado lineal para darle un efecto 3D.
#timeline div.navigation:before( position:absolute; content:""; height:40px; width:100%; left:0; top:-40px; background: url("../img/timeline_bg.jpg") repetir; ) #timeline div.navigation:after( position:absolute; content:""; height:10px; width:100%; left:0; top:-40px; background:repeat-x; background-image: linear- degradado (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%); )
#timeline div.timenav-background( background-color:rgba(0,0,0,0.4) !important; ) #timeline .navigation .timenav-background .timenav-interval-background( background:none; ) #timeline .top -resaltar (color de fondo: transparente! importante;)
Dar estilo a 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 en la parte 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 . icon( position:relative; right:-5px; ) .slider .nav-previous:hover, .slider .nav-next:hover (color: #666; cursor: pointer; ) #timeline .thumbnail ( border: medium none; )
Cargar fondo:
#timeline .feedback ( color de fondo: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inserto; 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( border:none; )
Al final, cambiaremos la portada. Usé nth-child(1) para vincular solo a la primera diapositiva (la 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; padding: 10px 5px 5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1 ) p i( font:normal normal 40px "Dancing Script","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white-space: nowrap; padding:5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .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).crédito(alinear texto: centro; )
Solo queda abrir timeline.psd, que se adjunta en el archivo del complemento, y cambiar el color de algunos íconos. Agregué todos los archivos necesarios a las fuentes para este tutorial. Sobre esta creación Portafolio jQuery con estilo CSS3 completado!
Puede usar este portafolio no solo para exhibir sus últimos proyectos, sino también para destacar su carrera. ¡Es como un mini diario de tu vida! Espero que disfrutes este tutorial. Comparta sus pensamientos en los comentarios a continuación.
