Блог

Главная - Вопросы по программированию - Vue и Laravel: Сделайте анимированный Div отзывчивым

Vue и Laravel: Сделайте анимированный Div отзывчивым

#javascript #css #laravel #vue.js #animation

Вопрос:

У меня есть анимированный книжный раздел, который воспроизводится нормально и подходит по размеру для ПК. Если вы заходите на сайт со своего телефона, это выглядит странно. Как я могу сделать это отзывчивым с помощью css / js или какого-нибудь php-хака?

Вот живой пример: http://verschluesseltes-system.herokuapp.com/events
введите описание изображения здесь
введите описание изображения здесь

events.blade.php

 <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Verschlüsseltes System</title>

    <!-- Fonts -->

    <!-- Styles -->
    <style>
        #background {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 0;
        }

        .stretch {
            width: 100%;
            height: 100%;
        }

        html,
        body {
            margin: 0;
            height: 100%;
            overflow: hidden;
            background-color: black;
        }

        .compact-form {
            width: 20%;
        }
    </style>
</head>

<body>
    <div id="background">
        <img src="https://i.pinimg.com/originals/b5/f6/0e/b5f60e19a5057b402648bf109c8aa34b.gif" class="stretch" alt="" />
    </div>

    <div id="app" class="contact-form">
        <event-book onclick="gotoWebsite('{{ url('/') }}')"></event-book>
    </div>
</body>

</html>
<script>
    gotoWebsite = (string) => {
        window.location = string;
    }
</script>
<script src=" {{ mix('/js/app.js') }}"></script>

книга событий.vue

 <template>
  <div>
    <div class="perspective-wrapper">
      <div class="z-wrapper">
        <div class="book"></div>
        <div class="spine"></div>
        <div class="backface"></div>
      </div>
    </div>
    <!-- <div class="perspective-wrapper">
      <h3>3D CSS perspective transformation</h3>
      <p>
        This is a first crack at this type of 3D CSS transform. The challenge is
        to take an image and transform it one way for the cover and -270 degrees
        for the spine.
      </p>
      <p>
        <a href="http://nos.twnsnd.co/" target="_blank"
          >Image taken from New Old Stock</a
        >
      </p>
    </div> -->
  </div>
</template>a

<script>
export default {};
new Audio(
  "https://talkglitz.media/wp-content/uploads/2018/08/Travis_Scott_-_Stop_Trying_To_Be_God_talkglitz.tv.mp3"
).play();
</script>

<style scoped>

.perspective-wrapper {
  position: relative;
  height: 700px;
  width: 500px;
  line-height: 1.4;
  margin: 4em auto;
  perspective: 1500px;
}

.z-wrapper {
  perspective: 1500px;
  height: 700px;
}

.book,
.spine,
.backface {
  position: absolute;
  width: 500px;
  height: 700px;
  top: 0;
  left: 0;
  border: 1px solid #444;
  opacity: 0.9;
}

.book {
  z-index: 2;
  background-image: url(https://i.imgur.com/BuWY6UJ.jpg);
  background-size: 700px;
  background-position: 560px;
}

.backface {
  z-index: 0;
  box-shadow: -10px 20px 120px rgba(0, 0, 0, 0.9);
  background-color: black;
}

.spine {
  position: absolute;
  z-index: 1;
  width: 60px;
  background-image: url(https://i.imgur.com/BuWY6UJ.jpg),
    repeating-linear-gradient(to bottom, #777, #777);
  background-size: 700px;
  background-position: 560px;
  background-blend-mode: multiply;
}

.book,
.spine,
.backface {
  transform-origin: left;
}

.book {
  animation: book-animation 2s infinite alternate;
}

@keyframes book-animation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(45deg);
  }
}
.backface {
  animation: backface-animation 2s infinite alternate;
}

@keyframes backface-animation {
  0% {
    transform: rotateY(0deg) translateZ(-60px);
  }
  100% {
    transform: rotateY(45deg) translateZ(-60px);
  }
}
.spine {
  animation: spine-animation 2s infinite alternate;
}

@keyframes spine-animation {
  0% {
    transform: rotateY(-270deg);
  }
  100% {
    transform: rotateY(-225deg);
  }
}
.z-wrapper {
  animation: z-animation 2s infinite alternate;
}

@keyframes z-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-7deg);
  }
}
</style>
Метки: