Как сделать эффект трещины у текста
1,00
р.
Данный Q-A является продолжением прошлого(стилизация текста SVG).
В этом Q-A(Question-Answer) мы рассмотрим Crack effect, ниже будут приведены примеры этого эффекта, всего их будет 3 штуки.
Первый пример (появление трещины вдоль текста с дальнейшей трансформацией):
Второй пример (верхняя часть текста отламывается и плавно съезжает после взмаха мечом, при том, что сам текст должен находится под наклоном примерно в 1-2deg):
Третий пример (похож на второй, но есть своё отличие, происходит два взмаха вдоль и поперёк текста):
Текст будет реализован на SVG, его размещение через clipPath, а анимация с помощью @keyframes.
P.S. Все примеры срабатывают после клика.
Ответ
Второй пример:
В этом примере используется то же самое позиционирование, только в добавок нужно повернуть rect'ы на 1deg и после клика добавлять transform: translateX(N):
* { margin: 0 padding: 0 }
body { background-color: #000000 display: flex justify-content: center align-items: center flex-direction: column }
svg text { font-family: 'Russo One', sans-serif text-transform: uppercase font-size: 4em pointer-events: none }
svg rect { transform: rotate(-1deg) transition: cubic-bezier(1, 0.3, 0.6, 1) 3.5s }
#top { animation: offsetXF 1s infinite }
#bottom { animation: offsetXT 1s infinite }
@keyframes offsetXF { 50% { transform: translateX(-30px) rotate(-1deg) opacity: 0 } }
@keyframes offsetXT { 50% { transform: translateX(30px) rotate(-1deg) opacity: 0 } } Breaking text <!--Смещение по оси X-->
Осталось сделать polygon, который будет имитировать взмах мечом(или катаной:D), а в финальной версии этого примера мы будем смещать его также по оси X, примерно на 700-800px:
Финальная версия. После клика мы меняем местоположение polygon, при этом добавляется класс для #top, из-за чего и происходит смещение верхней части текста, также видна задержка после взмаха, так как у rect добавлен transition-delay:
function crack() { var rect = document.getElementById("top") var polygon = document.getElementById("sword") rect.classList.add("active") polygon.classList.add("_activate") } * { margin: 0 padding: 0 }
body { background-color: #000000 display: flex justify-content: center align-items: center flex-direction: column }
svg text { font-family: 'Russo One', sans-serif text-transform: uppercase font-size: 4em pointer-events: none }
svg rect { transform: rotate(-1deg) transition: cubic-bezier(1, 0.3, 0.6, 1) 3.5s transition-delay: 1s }
#top.active { transform: translateX(-30px) rotate(-1deg) opacity: 0 }
#sword { transform: rotate(-1deg) translateX(-100px) }
#sword._activate { animation: attack 0.4s 1 }
@keyframes attack { to { transform: rotate(-1deg) translateX(750px) } } Breaking text
В этом Q-A(Question-Answer) мы рассмотрим Crack effect, ниже будут приведены примеры этого эффекта, всего их будет 3 штуки.
Первый пример (появление трещины вдоль текста с дальнейшей трансформацией):
Второй пример (верхняя часть текста отламывается и плавно съезжает после взмаха мечом, при том, что сам текст должен находится под наклоном примерно в 1-2deg):
Третий пример (похож на второй, но есть своё отличие, происходит два взмаха вдоль и поперёк текста):
Текст будет реализован на SVG, его размещение через clipPath, а анимация с помощью @keyframes.
P.S. Все примеры срабатывают после клика.
Ответ
Второй пример:
В этом примере используется то же самое позиционирование, только в добавок нужно повернуть rect'ы на 1deg и после клика добавлять transform: translateX(N):
* { margin: 0 padding: 0 }
body { background-color: #000000 display: flex justify-content: center align-items: center flex-direction: column }
svg text { font-family: 'Russo One', sans-serif text-transform: uppercase font-size: 4em pointer-events: none }
svg rect { transform: rotate(-1deg) transition: cubic-bezier(1, 0.3, 0.6, 1) 3.5s }
#top { animation: offsetXF 1s infinite }
#bottom { animation: offsetXT 1s infinite }
@keyframes offsetXF { 50% { transform: translateX(-30px) rotate(-1deg) opacity: 0 } }
@keyframes offsetXT { 50% { transform: translateX(30px) rotate(-1deg) opacity: 0 } } Breaking text <!--Смещение по оси X-->
Осталось сделать polygon, который будет имитировать взмах мечом(или катаной:D), а в финальной версии этого примера мы будем смещать его также по оси X, примерно на 700-800px:
Финальная версия. После клика мы меняем местоположение polygon, при этом добавляется класс для #top, из-за чего и происходит смещение верхней части текста, также видна задержка после взмаха, так как у rect добавлен transition-delay:
function crack() { var rect = document.getElementById("top") var polygon = document.getElementById("sword") rect.classList.add("active") polygon.classList.add("_activate") } * { margin: 0 padding: 0 }
body { background-color: #000000 display: flex justify-content: center align-items: center flex-direction: column }
svg text { font-family: 'Russo One', sans-serif text-transform: uppercase font-size: 4em pointer-events: none }
svg rect { transform: rotate(-1deg) transition: cubic-bezier(1, 0.3, 0.6, 1) 3.5s transition-delay: 1s }
#top.active { transform: translateX(-30px) rotate(-1deg) opacity: 0 }
#sword { transform: rotate(-1deg) translateX(-100px) }
#sword._activate { animation: attack 0.4s 1 }
@keyframes attack { to { transform: rotate(-1deg) translateX(750px) } } Breaking text
