Estilos y Animaciones en Galerías con Figma y CSS

Clase 17 de 20 • Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Alonso Chaves

student•

Si quieren que se vea un poco mas fluido al momento de pasar el mouse sobre una imagen pueden usar "transition-duration: 0.3s;" y ponerle el tiempo que ustedes gusten


.gallery{
    margin: 60px;
    .gallery-images{
        @include flexCenter(row,  space-between, center);
        img{
            width: 28vw;
            height: 45vh;
            object-fit: cover;
            object-position: 5px 35%;
            border-radius: 16px;
            &:hover{
                transform: scale(1.1);
                transition-duration: 0.3s;
            }
        }
    }
}

Fabian Camilo Huertas Suarez

student•

Buen tip Alonso gracias!

GERMAN GARCIA

student•

muy buena Capo, se ve menos robotica y mas lenta

Alejandro Ramos

student•

Así fue como lleve la parte del gallery, hice que las imagenes agarren un tamaño cuadrado :D

.gallery{
    @extend .about-us;
    &-images{
        width: 100%;
        display: flex;
        justify-content: space-between;
        img{
            aspect-ratio: 1/1;
            height: 100%;
            width: 30%;
            object-fit: cover;
            object-position: center;
            border-radius: 16px;
            transition: transform 0.2s;
            &:hover{
                transform: scale(1.1);
            }
        }
    }
}

Ulqernesh Karvenae

student•

En la sección de button cree una animación, no se vera inmediatamente cuando la persona ingrese a la pagina pero se activara 20s después, va variando el color de conoce mas de a pocos , es sutil pero lindo.

button
                background-color: #FA9500
                width: 260px
                height: 65px
                border-radius: 35px
                color: white
                font-size: 2.3rem
                &:hover
                        transform: scale(1.1)
                animation: aumento 10s ease-in-out infinite 20s
                @keyframes aumento
                    0%
                        background-color: #FA9500
                    20%
                        background-color: #ffd6be
                        color: #FA9500
                    50%
                        background:  none
                        color: #fa6800
                    80%
                        background-color: #ffd6be
                        color: #FA9500
                    100%
                        background-color: #FA9500

mas especifico aquí:

animation: aumento 10s ease-in-out infinite 20s
                @keyframes aumento
                    0%
                        background-color: #FA9500
                    20%
                        background-color: #ffd6be
                        color: #FA9500
                    50%
                        background:  none
                        color: #fa6800
                    80%
                        background-color: #ffd6be
                        color: #FA9500
                    100%
                        background-color: #FA9500```

Oscar Fuentes Esteves

student•

otra manera de de hacer más fluida la animación, a parte de la de transition-duration es con esta:

transition: transform 0.3s ease;

Siento que se tiene más control sobre esta forma, aunque para el ejercicio, ambas son igual de validas.

Juan Sebastian Giraldo Escobar

student•

Con este código se ve mejor la animación tanto al hacer hover como al quitar el hover.

img{
            width: 30vw;
            height: 45vh;
            border-radius: 16px;
            object-fit: cover;
            transition: transform 0.2s;
            &:hover{
                transform: scale(1.1);
                transition: transform 0.2s;
            }
        }

Diego Andrés Lopez Rodriguez

student•

Angie Alvarez

student•

buenas noches explico algo de la terminal al inicio del curso prework ,pero perdi mi lapto entonces esto desde otra y pues ya regresarme me atrasaia estoy sigueindo ahora este curso pero lo que hago en editor de texto no se refleja en el live server seria de mucha ayuda que alguien me ayude para no regresarme gracias

Bastian Maurico Landskron Silva

student•

Es que está trabajando con LocalHost y no con live server hay que instalar la dependencia

npm install -g sass

Daniel Andres Rojas Paredes

student•


 . aboutUs{
  &__mision{
    background-color: $fourd-color;
    @include flexCenter(row,space-evenly ,center );
    div{
      display:flex;
    }
    img{
      margin: 4px;
      padding: 4px;
      width: 6rem;
      height: 6rem;
      align-self: center;
      justify-self: center;

    }
    p{
      text-align: start;
      padding: 8px;
      margin: 16px;
    }
  }
}

  a

/*este es mi codigo de la clase pasada
¿que opinion les debe respecto a el formato para  escalabilidad ?
al final no tengo claro si usar las tags  en el css para dar estilos esta mal
*/

Pablo Alejandro Figueroa

student•

& img {
    width: clamp(250px, 25cqw, 380px);
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    @include box-shadow(1px, 10px);
    opacity: 0.8;
    transition: transform 500ms ease-in, opacity 800ms ease-in;

    &:hover {
      transform: scale(1.1);
      opacity: 1;
    }
  }

Byron Tito

student•

transition: transform 0.3s ease;

Agregando esto a img puede hacer la transición mas suave y se ve mejor

Juan David Santamaria Gomez

student•