IMG receptivo: haga que sus imágenes sean receptivas sin crear nuevas imágenes
Responsive IMG proporciona una forma sencilla de mejorar el rendimiento de la imagen en sitios web receptivos en todos los dispositivos, tamaños de pantalla y resoluciones de pantalla. El IMG receptivo es, con mucho, el complemento más popular de apalancamiento. El sitio web de documentación recibe tráfico notable, y vemos muchos tweets y reseñas positivos sobre el complemento. La belleza del IMG receptivo es que puede agregarlo a casi cualquier sitio web, sin un marcado adicional y sin crear activos adicionales. El complemento se encarga de todo el trabajo duro creando y ajustando imágenes automáticamente, según el tamaño y la resolución del navegador. La historia de fondo El diseño receptivo es inmensamente popular e innegablemente importante para el diseño web. En estos días, hay muchas personas excelentes que hacen grandes cosas con un diseño web receptivo, pero todavía hay un problema evidente que todos enfrentamos: imágenes receptivas. Si bien existen excelentes soluciones, la mayoría de ellas requieren que implementen un marcado nuevo y "no estándar" en su código y cree imágenes adicionales para diferentes tamaños y resoluciones de pantalla. En la práctica, hay más en las imágenes receptivas que servir imágenes de carga más pequeñas y rápidas para pantallas más pequeñas. También está el problema de DIRECCIÓN DE ART . Básicamente, a veces es posible que desee recortar en una imagen cuando hay menos bienes raíces en pantalla, en lugar de simplemente reducirla. Además, las pantallas de retina y otras pantallas con mayor densidad de píxeles requieren una imagen más grande (en cuanto a píxeles) que se reduce (en cuanto al tamaño físico) con el código. Recientemente, hubo grandes noticias en este frente. Srcset se agregó oficialmente a la especificación de WebKit, lo que significa que el primer paso importante hacia el soporte de imagen receptivo estandarificado y estandarizado está en marcha. Es un gran paso, pero aún no resuelve todos los problemas receptivos importantes. Sin embargo, lo más importante es que solo es compatible con los navegadores WebKit modernos. ¿Cómo puede ayudar IMG receptivo ? Con IMG receptivo, los desarrolladores y diseñadores pueden crear una sola imagen universal a gran tamaño o crear varias versiones de una imagen para diferentes tamaños de pantalla. De cualquier manera, con una línea de jQuery, el complemento se encarga del resto, cambia de imágenes a medida que se carga la página o el navegador se redimensiona. Además, el IMG receptivo tendrá en cuenta la resolución de la pantalla (lea la pantalla Retina) al decidir qué tamaño de imágenes usar o Crear . Así es, Crear . Usando PHP, si una imagen no existe en un cierto tamaño, IMG receptivo creará esa imagen, sobre la mosca y servirá la imagen recién optimizada. Después de que se cree y almacene en el servidor una vez, el complemento cambiará a esa imagen en lugar de crear una nueva la próxima vez. Aquí es donde el IMG receptivo es diferente de cualquier cosa, y esto es lo que realmente nos ahorra tiempo a nosotros y a nuestros clientes. Esta configuración es ideal para sistemas de gestión de contenido donde las imágenes del sitio web se actualizan por un no diseñador/no desarrollador. Los usuarios pueden cargar una sola imagen, tan grande como la tienen, y el sitio web se encarga de todo el resto en la parte delantera. No solo es excelente para un CMS, sino que también es lo suficientemente flexible para los usuarios que son diseñadores. Si un diseñador carga dos versiones diferentes de una imagen, receptive IMG usará la segunda versión en lugar de crear una nueva versión de la imagen original. ¡Esto significa que podemos dirigir el arte y ser receptivo! La palabra final Es inmensamente importante tener imágenes receptivas. El tiempo de carga, especialmente en los teléfonos móviles a través de las redes de datos, puede hacer o romper un sitio web. IMG receptivo le brinda toda la funcionalidad e inteligencia necesarias para manejar imágenes receptivas, sin la necesidad de cambiar el código o los hábitos de código previos al código existente. (Y eso significa que es muy compatible con el revés).
Over: Ocultar y mostrar elementos con solo nombre de clase (sin CSS)
github.com/drewbrolik/over-under||88
Over Under lets you hide or show elements based on class names that contain media query breakpoint values. It saves you the time of adding a class or an id to an element, adding some styling to CSS and then overwriting that style with a media query for a certain screen size.Este complemento es bastante nuevo en el apalancamiento, pero ahora está en todo nuestro código. Donde IMG receptivo es una forma completamente nueva de abordar un gran problema, más bajo es más un atajo que ahorra tiempo que acelera la producción y la creación de prototipos.
La historia de fondo Es una táctica de diseño conveniente y común para esconder y mostrar elementos en diferentes tamaños de pantalla. De hecho, es necesario en un buen diseño receptivo.
En la práctica, sin embargo, es bastante inconveniente agregar una consulta de medios separada a la hoja de estilo para cada elemento que desea ocultar o mostrar. Esto es especialmente cierto si, como nosotros, crea Los puntos de interrupción de la consulta de medios en más tamaños que los tamaños estándar de "móvil" y "tableta".
Cómo funciona = Over Under permite que un desarrollador oculte y muestre elementos basados en nombres de clases específicos que contienen un tamaño de punto de interrupción de la consulta de medios. Entonces, agregar una clase de "Over300" a un elemento significa que el elemento se esconderá automáticamente cuando el ancho del navegador tiene menos de 300 píxeles de ancho.
Detrás de las escenas, en realidad, en realidad crea una hoja de estilo que contiene una consulta de medios para todos los cambios de medios "OverX" y "Underx" en el DOM, por lo que se ilumina los cambios de DOM y no se atribuye a los cambios posteriores a la vista posteriores por el posterior reclutamiento de JavaScrito. estilo.
La palabra final Under Under es rápido y sucio, pero es efectivo e inmensamente ahorrando en el tiempo. Período.
Scroll CSS: JQuery Animations basado en Scrolltop
github.com/drewbrolik/scroll-csss
Scroll CSS animates elements based on javascript’s Scrolltop Valor. Esto significa que puede tener un elemento desvanecerse, deslizar o crear un efecto de paralaje deslizándose sobre otro elemento.
Todas las animaciones coinciden con la posición de desplazamiento del usuario, por lo que la animación es extremadamente "reactiva" y funciona hacia adelante y hacia atrás, ya que el usuario se despliega por una página y luego vuelve a subir. || 107
The Backstory = La interactividad es enorme en este momento. También lo es la experiencia del usuario y mostrar al usuario solo lo que necesita bien cuando lo necesita. Para el caso, los efectos de desplazamiento de paralaje también son enormes en este momento. Esto tiene sentido. As browser and processor technology get better, so does website interaction and user expectation.
We developers need to stay current and create the best experiences we can, but we also need to manage time and budgets.
What Scroll CSS Does Scroll CSS le permite como desarrollador crear rápidamente una interacción interesante y receptiva, sin ser un experto en jQuery. Llame al complemento en un elemento y especifique qué propiedad CSS animar, el valor de inicio de CSS, el valor de parada y los valores de desplazamiento (por píxel o etiqueta de anclaje) para comenzar y finalizar la animación. El complemento se encarga del resto.
Con esta técnica, es fácil deslizar un botón "Contáctenos" a la vista cuando el usuario se desplaza al final de una sección. También es fácil deslizar una sección de contenido sobre otro (un efecto de paralaje jQuery muy popular). La mejor parte es que, cuando el usuario deja de desplazarse a mediados de animación, la animación también se detiene. Si se desplazan de nuevo, la animación se ejecuta en reversa.
La palabra final Los sitios web y las aplicaciones basadas en la web se están volviendo más complejas a medida que los desarrolladores y la tecnología se vuelven más avanzados. A medida que la animación y el movimiento se convierten en el estándar, necesita una manera fácil de implementar pequeñas "campanas y silbatos" sin matar el presupuesto.
Scroll CSS es el camino.
hasta la próxima ...
Espero que algunos de estos se haya despertado su interés. Nos encanta compartir lo que podemos, y dado que estas herramientas nos ayudan a diario, es justo retribuir y compartirlas con la comunidad.
A medida que creamos más complementos jQuery, también nos encantaría compartir más. Si está interesado en crear algunos propios, vea el tutorial de Kyle Jasso JQuery Plugin Tutorial En el blog de Brolik.
= Hasta la próxima, sigue mejorando la web, y también lo haremos.