1) Код, чтобы спрятать меню ME603

<style>
#rec1184592286 .t-container {
z-index: -1;
position: absolute;
}
</style>


Код для регулировки отступов блока магазина (ST315N)

<style>
.t786__container_indent.t786__container_clgap-10px {
padding: 0 15px !important;
}
</style>


Код для новостного потока (FD301)

<style>
@media (min-width: 961px) {
.t-feed__container {
max-width: calc(100% - 25px);
}
.t-feed__post {
margin-left: 5px;
margin-right: 5px;
max-width: calc(25% - 10px);
}
}
</style>


Код для регулировки отступов в квизе (блок QZ101B)

<style>
.t-rec_pb_90 {
margin-left: 15px;
margin-right: 15px;
}
</style>


Код для растягивания таблицы на 100% ширины экрана

<style>
#rec1184915741 .t-col_12 {
max-width: 100% !important;
width: 100%;
}

#rec1184915741 .t-container {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 100%;
padding: 0;
}

#rec1184915741 .t431 {
padding-right: 35px;
}
</style>


Код для выключки текста на всю ширину фрейма

<style>
.text {
text-align: justify !important;
}
</style>


Код для управления Z-index

<style>
#rec1185734126
{
position: relative;
Z-index: 900 !important;
}
</style>



Код для блока магазина. Управление шириной контейнера (на 100% или в пикселях), оступами между карточками, количеством карточек и оступами по краям экрана

<style>
.t776__parent {
display: table;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 2560px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 10px;
}

.t776__separator {
display: none;
}

.t-col_4 {
max-width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}

.t776 {
padding: 20px !important;
}
</style>


Код для высоты линии в 1px
<style>
.height {
height: 0.5px !important;
}
</style>


Код для ширины линии в 1px
<style>
.width {
width: 0.5px !important;
}
</style>

Код для врещения картинки вокруг своей оси

<style>
.circle{
width: 100px;
height: 100px;
background-color: #000;
border-radius:100%;
animation: rotate 5s linear infinite;
}

@keyframes rotate {
100%{
transform:rotateY(360deg)
}
}
</style>


Код для управления z-index

<style>
#rec1251394551, #rec1251434071, #rec1251464466
{
position: relative;
Z-index: 90 !important;
}
</style>


Код для инверсии

<style>
.mix {
mix-blend-mode: difference;
}
</style>


Код для скрытие элемента за шейпом (анимация заголовков)

<style>
.sbsmodificator {
overflow:hidden!important;
}
</style>


Суфлер

<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js'></script>
<script>
$('.highlight-v1 .tn-atom').addClass('text-highlight-v1');
// const lenis = new Lenis({
// duration: 1.2,
// easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
// });

function raf(time) {
lenis.raf(time);
ScrollTrigger.update();
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
let paragraphs = [...document.querySelectorAll('.text-highlight-v1')];
let spans = [];

paragraphs.forEach(paragraph => {
let htmlString = '';
let childNodes = paragraph.childNodes;
for (let i = 0; i < childNodes.length; i++) {
let node = childNodes[i];
if (node.nodeType === Node.TEXT_NODE) {
htmlString += node.textContent.split('').map(char => `<span>${char}</span>`).join('');
} else if (node.nodeName === 'BR') {
htmlString += '<br>';
}
}
paragraph.innerHTML = htmlString;
})

spans = [...document.querySelectorAll('.text-highlight-v1 span')];

function revealSpans() {
for (let i = 0; i < spans.length; i++) {
let rect = spans[i].parentElement.getBoundingClientRect();
let { left, top } = spans[i].getBoundingClientRect();
top = top - (window.innerHeight * 0.1) - 700;
let opacityValue = 0.5 - ((top * 0.01) + (left * 0.001)) < 0.1 ? 0.1 : 0.5 - ((top * 0.01) + (left * 0.001)).toFixed(3);
opacityValue = opacityValue > 1 ? 1 : opacityValue.toFixed(3);
spans[i].style.opacity = opacityValue;
}
}

window.addEventListener('scroll', () => {
revealSpans()
})
revealSpans()

</script>


Анимация подчеркивания текста

<style>
:root {
--UnderlineColor: #000; /*цвет подчеркивания*/
--UnderlineHeight: 1px; /*размер подчеркивания*/
--UnderlinePadding: 1px; /*отступ от текста*/
}

@keyframes link-line {
0% {
transform: translateX(0%);
}

100% {
transform: translateX(200%);
}
}

.link-underline .tn-atom {
position: relative;
padding-bottom: var(--UnderlinePadding);
overflow: hidden;

.underline-line {
position: absolute;
bottom: 0;
width: 100%;
display: block;
height: var(--UnderlineHeight);
background: var(--UnderlineColor);

&:before {
content: '';
position: absolute;
bottom: 0px;
left: 0;
display: block;
width: 100%;
height: var(--UnderlineHeight);
background: var(--UnderlineColor);
transform: translateX(-200%);
}
}

&:hover {
cursor: pointer;

.underline-line {
animation: link-line 0.7s cubic-bezier(.52,.04,.28,.97);
}
}
}
</style>

<script>
var linkunderline = document.querySelectorAll('.link-underline .tn-atom');
linkunderline.forEach(function(element) {
var linkLine = document.createElement('span');
linkLine.className = 'underline-line';
element.appendChild(linkLine);
});
</script>

1) Код суфлёра (класс для элемента highlight-v1

<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script> <script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script> <script src='https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js'></script> <script> $('.highlight-v1 .tn-atom').addClass('text-highlight-v1'); // const lenis = new Lenis({ // duration: 1.2, // easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) // }); function raf(time) { lenis.raf(time); ScrollTrigger.update(); requestAnimationFrame(raf); } requestAnimationFrame(raf); let paragraphs = [...document.querySelectorAll('.text-highlight-v1')]; let spans = []; paragraphs.forEach(paragraph => { let htmlString = ''; let childNodes = paragraph.childNodes; for (let i = 0; i < childNodes.length; i++) { let node = childNodes[i]; if (node.nodeType === Node.TEXT_NODE) { htmlString += node.textContent.split('').map(char => <span>${char}</span>).join(''); } else if (node.nodeName === 'BR') { htmlString += '<br>'; } } paragraph.innerHTML = htmlString; }) spans = [...document.querySelectorAll('.text-highlight-v1 span')]; function revealSpans() { for (let i = 0; i < spans.length; i++) { let rect = spans[i].parentElement.getBoundingClientRect(); let { left, top } = spans[i].getBoundingClientRect(); top = top - (window.innerHeight * 0.1) - 700; let opacityValue = 0.5 - ((top * 0.01) + (left * 0.001)) < 0.1 ? 0.1 : 0.5 - ((top * 0.01) + (left * 0.001)).toFixed(3); opacityValue = opacityValue > 1 ? 1 : opacityValue.toFixed(3); spans[i].style.opacity = opacityValue; } } window.addEventListener('scroll', () => { revealSpans() }) revealSpans() </script>