Совет CSS и JS

Этот вариант теперь работает во всех браузерах и поддерживает настройки движения через CSS и JS

Размытый текст при выходе

? 



@ keyframes fade {

  to { opacity: 0; filter: blur(2rem); }

}

h2 {

  animation: fade;

  animation-timeline: view();

  animation-range: cover 40% cover 85

%;
}

Как насчет круглой формы на прокрутке? Это анимированный клип-па

тч



@ keyframes unclip {

  to { clip-path: ellipse(220% 200% at 50% 175%);

}
}

Создайте клип-пат с большим размером, смещенный по вертикали. При прокрутке анимируйте е

го



.content {

  clip-path: ellipse(220% 200% at 50% 300%);

  animation: unclip both linear;

  animation-timeline: --article;

  animation-range: entr

y;
}

Вторая секция сочетает в себе открепление и одновременное уменьшение масштаба изображен

ия



@ keyframes scale-down {

  0% { scale: 5; }

}

img {

  animation: scale-down;

  animation-timeline: --article; 

  animation-range: entr

y;
}