как создать выделенный текст на фоновом изображении, чтобы текст мог анимироваться поверх изображения - PullRequest
Новая
       67

как создать выделенный текст на фоновом изображении, чтобы текст мог анимироваться поверх изображения

1 голос
/ 30 мая 2019

Мне бы хотелось иметь фоновое изображение, которое отображается только через выделенный текст, а затем анимировать этот текст с верха страницы до низа страницы, показывая различные части фонового изображения при перемещении текста.

Я знаю, как сделать нокаутирующий текст: 

#screen1 h1 {
    display:block;
    margin: auto;
    font-family: 'proxima-nova', sans-serif;
    background-image: url('../img/my-image.jpg');
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 12rem;
    font-weight: 800;
}

Но то, что я хочу, больше похоже на фоновое изображение на # screen1, которое отображается только в нокаутирующем тексте. Поэтому, когда вы анимируете выделенный текст, он показывает различные части фонового изображения.

HTML: 

<div id="screen1" >
<div style="">
<h1>MY TEXT</h1>
</div>  
</div>

CSS: 

#screen1 {
    background: url(../img/my-image.jpg) no-repeat; 
    background-size: cover;
    overflow: hidden;
}
#screen1 h1 {
    display:block;
    margin: auto;
    font-family: 'proxima-nova', sans-serif;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 12rem;
    font-weight: 800;
}

Но это только показывает фоновое изображение. Я чувствую, что я близко.

1 Ответ

1 голос
/ 30 мая 2019

Мне бы хотелось, чтобы фоновое изображение показывалось только через нокаутированный текст, а затем анимировало этот текст с верха страницы до низа страницы, показывая различные части фонового изображения в видетекст перемещается.

Вы можете анимировать текст, открывая фоновое изображение: 

body {
 margin: 0;
 background-color: lightblue;
 overflow: hidden;
}

h1 {
  display: flex;
  justify-content: center;
  height: 100vh;
  margin: auto;
  font-family: 'proxima-nova', sans-serif;
  background: url('https://placekitten.com/g/200/300') no-repeat;
  background-size: cover;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 800;
  padding-top: 0;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  to {
    padding-top: calc(100vh - 6rem);
  }
}
<h1>Text</h1>

Вы можете сделать то же самое с разметкой, которая имеет #screen1 и h1, вложенные в , наследуя фон для h1, а затем эффект для фона - см. демонстрацию ниже: 

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

#screen1 {
  background: url('https://placekitten.com/g/200/300') no-repeat, lightblue;
  background-size: 0; /* don't show the background yet */
  height: 100vh;
  overflow: hidden;
}

#screen1>div {
  background: inherit;
  /* background size is still zero */
  height: 100%;
}

#screen1 h1 {
  display: flex;
  justify-content: center;
  margin: 0;
  background: inherit;
  /* now show the background */
  background-size: cover;
  font-family: 'proxima-nova', sans-serif;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 800;
  padding-top: 0;
  animation: animate 5s linear infinite;
  height: 100%;
}

@keyframes animate {
  to {
    padding-top: calc(100vh - 5rem);
  }
}
<div id="screen1">
  <div>
    <h1>MY TEXT</h1>
  </div>
</div>
...