У меня есть относительно сложные формулы, например, transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))
как отладить вычисленное значение?Более того, есть ли способ проверить / выделить ошибки формул?
Я попытался вывести таким образом псевдоэлемент, но не повезло
position: fixed;
display: block;
left:0;
right: 0;
background: yellow;
padding: 5px;
z-index: 100;
content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));
Единственный способ, который я нашел, - поместить часть вычисленияк неиспользуемому числовому свойству, например, background-position-x на рисунке ниже, чтобы оно показывало вычисленное значение на вычисляемой вкладке - полезно, но не очень удобно (уведомление background-position-x изменяется при прокрутке страницы):
var sc = ScrollOut({
cssProps: true
})
const results = Splitting();
var parallaxedElements = document.querySelectorAll('.section');
document.addEventListener('scroll', function(e) {
parallaxedElements
Array.from(parallaxedElements).forEach((el) => {
var bcr = el.getBoundingClientRect();
if (bcr.y < 0 && Math.abs(bcr.y) <= bcr.height) {
el.style.setProperty("--scrolled-out-y", Math.round(Math.abs(bcr.y) * 10000 / bcr.height) / 10000);
}
});
})
@import url("https://fonts.googleapis.com/css?family=Roboto");
html {
scroll-behavior: smooth;
}
body {
font-family: "Roboto";
font-size: 14px;
line-height: 1.4;
scroll-behavior: smooth;
}
.section {
position: relative;
background-attachment: fixed;
z-index: 1;
--image-scale: 1.2;
--scrolled-out-y: 0;
}
.section__background {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.section__background:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 1;
background: linear-gradient(to bottom, black, 100% white);
background: rgba(0, 0, 0, 0.4);
opacity: calc(1 + ((var(--viewport-y) * 1.5)));
}
.section__background>img {
height: 150vh;
width: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0px;
user-select: none;
transform: scale(var(--image-scale)) translateY(calc((-1px * var(--element-height) * (var(--image-scale) - 1)) * var(--scrolled-out-y)));
}
/* .indicator:after {
position: fixed;
display: block;
left: 0;
right: 0;
background: pink;
padding: 5px;
z-index: 100;
content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));
} */
.section__container {
padding-bottom: 50vh;
overflow: hidden;
align-items: flex-start;
position: relative;
z-index: 4;
}
.section__heading {
color: #fff;
text-transform: uppercase;
font-size: 45px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 8px;
margin: 0;
overflow: hidden;
position: relative;
padding-bottom: 50px;
margin-bottom: 50px;
}
.section__heading:after {
content: "";
position: absolute;
top: 200px;
left: 0;
right: 0;
height: 2px;
transform: translateX(calc(var(--scrolled-out-y) * 100% - 70%));
background: #b38c6b;
}
.section__content {
display: flex;
color: white;
flex-direction: column;
}
.section__content p+p {
margin-top: 20px;
}
.splitting {
--char-percent: calc(var(--char-index) / var(--char-total));
}
.splitting .char {
display: inline-block;
opacity: calc(1 + ((var(--viewport-y) * 1.5) - var(--char-percent)));
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting.css'>
<section data-scroll class="section section-1">
<div class="section__background">
<div class="indicator"></div>
<img src="https://picsum.photos/1920/1079" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-2">
<div class="section__background">
<img src="https://picsum.photos/1920/1081" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-3">
<div class="section__background">
<img src="https://picsum.photos/1920/1082" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-4">
<div class="section__background">
<img src="https://picsum.photos/1920/1083" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-5">
<div class="section__background">
<img src="https://picsum.photos/1920/1084" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll class="section section-6">
<div class="section__background">
<img src="https://picsum.photos/1920/1085" alt="placeholder image" />
</div>
<div class="container section__container">
<div class="row">
<div class="title-block col-md-6 d-flex">
<h1 data-scroll data-splitting class="section__heading">
Why <br>CSS <br>matters
</h1>
</div>
<div class="col-md-6 d-flex">
<div class="section__content">
<p>
MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it’s awesome!
</p>
<p>
In this article we’ll look at the history, importance, and use of CSS variables, and how you can leverage them to make your CSS development and maintenance faster and easier.
</p>
<p>
Keep reading and you will understand why.
</p>
<div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src='https://unpkg.com/scroll-out/dist/scroll-out.min.js'></script>
<script src='https://unpkg.com/splitting@1.0.0/dist/splitting.js'></script>