Как добиться этого эффекта парения? - PullRequest
Новая
       66

Как добиться этого эффекта парения?

0 голосов
/ 24 февраля 2020

Я пытаюсь выяснить, как эффект наведения на ссылки (в разделе РАБОТА) достигается на этом сайте: http://weaintplastic.com/

Можно ли это сделать с помощью CSS анимации? Или задействовано JavaScript

Я пытался использовать переход CSS, но не могу заставить оба элемента двигаться одновременно.

Спасибо!

Ответы [ 3 ]

1 голос
/ 24 февраля 2020

Это можно сделать с помощью CSS: 

.project-nav .project-link:hover .link__headline {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}

.project-nav .project-link:hover .link__subline {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}
0 голосов
/ 24 февраля 2020

Это может быть сделано только с использованием CSS анимации. Я сделал пример: 

body {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

a {
  text-decoration: none;
  color: black;
}

a.animation-link {
  letter-spacing: .1em;
  font-weight: bold;
}

.animation-link .link__headline,
.animation-link .link__subline {
  -webkit-transition: .25s cubic-bezier(.165, .84, .44, 1);
  -webkit-transform: translateY(0);
}

.animation-link .link__headline {
  display: block;
  font-size: 1.25em;
}

.animation-link:hover .link__headline {
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
}

.animation-link .link__subline {
  display: inline-block;
  margin: 0;
  background-color: transparent;
  transition: .25s cubic-bezier(.165, .84, .44, 1);
  -ms-transform: translateY(0);
  transform: translateY(0);
  min-width: 0;
  opacity: 1;
  color: green;
}

.animation-link:hover .link__subline {
  opacity: 0;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>

<body>
  <a class="animation-link" href="#">
    <span class="link__headline">Pulp Fiction Movie</span>
    <h6 class="link__subline">by Quentin Tarantino</h6>
  </a>
</body>

</html>
0 голосов
/ 24 февраля 2020

Это можно сделать с помощью CSS: селектор при наведении.

Что они здесь делают, так это то, что они дают низ текст 

opacity: 0;
transform: translateY(-10px);
transition: .25s cubic-bezier(.165,.84,.44,1);

и они дают верхний текст 

transform: translateY(10px);
transition: .25s cubic-bezier(.165,.84,.44,1);

То, что происходит, плавно перестраивает текст, а также скрывает нижний.

Редактировать:

CSS связан следующим образом: 

.project-link:hover .link__headline
.project-link:hover .link__subline

Таким образом, когда .project-link перемещается, нижний и верхний текст анимируются одновременно.

...