Анимация рамок слева внизу, когда браузер сокращается при сохранении постоянного размера? - PullRequest
Новая
       1

Анимация рамок слева внизу, когда браузер сокращается при сохранении постоянного размера?

0 голосов
/ 06 марта 2020

Я хочу сделать анимированную строку из 4 блоков в левом нижнем углу веб-страницы, когда браузер сжимается, сохраняя при этом постоянный размер относительно размера браузера. Обратите внимание на этот пример с домашней страницы веб-сайта : (прокрутите вниз до раздела «Скажи привет своему новому племени» чуть ниже изображения героя).

В моем коде ящики становятся тоньше и оставайтесь встроенными, не перемещаясь в нижний левый угол, прежде чем в конечном итоге наложить на ширину экрана браузера <600 пикселей. Я применил анимацию кривой Безье CSS к блокам ранее, и она не достигла эффекта, который я искал. </p>

Я ищу это bootstrap качество "укладки ящиков" с добавленным эффект скольжения их внизу слева, когда браузер сокращается. Конечно, когда браузер расширяется, чтобы заполнить экран, поля скользят в верхнем правом углу и снова отображаются в строке. Кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно и что мне нужно для достижения этого эффекта?

Спасибо.

Критерии:

1 ) Все 4 поля должны начинаться и находиться в одном ряду.
2) Когда браузер сжимается, ящики должны скользить внизу слева.
3) Все блоки должны иметь постоянный размер относительно размера браузера, не проливая его содержимое.
4) Пожалуйста, следуйте этому примеру здесь. 

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 20px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  border: 1px solid #97c3d4;
  background-color: #fff;
}
    <div class="row allyu-support-groups">
        <div class="column support-group">
        <div class="card">
            <img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
            <h3>Card 5</h3>
            <p>Some text</p>
            <p>Some text</p>
        </div>
        </div>

        <div class="column">
        <div class="card">
            <img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
            <h3>Card 6</h3>
            <p>Some text</p>
            <p>Some text</p>
        </div>
        </div>

        <div class="column">
        <div class="card">
            <img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
            <h3>Card 7</h3>
            <p>Some text</p>
            <p>Some text</p>
        </div>
        </div>

        <div class="column">
        <div class="card">
            <img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
            <h3>Card 8</h3>
            <p>Some text</p>
            <p>Some text</p>
        </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 06 марта 2020

Смотрите этот фрагмент, Прямо сейчас я реализую анимацию (снизу вверх) при загрузке страницы. Вы можете изменить событие согласно вашему требованию. Дайте мне знать, если у вас есть запрос. 

<!DOCTYPE html>
<html>
<head>
  <title>clientell</title>
  <meta charset="UTF-8">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


</head>
<body>
  <div class="row allyu-support-groups">
    <div class="column support-group">
    <div class="card">
        <img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
        <h3>Card 5</h3>
        <p>Some text</p>
        <p>Some text</p>
    </div>
    </div>

    <div class="column">
    <div class="card">
        <img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
        <h3>Card 6</h3>
        <p>Some text</p>
        <p>Some text</p>
    </div>
    </div>

    <div class="column">
    <div class="card">
        <img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
        <h3>Card 7</h3>
        <p>Some text</p>
        <p>Some text</p>
    </div>
    </div>

    <div class="column">
    <div class="card">
        <img src="https://dev.allyu.org/wp-content/themes/thrive-nouveau-child/img/avatar.svg" class="support-group-avatar" />
        <h3>Card 8</h3>
        <p>Some text</p>
        <p>Some text</p>
    </div>
    </div>
</div>
</div>




<style>
/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 20px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  border: 1px solid #97c3d4;
  background-color: #fff;
}

.row.allyu-support-groups .column {
    display: inline-block;
    text-align: center;
    margin: 1%;
    padding: 0;
    width: calc(25% - 2%);
}

.row.allyu-support-groups .column img {
    width: 100%;
    height: auto;
    max-width: 100px;
}

.row.allyu-support-groups{position: relative;top:300px;}

</style>


<script>

$(document).ready(function(){

    $(".row.allyu-support-groups").animate({top: "0px"});
 

});
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...