¡Desbloquea vídeos ilimitados! Sube a Premium

Necesitas premium para acceder a este contenido. Suscríbete por $26USD al mes

Módulo 1 | 1 clases

Introducción

Módulo 2 | 3 clases

Controles con CSS

Módulo 3 | 5 clases

Slider

Módulo 4 | 2 clases

Navegación sticky

Módulo 5 | 5 clases

Menú hamburguesa

Módulo 6 | 2 clases

Video e imágenes

Módulo 7 | 2 clases

Navegación por tabs

Módulo 8 | 3 clases

Autocompletado

Módulo 9 | 5 clases

Ordenamiento con Drag&Drop

Módulo 10 | 2 clases

Animaciones

Módulo 11 | 4 clases

MaterialDesign de Google

Clase 1

Input MaterialDesign

Clase 2

Coreografía de entrada de elementos 1/2

Clase 3

Coreografía de entrada de elementos 2/2

Clase 4

Efecto ripple de MaterialDesign

Módulo 12 | 2 clases

Otros controles

Módulo 13 | 3 clases

Calendario

Módulo 14 | 2 clases

Efectos con texto

Módulo 15 | 4 clases

Nuevos efectos

Módulo 16 | 4 clases

Gratutios y demostraciones

Módulo 17 | 11 clases

Dark Mode

6 comentario(s)

@pablopozo

15 Abril 22

Hola, no logro entender la siguiente linea:

let style=element.currentStyle=window.getComputedStyle(element)

Como opera esa asignacion encadenada???

uriel

Ver respuestas (1)

John Suárez

04 Agosto 20

Cuando son 3 columnas no sale.

Andres Sanchez

03 Junio 20

es extraño, en el tamaño de mi monitor no funciona.

Anthony Sanchez

28 Abril 20

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.

Ver respuestas (1)

Juan Felizzola

25 Febrero 19

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';
}

Ver respuestas (1)

Hernan Castilla

04 Agosto 17

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);   
                    }
                }
            }  
        }

Ver respuestas (2)

Clase 32

Coreografía de entrada de elementos 2/2

32/60

Curso de controles y efectos Frontend