Css показывает анимацию по горизонтали и останавливается на 50% - PullRequest
Новая
       24

Css показывает анимацию по горизонтали и останавливается на 50%

0 голосов
/ 14 ноября 2018

Я пытаюсь сделать так, чтобы красный фон обложки сдвинулся влево и остановился примерно на 50%, поэтому левый фон col-6 остается красным, а правый col-6 чистым. В настоящее время я запускаю это с помощью события кнопки, но в конечном итоге я сделаю это автоматически при загрузке страницы. Я сейчас вращаюсь на 90 градусов. Как я могу выполнить эту анимацию слайдов с помощью CSS трансформации / анимации? Я новичок в анимации CSS и не уверен, что я собираюсь сделать это правильно. Есть ли лучший подход к анимации этого типа?

Я пытаюсь следовать этой демонстрации, увиденной онлайн: https://dribbble.com/shots/3428458-Jobs-Page-Motion-Design#

.get-app-wrap {
  overflow: hidden;
}
.get-app-wrap .animate-wrap {
  position: relative;
}
.get-app-wrap .animate-wrap::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  background-color: #d4272e;
  top: 0;
  left: 0;
  bottom: 0;
  transform: rotate(0deg);
  transform-origin: 0px 0px;
  transition: transform linear 0.7s;
}
.get-app-wrap .animate-wrap.animated::after {
  transform: rotate(90deg);
}
.get-app-wrap .app-texts {
  color: #000;
}
.get-app-wrap .app-texts .app-text-padding {
  padding-right: 11rem;
  padding-left: 11rem;
}
.get-app-wrap .app-texts hr {
  color: #000;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
    <script src="./index.js"></script>
    <script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">
    <link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
    <link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />


    <link rel="stylesheet" type="text/css" href="./style/index.css">


</head>

<body>

    <div class="get-app-wrap mt-5">

        <div class="row animate-wrap">
            <div class="col-sm-6 pr-0">
                <div class="app-texts ">
                    <div class="app-text-padding pt-5 pb-5">
                        <h1>App headline here</h1>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure velit, dolore necessitatibus laboriosam
                            quis nobis culpa quia quod nostrum, modi aperiam, dolor iste voluptatibus minus? Rem nam expedita
                            aperiam autem!</p>
                        <h3 class="">Sub Headline Here</h3>
                        <ul>
                            <li> Modi tempora incidunt ut labore et dolore </li>
                            <li> Modi tempora incidunt ut labore et dolore </li>
                            <li> Modi tempora incidunt ut labore et dolore </li>
                        </ul>
                        <hr class="pr-0">
                        <div>
                            <h3 class="">Get the Apps</h3>
                            <div class="row">
                                <div class="col-sm-3"><img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1"
                                        alt="" class="img-fluid"></div>
                                <div class="col-sm-3">
                                    <img src="https://www.dropbox.com/s/zff1d2lef3tcbby/Google-play.png?dl=1"
                                        alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 ">
                <div class="app-image text-center pt-3">
                    <img src="https://www.dropbox.com/s/d64hd177n2vmjvn/iphone.png?dl=1" class="img-fluid" alt="">
                </div>
            </div>

        </div>
    </div>
    <button id="reveal-button">Reveal</button>

<script>

$("#reveal-button").on('click', function() {
	$(".animate-wrap").toggleClass('animated');
});
</script>
</body>

</html>

1 Ответ

0 голосов
/ 14 ноября 2018

Вместо поворота вы должны использовать свойство scaleX 

.get-app-wrap .animate-wrap.animated::after {
  transform: scaleX(.32);
}

Здесь у вас есть кодовое поле, дайте мне знать, если это поможет!

Вы можете добавитькласс для div с текстом, например .show-text

    <div class="row animate-wrap">
        <div class="col-sm-6 show-text pr-0">

А затем это 

.col-sm-6.show-text{
  z-index: 2;
}
...