Я пытаюсь имитировать c CSS анимации с сайта здесь: https://stanographer.com/
Я хочу скопировать способ сайта:
начинается с показа полноэкранного черного div, смещающегося вправо
«загружает» черный фон (теги div) за текстом (как в «Привет, Я Стэнли Сакай "), расширяю слева направо и
- " загружает "текст на черный фон div, расширяя слева направо.
Теперь вы можете спросить: «Почему бы просто не проверить страницу, посмотреть на классы в элементах div и text, а затем проверить лист CSS на вкладке сети?» И я попробовал это. CSS выглядит странно. Мой друг сказал, что это предварительно обработано SASS, что бы это ни значило. В любом случае, я не могу расшифровать код.
Я был на нескольких разных страницах StackOverflow (вот одна) и более десятка разных страниц в Google. Я узнал об использовании ключевых кадров, но я не понял, как воссоздать эффект на Stanographer.com. Мой друг, которому принадлежит веб-сайт, также предоставил этот пример, но я не понимаю, как применить его к отдельным элементам div. Он сказал что-то об использовании z-index, но я просто не вижу его.
Я знаю, что для того, чтобы страница начиналась с полностью черного экрана и затем выдвигалась, я должен вызвать изменение класса, используя JavaScript. У меня есть:
let blackStuff = document.getElementById("blackness");
window.addEventListener("load", () => {
console.log("loaded");
blackStuff.setAttribute("class", "black-box-out");
},
false
);
.black-box {
position: fixed;
float: left;
top: 0;
width: 100%;
height: 100%;
bottom: 0;
background-color: #000;
z-index: 999999;
-webkit-animation: powerslide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: powerslide 0.5s forwards;
animation-delay: 2s;
}
@-webkit-keyframes powerslide {
100% {
left: 0;
}
}
@keyframes powerslide {
100% {
left: 0;
}
}
.black-box-out {
margin-left: 100%;
animation: slide 0.5s forwards;
-webkit-transition: slide 0.5s forwards;
transition: slide 0.5s forwards;
}
<div id="blackness" class="black-box"></div>
Но это просто заставляет div "blackness" мгновенно исчезать при загрузке страницы. Я хочу, чтобы это выскользнуло. Очевидно, я не понимаю, как использовать CSS анимации.
Если вам интересно узнать больше о том, что не работает, читайте дальше. В противном случае вы можете пропустить этот раздел: он показывает только мои неудачные испытания.
Я узнал, как увеличить анимацию CSS по горизонтали от 0:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 50px;
border: 1px solid black;
}
.slide-custom {
width: 500px;
height: 50px;
background: cyan;
position: relative;
-webkit-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
/* moz and webkit keyframes excluded for space */
@keyframes slideIn {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="wrapper slide-custom">
<h1 class="slide-custom">
<span>MEET ROLY POLY.</span>
<!-- expands horizontally from 0 width to 100% width -->
</h1>
</div>
И я научился делать текст «скользящим» слева, хотя он начинается с ширины 100%, когда я хочу, чтобы он начинался с 0% ширина:
/* CSS */
.test-slide {
animation-duration: 3s;
animation-name: testSlide;
}
@keyframes testSlide {
from {
margin-left: 0%;
width: 50%;
}
to {
margin-left: 100%;
width: 100%;
}
}
<div class="test-slide">
<h1><span>ABOUT.</span></h1>
<!-- will slide in from the left -->
</div>
Есть еще кое-что - к сожалению, ничто из этого не имитирует сайт, который я пытаюсь скопировать.