Top 20 EFECTOS en CSS y JAVASCRIPT | 🔥 TUTORIALES y CÓDIGOS de Animaciones INCLUIDOS 2022

[@gonzalocengia1096]

Algunos miran el mundial... y otros una buena compilación de efectos CSS + JS Gracias Javi Niguez!

[@ronaldmoya3378]

El mundial es para niñas, este curso.... Para verdaderos hombres

[@ramosloungesite]

yo los dos

[@romygarciaespinoza4640]

Hola los que más me gustaron fueron 4, 5, 8, 11, 13, 16 y 20 Gracias por compartir tus conocimientos 👍

[@haydendanielmicchiardipena6340]

hola buenas a la hora de hacer el efecto 3 la letra que utilizas para acortar (&) código no funciona

[@realidadesalucinantes]

Hola, como pudiera inceptarlo en Google sites por ejemplo, será bueno recomendarías formas de hacerlo para los que no saben utilizarlos bien. Saludos

[@ponchiux7]

¡Gracias, excelente aporte!

[@echateunfifita]

Muy buen vídeo, ¡gracias!

[@JaviNiguez]

Muchas gracias! 😉

[@joazEsSan]

excelente aportación, gracias. Nuevo suscriptor

[@JaviNiguez]

Muchas gracias! 😉

[@JOCSH-fe2bi]

bro, porque aparece un blur detras de el video en youtube, se le escaparon los efectos del video

[@Zenkio]

como puedo mostrar la utima palabra del titulo cuando esta oculta por ... punto maximo de palabras

[@themastercorios5329]

Hola buen dia yo tengo un poco de conocimiento de html y tengo una "pagina web" que es tarea de la escuela, pero no nos enseñaron nada de javacript entonces no se como implementarlo.
tendrías algún video de ayuda que me sirva el como implementar esas animaciones a mi pagina web ya creada

[@JaviNiguez]

En ese caso necesitarías aprender un poco de Javascript, necesitas comprender como funciona, yo ahora mismo no tengo un vídeo, pero aquí en youtube hay muchos 😉👍

[@Valencorezan]

pero... para crear una web, necesitarias como minimo css, con HTML5 no haces nada

[@SoyRiperG]

@@Valencorezan Técnicamente en HTML puede incluir el css, aunque es sabotear tu propio documento ajja

[@Sepac90]

Hola, muy buenos los videos.
Una consulta tienes alguno de zoom infinito con js y css
Saludos

[@lucagaleazzi302]

holaaaaa en el efecto 3 la letra que utilizas para acortar código no funciona (&) con que se puede remplazar?

[@recontradaniel]

en el cuadro del css toca la flechita y en el menu desplegable pone vista compilada css (view compiled css) y asi lo formatea para la web (aparece un icono verde q dice "compiled")

[@oniricforge]

buenos efectos gracias!

[@JaviNiguez]

Muchas gracias!

[@MusicLightsfull]

la taza la quiero hacer responsiva, pero no he podido, ya use flex column :(

[@joelventura76]

Usa media queries y transform :Scale()

[@Valencorezan]

usa @media y ve cambiandole el height y width poco a poco

[@ArnoldCáceres-z9l]

alguien tiene el efecto #3? me dice error en el codigo :(

[@gerard1589]

Buenas!!!!!!! como puedo aplicar el código 3??

[@Laucheetah]

el codigo 3 probablemente no te anda porque es SCSS yo lo adapte a CSS y me anda use este codigo de aca :
body {
width: 100%;
height: 100%;
position: fixed;
background-color: #34495e;
}

.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-family: 'Lato', sans-serif;
font-size: 35px;
line-height: 40px;
color: #ecf0f1;
}

.content__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}

.content__container:before {
content: '[';
left: 0;
}

.content__container:after {
content: ']';
position: absolute;
right: 0;
}

.content__container:after,
.content__container:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
line-height: 40px;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}

.content__container__text {
display: inline;
float: left;
margin: 0;
}

.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}

.content__container__list__item {
line-height: 40px;
margin: 0;
}

@keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}

@keyframes change {
0%, 12.66%, 100% {
transform: translate3d(0, 0, 0);
}
16.66%, 29.32% {
transform: translate3d(0, -25%, 0);
}
33.32%, 45.98% {
transform: translate3d(0, -50%, 0);
}
49.98%, 62.64% {
transform: translate3d(0, -75%, 0);
}
66.64%, 79.3% {
transform: translate3d(0, -50%, 0);
}
83.3%, 95.96% {
transform: translate3d(0, -25%, 0);
}
}
Tambien borrale el signo de exlamacion a las palabras del codigo html

[@alansastre1578]

@@Laucheetah Amigo eres un crack. Muchas gracias!!!

[@ezenum2]

@@Laucheetah sigue sin funcionarme:(

[@alejandrobracamonte9581]

No puedo crear el efecto 3 porque soy bastante ignorante y no encuentro el tutorial 😢

[@JaviNiguez]

No necesitas crearlo, los códigos los tienes en la descripción jeje 😉

[@christianpg441]

15

[@pondo13]

Buaaaaaaaaaaah hay tanto Javascript que casi me cago encima

[@JaviNiguez]

😂😂😂😂

[@elianmorales1981]

3 , 4,5,

[@vianenco]

Y el código ???

[@JaviNiguez]

Has mirado en la descripción del vídeo? 😂😉

[@gustavoangeles9061]

Por qué es js no hay nada

[@yoselyn10avalos88]

Son muy pocos, pero si hay

[@nestorrodriguez2617]

La música no deja , es aburrida.

[@JaviNiguez]

Es lo malo de la música sin derechos, que hay poco donde elegir 😅😂