-
check_circle_outlineMódulo 1 | 1 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 3 clases
Controles con CSS
expand_more -
check_circle_outlineMódulo 3 | 5 clases
Slider
expand_more -
check_circle_outlineMódulo 4 | 2 clases
Navegación sticky
expand_more -
check_circle_outlineMódulo 5 | 5 clases
Menú hamburguesa
expand_more -
check_circle_outlineMódulo 6 | 2 clases
Video e imágenes
expand_more -
check_circle_outlineMódulo 7 | 2 clases
Navegación por tabs
expand_more -
check_circle_outlineMódulo 8 | 3 clases
Autocompletado
expand_more -
check_circle_outlineMódulo 9 | 5 clases
Ordenamiento con Drag&Drop
expand_more -
check_circle_outlineMódulo 10 | 2 clases
Animaciones
expand_more -
check_circle_outlineMódulo 11 | 4 clases
MaterialDesign de Google
expand_more -
check_circle_outlineMódulo 12 | 2 clases
Otros controles
expand_more -
check_circle_outlineMódulo 13 | 3 clases
Calendario
expand_more -
check_circle_outlineMódulo 14 | 2 clases
Efectos con texto
expand_more -
check_circle_outlineMódulo 15 | 4 clases
Nuevos efectos
expand_more -
check_circle_outlineMódulo 16 | 4 clases
Gratutios y demostraciones
expand_more -
check_circle_outlineMódulo 17 | 11 clases
Dark Mode
expand_more
6 comentario(s)
Profe Uriel , en base a su experiencia , cuantos elementos podemos colocar en una misma vista para que sea agradable al usuario, es decir, para aplicar la paginacion , no se si se llama técnicamente así el efecto.
Me llama mucho la atención porque el ejercicio se aplica mucho en las tiendas en línea, entonces si hay una cantidad considerable de productos por ejemplo 100 , es algo forzado para el usuario hacer tanto scroll.
Me llama mucho la atención porque el ejercicio se aplica mucho en las tiendas en línea, entonces si hay una cantidad considerable de productos por ejemplo 100 , es algo forzado para el usuario hacer tanto scroll.
Cuando en pantalla todas las filas de las card no son iguales no funciona.
Uncaught TypeError: Cannot read property 'style' of undefined
Para resolver esto lo hice de la siguiente forma:
if (this.elements[i + (j - i)] != undefined) { this.elements[i + (j - i)].style.animationDelay = (positionSum * 50) + 'ms'; }
class Choreography{
constructor(container_selector, item_selector){
this.container = document.querySelector(container_selector);
this.elements = this.container.querySelectorAll(item_selector);
this.elements.forEach(e=>{
e.style.opacity = 0;
});
this.element = 0;
this.getNItems();
}
getNItems(){
let itemWidth = Dim.getWidth(this.elements[0]);
let containerWidth =this.container.clientWidth;
let itemsPerRow = Math.floor(containerWidth / itemWidth);
this.addDelay(itemsPerRow);
this.elements.forEach(e => {e.classList.add("zoomIn")})
}
addDelay(itemsPerRow, x=0, y=0){
if(x < (this.elements.length / itemsPerRow)){
if(y < itemsPerRow && this.element < this.elements.length-1){
this.elements[this.element].style.animationDelay = (x+y*50)+"ms";
this.element++;
this.addDelay(itemsPerRow, x, y+1);
}else{
this.addDelay(itemsPerRow, x+1, 0);
}
}
}
}
Clase 32