Наклон текста при скроллинге

Question

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

<section>
  <h1>Заголовок</h1>
  <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
</section>

Answer 1

Вот вариант, только не совсем понятно для чего такое нужно.

const skewList = document.querySelectorAll('[data-scroll="skew"]');
const onWheel = event => {
  const distanse = event.deltaY;
  const direction = 0 < distanse ? -1 : 1;
  const value = `skewY(${(distanse + direction) * .05}deg)`;
  for (let element of skewList){element.style.transform = value;}
};
window.addEventListener('wheel', onWheel);

[data-scroll="skew"] {will-change: transform;}
body {background-color: royalblue; color: white;}
h1, section {transition: all 0.2s; max-width: 500px; margin: 0 auto;}

<h1 data-scroll="skew">Заголовок</h1>
<section data-scroll="skew">
  <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
    <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
    <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
    <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
</section>

Ещё вариант:

window.onload = function() {
  const skewList = document.querySelector('section');
  let currentPixel = window.pageYOffset;
  const looper = function() {
    const newPixel = window.pageYOffset;
    const diff = newPixel - currentPixel;
    const top = 10;
    const intensity = 0.1;
    const speed = top * ((2 / (1 + Math.exp(-1 * intensity * diff))) - 1);
    skewList.style.transform = `skewY(${speed}deg)`;
    currentPixel = newPixel;
    requestAnimationFrame(looper);
  }
  looper();
};

body {background-color: royalblue; color: white;}
section {transition: transform 0.2s; will-change: transform; max-width: 500px; margin: 0 auto;}

<section>
  <h1>Заголовок</h1>
  <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
    <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
    <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
    <h2>Название</h2>
  <p>Некоторые мастера каллиграфии считают, что курсивное письмо достигло своего расцвета в 16 веке в стиле, известном как канцелярский курсив. Эти каллиграфические начертания букв с тонкими и толстыми штрихами и острыми смотрящими вверх углами выводились ширококонечным пером. Канцелярский курсив долгое время считался элементом роскоши, который позволял выразить радость в свадебном приглашении или трогательность в сборнике стихотворений.</p>
</section>

БЛОГ НА HUSL

Наклон текста при скроллинге

Ответы (1 шт):