Top 20 EFECTOS en CSS y JAVASCRIPT | 🔥 TUTORIALES y CÓDIGOS de Animaciones INCLUIDOS 2022
ฝัง
- เผยแพร่เมื่อ 8 พ.ค. 2022
- En este video os enseño mi top 20 efectos en CSS y Javascript para inspirarte en tu proyecto de página web.
TUTORIALES y CÓDIGOS de las animaciones CSS y Javascript incluidos:
EFECTO CSS Y JAVASCRIPT 1
codepen.io/argyleink/pen/poEjvpd
EFECTO CSS Y JAVASCRIPT 2
codepen.io/sdelaney/pen/wWdxPe
EFECTO CSS Y JAVASCRIPT 3
codepen.io/yoannhel/pen/DMzjog
EFECTO CSS Y JAVASCRIPT 4
codepen.io/dead_pixel/pen/KKevEE
EFECTO CSS Y JAVASCRIPT 5
codepen.io/jakegilesphillips/...
EFECTO CSS Y JAVASCRIPT 6
codepen.io/zanewesley/pen/NWR...
EFECTO CSS Y JAVASCRIPT 7
codepen.io/hjdesigner/pen/jvyJdX
EFECTO CSS Y JAVASCRIPT 8
codepen.io/donovanh/pen/KwEQdQ
EFECTO CSS Y JAVASCRIPT 9
codepen.io/Ferie/pen/abBVeER
EFECTO CSS Y JAVASCRIPT 10
codepen.io/petersonby/pen/gzxpdj
EFECTO CSS Y JAVASCRIPT 11
codepen.io/jh3y/pen/ExNQxKV
EFECTO CSS Y JAVASCRIPT 12
codepen.io/nitishkmrk/pen/jyYEop
EFECTO CSS Y JAVASCRIPT 13
codepen.io/jkantner/pen/OJNezxj
EFECTO CSS Y JAVASCRIPT 14
codepen.io/ajerez/pen/EaEEOW
EFECTO CSS Y JAVASCRIPT 15
codepen.io/oliviale/pen/YgzNzK
EFECTO CSS Y JAVASCRIPT 16
codepen.io/MarioDesigns/pen/w...
EFECTO CSS Y JAVASCRIPT 17
codepen.io/Coding-Artist/pen/...
EFECTO CSS Y JAVASCRIPT 18
codepen.io/johanmouchet/pen/O...
EFECTO CSS Y JAVASCRIPT 19
codepen.io/dazld/pen/npydRK
EFECTO CSS Y JAVASCRIPT 20
codepen.io/Maxoor/pen/JZZvXJ
📣 SUSCRIBETE A MI CANAL! ;-)
y activa la campanita 🔔 de notificaciones para no perderte mis videos! A suscribirse!
th-cam.com/users/JaviNiguez?...
MI SETUP (ENLACES A AMAZON PARA QUE LOS PUEDAS COMPRAR)
MacBook Pro
Amazon ES: amzn.to/3uXBkLk
Amazon EEUU: amzn.to/32zysZf
Monitores Samsung FullHD 24”
Amazon ES: amzn.to/3dqiE0Z
Amazon EEUU: amzn.to/3gi2Kra
Portatil HP
Amazon ES: amzn.to/3sqlkjl
Amazon EEUU: amzn.to/2RHZoDO
Monitor LG Ultrawide
Amazon ES: amzn.to/3spoRyo
Amazon EEUU: amzn.to/3mTDLMg
Teclado Razer Ornata chroma
Amazon ES: amzn.to/3tugcfm
Amazon EEUU: amzn.to/3snP7ZV
Ratón Razer Basilisk
Amazon ES: amzn.to/3tuoNyL
Amazon EEUU: amzn.to/3slmNaB
Monitores M-Audio BX5 D3
Amazon ES: amzn.to/2QxfteM
Amazon EEUU: amzn.to/3aj0H2j
Interfaz de audio M-Audio 192|6
Amazon ES: amzn.to/32lEdcJ
Amazon EEUU: amzn.to/3gndx3H
iPad 10,2 pulgadas
Amazon ES: amzn.to/3tq3n5L
Amazon EEUU: amzn.to/3uWw9eS - วิทยาศาสตร์และเทคโนโลยี
Algunos miran el mundial... y otros una buena compilación de efectos CSS + JS Gracias Javi Niguez!
El mundial es para niñas, este curso.... Para verdaderos hombres
yo los dos
Hola los que más me gustaron fueron 4, 5, 8, 11, 13, 16 y 20 Gracias por compartir tus conocimientos 👍
¡Gracias, excelente aporte!
excelente aportación, gracias. Nuevo suscriptor
Muchas gracias! 😉
hola buenas a la hora de hacer el efecto 3 la letra que utilizas para acortar (&) código no funciona
buenos efectos gracias!
Muchas gracias!
Hola, como pudiera inceptarlo en Google sites por ejemplo, será bueno recomendarías formas de hacerlo para los que no saben utilizarlos bien. Saludos
como puedo mostrar la utima palabra del titulo cuando esta oculta por ... punto maximo de palabras
bro, porque aparece un blur detras de el video en youtube, se le escaparon los efectos del video
Hola, muy buenos los videos.
Una consulta tienes alguno de zoom infinito con js y css
Saludos
alguien tiene el efecto #3? me dice error en el codigo :(
holaaaaa en el efecto 3 la letra que utilizas para acortar código no funciona (&) con que se puede remplazar?
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")
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
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 😉👍
pero... para crear una web, necesitarias como minimo css, con HTML5 no haces nada
@@zzv4l3nzz76 Técnicamente en HTML puede incluir el css, aunque es sabotear tu propio documento ajja
la taza la quiero hacer responsiva, pero no he podido, ya use flex column :(
Usa media queries y transform :Scale()
usa @media y ve cambiandole el height y width poco a poco
15
3 , 4,5,
No puedo crear el efecto 3 porque soy bastante ignorante y no encuentro el tutorial 😢
No necesitas crearlo, los códigos los tienes en la descripción jeje 😉
Buenas!!!!!!! como puedo aplicar el código 3??
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
@@Laucheetah Amigo eres un crack. Muchas gracias!!!
Buaaaaaaaaaaah hay tanto Javascript que casi me cago encima
😂😂😂😂
Por qué es js no hay nada
Son muy pocos, pero si hay
La música no deja , es aburrida.
Es lo malo de la música sin derechos, que hay poco donde elegir 😅😂