Блог

Я пытаюсь добиться следующего эффекта прокрутки от Ракеты.Домашняя страница чата.

Смотрите эффект здесь

Сайт: https://rocket.chat/

Проблема в том, что я, похоже, не могу заставить изображение двигаться так, как у них на сайте. У кого-нибудь есть какие-нибудь идеи, почему? Или можете привести пример?

Мой component.html

 <section class="community py-5">
    <div class="container">
        <div class="content d-flex">
            <div class="content-info">
                <div class="mb-5">
                    <h3>Lorem ipsum text</h3>
                </div>
                <div class="text-wrapper">
                    <div class="text">
                        Some information to be said
                    </div>
                </div>
                <div class="btn-wrapper mt-5">
                    <a href="#" class="btn-contract-us">
                        <div>
                            <strong>Join Us</strong>
                        </div>
                    </a>
                </div>
            </div>
            <div class="content-image">
                <img 
                    [src]="codeImg" 
                    alt="" 
                    draggable="false" 
                />
            </div>
        </div>
    </div>
</section>
 

Мой компонент.scss

 .community {
    position: relative;

    .content-info {
        padding: 110px 140px 64px;
        flex: 1;
        background-color: #f7f8fa;
        // background-img
        background-position: -40px 0;
        background-size: 730px;
        background-repeat: no-repeat;

        div.text {
            margin: 0;
            font-size: 1.6rem;
            line-height: 3.2rem;
        }
        
        .btn-contract-us {
            background-color: #f5455c;
        }
    }

    .content-image {
        overflow: hidden;
        width: 30%;
        max-height: 524px;
        max-width: 430px;
        background-color: #1f2329;
        background-image: linear-gradient(180deg, #1f2329 60%, #000);

        img {
            transform: translate3d(0px, -45.9095%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);;
            transform-style: preserve-3d;
            will-change: transform;
        }
    }
}
 

Для этого вы можете использовать css-ключевой кадр-анимацию фонового изображения:

 .component{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.image{
  width:300px;
  height:200px;
  background-image: url('https://placekitten.com/300/400');
  animation: scrollImage;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;  
}

@keyframes scrollImage{
  from{
    background-position: center 0%
  }
  to{
    background-position: center 100%
  }
} 

 <div class="component">
  <div class="content">
    <h1>Look, Ma!</h1>
    <p>I animated a kitten instead of sourcecode.</p>
  </div>
  <div class="image"></div>
</div> 

Использование:
анимация-продолжительность — задает продолжительность одной итерации вашей анимации
анимация-количество итераций: бесконечно-позволяет вашей анимации работать бесконечно
анимация — направление: альтернативное-позволяет вашей анимации повторяться снова и снова