Comment déboguer les valeurs CSS calc() ?
Problème
J'ai une formule relativement complexe, par exemple : transform: scale(var(--image-scale)) translateY ( calc((1px var(--element-height) (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))
Comment déboguer la valeur calculée ?
De plus, existe-t-il un moyen de vérifier/mettre en évidence les erreurs de formule ?
J'ai essayé cette
corrigé ;</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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));
N'a pas fonctionné
Le seul moyen que j'ai trouvé était Une partie du calcul est placée dans un attribut numérique inutilisé, par exemple dans le gif ci-dessous background-position-x afin qu'il affiche la valeur calculée sur l'onglet de calcul - utile mais pas très pratique (remarquez que background-position-x change à mesure que la page défile) :
<div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">cssProps: true
})
résultats const = Fractionnement ();
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); } }); </p> <p>})
scroll-behavior: smooth;
}
corps {
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:après {
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)));
}
/* .indicateur:après {
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 :après {
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=' feuille de style' href='https://unpkg.com/splitting/dist/splitting.css'></p> <p><section data-scroll> <div class="section__background"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
<div>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!