1

Здравствуйте! Необходимо сделать анимацию "подпрыгивания" экрана (т.е. сначала экран немного поднимается вверх, а потом возвращается в исходное положение, как скролинг вверх, а потом вниз) при нажатии на кнопку. И чтобы это было плавно

2
  • Не совсем понятно что требуется. Приведите пример
    – Cheg
    8 окт 2017 в 18:48
  • @Cheg, чтобы при нажатии весь контент страницы смещался вверх, а потом вниз. Эффект подпрыгивающего мяча
    – r.mcreal
    8 окт 2017 в 19:03

1 ответ 1

1

Вот пример того что вы хотели сделать. С методом animate плавно скроллим экран в низ, а после его завершения автоматически запускается вторая анимация обратно в верх.

$(document).ready(function(){
  $('.anim').bind('click', function(){
    $("HTML, BODY").animate({
      scrollTop: $('body').height()
    }, 300, function() {
      $("HTML, BODY").animate({
        scrollTop: 0
      }, 300)
    });
  });
});
.anim{
  cursor: pointer;
}
.red{
  color: red;
}
.green{
  color: green;
}
.blue{
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="anim">click me</button>
  <p class="red">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p class="green">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p class="blue">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p class="red">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p class="green">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p class="blue">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Вариант второй:

То что вы хотели в идеальном варианте. исходники из приведенной вами страницы.

$(document).ready(function(){
  $('.anim').bind('click', function(){
    $('.anim-container').addClass('css3-notification');
    //Это просто удаляет класс влияющий на анимацию
    //Если не нужно то не надо вставить в ваш код
    //Здесь для того что бы демострировать клик на много раз
    setTimeout(function(){
      $('.anim-container').removeClass('css3-notification');
    },2000);
  });
});
.anim{
  margin-bottom: 10px;
}
.css3-notification {
  -webkit-animation: bounce 800ms ease-out;
  -moz-animation: bounce 800ms ease-out;
  -o-animation: bounce 800ms ease-out;
  animation: bounce 800ms ease-out;
}

/* Webkit, Chrome и Safari */

@-webkit-keyframes bounce {
  0% {
  -webkit-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
    -webkit-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
    -webkit-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
    -webkit-transform:translateY(-50%);
  }
  40% {
    -webkit-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
    -webkit-transform:translateY(-30%);
  }
  70% {
    -webkit-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
    -webkit-transform:translateY(-15%);
  }
  90% {
    -webkit-transform:translateY(0%);
    padding-bottom: 8px;
  }
  95% {
    -webkit-transform:translateY(-10%);
  }
  97% {
    -webkit-transform:translateY(0%);
    padding-bottom: 9px;
  }
  99% {
    -webkit-transform:translateY(-5%);
  }
  100% {
    -webkit-transform:translateY(0);
    padding-bottom: 9px;
    opacity: 1;
  }
}

/* Mozilla Firefox 15 и старше */
@-moz-keyframes bounce {
  0% {
  -moz-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
    -moz-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
    -moz-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
    -moz-transform:translateY(-50%);
  }
  40% {
    -moz-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
    -moz-transform:translateY(-30%);
  }
  70% {
    -moz-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
    -moz-transform:translateY(-15%);
  }
  90% {
    -moz-transform:translateY(0%);
    padding-bottom: 8px;
  }
  95% {
    -moz-transform:translateY(-10%);
  }
  97% {
    -moz-transform:translateY(0%);
    padding-bottom: 9px;
  }
  99% {
    -moz-transform:translateY(-5%);
  }
  100% {
    -moz-transform:translateY(0);
    padding-bottom: 9px;
    opacity: 1;
  }
}

/* Opera 12.0 */
@-o-keyframes bounce {
  0% {
  -o-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
    -o-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
    -o-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
    -o-transform:translateY(-50%);
  }
  40% {
    -o-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
    -o-transform:translateY(-30%);
  }
  70% {
    -o-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
    -o-transform:translateY(-15%);
  }
  90% {
    -o-transform:translateY(0%);
    padding-bottom: 8px;
  }
  95% {
    -o-transform:translateY(-10%);
  }
  97% {
    -o-transform:translateY(0%);
    padding-bottom: 9px;
  }
  99% {
    -o-transform:translateY(-5%);
  }
  100% {
    -o-transform:translateY(0);
    padding-bottom: 9px;
    opacity: 1;
  }
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
  0% {
  transform:translateY(-100%);
    opacity: 0;
  }
  5% {
    transform:translateY(-100%);
    opacity: 0;
  }
  15% {
    transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
    transform:translateY(-50%);
  }
  40% {
    transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
    transform:translateY(-30%);
  }
  70% {
    transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
    transform:translateY(-15%);
  }
  90% {
    transform:translateY(0%);
    padding-bottom: 8px;
  }
  95% {
    transform:translateY(-7%);
  }
  97% {
    transform:translateY(0%);
    padding-bottom: 9px;
  }
  99% {
    transform:translateY(-3%);
  }
  100% {
    transform:translateY(0);
    padding-bottom: 9px;
    opacity: 1;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
  <title>Эффект отскока на CSS3 | Материалы сайта RUSELLER.COM</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="demo-wrapper css3-bounce-effect">
    <button class="anim">click me</button>
    <div class="anim-container">
      <p class="red">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p class="green">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
  <p class="blue">
    What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
    </div>
    
  </div>
</body>
</html>

7
  • @r.mcreal Вам так было нужно? 8 окт 2017 в 19:09
  • почти то что нужно. Только у вас сначала вниз идет, а потом вверх, мне нужно наоборот. И можно как то расстояние задать в пикселях, чтобы после окончания всего, вернуться в исходную позицию? А так в идеале такое: ruseller.com/lessons/les1642/demo/index.html .Но это не обязательно
    – r.mcreal
    8 окт 2017 в 19:17
  • @r.mcreal Вам нужно то что вы дали в ссылке? именно это? 8 окт 2017 в 19:21
  • в идеале да. Но можно по проще
    – r.mcreal
    8 окт 2017 в 19:26
  • @r.mcreal И это нужно при клике на что нибудь? 8 окт 2017 в 19:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.