Fecha y hora actual: Jueves 17 Ago 2017 14:44
Índice del Foro

Foros de programación informática, diseño gráfico y Web

En esta comunidad intentaremos dar soporte de programación a todos los niveles, desde principiantes a profesionales de la informática, desarrollo de programas, programación web y mucho más.

Sass Animation Syntax - No comprendo

Responder al Tema

Índice del Foro > HTML y CSS > Sass Animation Syntax - No comprendo

Autor Mensaje
NrsctR
Usuario Iniciado


Registrado: 13 Mar 2017
Mensajes: 11

Mensaje Publicado: Lunes 13 Mar 2017 18:32

Título del mensaje: Sass Animation Syntax - No comprendo

Responder citando

Hola primero pido disculpas si no va en esta seccion lo que es SASS pero como es paracticamente CSS pense que iba aca.
Llevo pocos meses de aprender html y css, realmente se me hace facil. Se lo basico o diria intermedio, digamos... no se me complica crear estructuras basicas o avanzadas.
Hace poco descubri SASS y realmente me gusto, no se sera recomendable usar eso pero no esta mal para irse adentrando en otras cosas, el tema es que llego a puntos en que no entiendo, ya que la informacion esta en ingles y se me complica entender algunas cosas.
En fin... aun no entiendo mucho la logica que tiene para usar ciertas cosas, como por ejemplo... las animaciones, es un poco de javascript tambien no?...
hice esto... en donde tal vez este todo mal pero bueno... uno va experimentando.
Se que me falta ponerle como un "ID" para que lo agarre en el header, tambien la variable $animation no esta definida... no se... me perdi realmente jajja... si me puedieran darme una idea de la logica que usa, o como hay que nombrar las cosas... se los agradeceria.
Y un gusto... soy Pablo.


Cita:

>>>>>>>>>>>>>Main sass
----------------------------------------------
(a)import _variables
----------------------------------------------
>>>>>>>>>>>>>>>>_variables sass
----------------------------------------------
=animation($animation)
$animation: if(100%($animation) > 0, $animation, default-animation())
0%
transform: margin-left(0%)
30%
transform: margin-left(0%)
35%
transform: margin-left(-100%)
65%
transform: margin-left(-100%)
70%
transform: margin-left(-200%)
100%
transform: margin-left(-200%) ((animation: $animation))

-------------------------------------------------------
>>>>>>>>>>>>>>>>>>>>>>>_header sass
-------------------------------------------------------
.slidebox ul
display: flex
padding: 0
width: 300%
(a)include animation(10s)
-------------------------------------------------------


seria algo asi como... un bloque de imagenes de width:300% en donde se mueve cada cierto tiempo 100%... dentro de otro div entonces se ve una imagen, despues la otra y la otra y vuelve a retomar infinitas veces... se que las propiedades son "infinite alernate" dentro de "animation" pero desconozco donde van con SASS X_X

Volver arriba
Ver perfil del usuario Enviar mensaje privado
WhiteSkull
CoAdmin


Registrado: 20 Mar 2009
Mensajes: 3136
Ubicación: y*width+x

Mensaje Publicado: Martes 14 Mar 2017 14:16

Título del mensaje: Sass Animation Syntax - No comprendo

Responder citando

Te refieres a crear un "carrusel"? Sass es un preprocesador CSS.

Aquí tienes un ejemplo con muchas explicaciones (en inglés of course):
http://hugogiraudel.com/2014/07/16/automating-css-animations-with-sass/

PD Usen Codepen para publicar código!! (también soporta Sass)

Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor
NrsctR
Usuario Iniciado


Registrado: 13 Mar 2017
Mensajes: 11

Mensaje Publicado: Miércoles 15 Mar 2017 15:48

Título del mensaje: Sass Animation Syntax - No comprendo

Responder citando

Gracias! me sirvio Guiño ... No tenia muy en claro la forma de escribirlo. Saludos!

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Responder al Tema
Mostrar mensajes anteriores:   
Ir a:  
Todas las horas están en GMT + 1 Hora

Temas relacionados

Tema Autor Foros Respuestas Publicado
El foro no contiene ningún mensaje nuevo

Ayuda con una rutina de teclado que no comprend...

mayoscuro Visual Basic .NET 0 Lunes 16 Jul 2012 16:10 Ver último mensaje
Panel de Control
No puede crear mensajes, No puede responder temas, No puede editar sus mensajes, No puede borrar sus mensajes, No puede votar en encuestas,