Как сделать параллакс показа текста в css?
Нужно создать такой параллакс эффект
Не могу понять как создать такой параллакс. Нужно чтобы при скроле проявлялся текст.
Ответы (1 шт):
Автор решения: Alexandr_TT
→ Ссылка
Решить задачу можно с помощью анимации маски SVG.
- Нижний слой будет красный прямоугольник с текстом.
- Верхний слой будет фиолетовый прямоугольник, к которому применена маска с набором окружностей, у которых
fill="black"При закраске чёрным цветом маска прорезает верхний слой и становится виден нижний красный слой сквозь эти отверстия.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100" >
<!-- Маска -->
<mask id="msk">
<rect width="400" height="100" fill="white" />
<g fill="black">
<circle cx="0" cy="5" r="30" />
<circle cx="100" cy="90" r="30" />
<circle cx="200" cy="-25" r="80" />
<circle cx="320" cy="50" r="32" />
<circle cx="405" cy="90" r="30" />
</g>
</mask>
<!-- Красный фон с текстом -->
<rect width="400" height="100" fill="#FE5F55" />
<text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
<!-- Синий маскирующий прямоугольник -->
<rect width="400" height="100" mask="url(#msk)" fill="#8E5DF8" />
</svg> Теперь можно сделать параллакс
Для этого нужно просто двигать маску:
#1. Горизонтальный параллакс
Начало анимации после клика
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100" style="border:1px solid gray;" >
<mask id="msk">
<g>
<rect width="400" height="100" fill="white" />
<g fill="black">
<circle cx="0" cy="5" r="30" />
<circle cx="100" cy="90" r="30" />
<circle cx="200" cy="-25" r="80" />
<circle cx="320" cy="50" r="32" />
<circle cx="405" cy="90" r="30" />
</g>
<!-- Анимация движения маски -->
<animateTransform
attributeName="transform"
type="translate"
begin="svg1.click"
dur="4s"
values="0 0;400 0"
fill="freeze"
restart="whenNotActive" />
</g>
</mask>
<!-- Красный фон с текстом -->
<rect width="400" height="100" fill="#FE5F55" />
<text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
<!-- Синий маскирующий прямоугольник -->
<rect width="400" height="100" mask="url(#msk)" fill="#8E5DF8" >
</rect>
</svg> #2. Вертикальный параллаксм
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100" style="border:1px solid gray;" >
<mask id="msk">
<g>
<rect width="400" height="100" fill="white" />
<g fill="black">
<circle cx="0" cy="5" r="30" />
<circle cx="100" cy="90" r="30" />
<circle cx="200" cy="-25" r="80" />
<circle cx="320" cy="50" r="32" />
<circle cx="405" cy="90" r="30" />
</g>
<!-- Анимация движения маски -->
<animateTransform
attributeName="transform"
type="translate"
begin="svg1.click"
dur="4s"
values="0 0;0 100"
fill="freeze"
restart="whenNotActive" />
</g>
</mask>
<!-- Красный фон с текстом -->
<rect width="400" height="100" fill="#FE5F55" />
<text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
<!-- Синий маскирующий прямоугольник -->
<rect width="400" height="100" mask="url(#msk)" fill="#8E5DF8" >
</rect>
</svg> #3. Вертикальный параллакс с возвратом
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100" style="border:1px solid gray;" >
<mask id="msk">
<g>
<rect width="400" height="100" fill="white" />
<g fill="black">
<circle cx="0" cy="5" r="30" />
<circle cx="100" cy="90" r="30" />
<circle cx="200" cy="-25" r="80" />
<circle cx="320" cy="50" r="32" />
<circle cx="405" cy="90" r="30" />
</g>
<!-- Анимация движения маски -->
<animateTransform
attributeName="transform"
type="translate"
begin="svg1.click"
dur="4s"
values="0 0;0 100;0 100;0 0;0 0"
repeatCount="indefinite"
restart="whenNotActive" />
</g>
</mask>
<!-- Красный фон с текстом -->
<rect width="400" height="100" fill="#FE5F55" />
<text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
<!-- Синий маскирующий прямоугольник -->
<rect width="400" height="100" mask="url(#msk)" fill="#8E5DF8" >
</rect>
</svg> Update
Анимация движения текста
В этих примерах маска неподвижна, двигается сам текст
#1. По горизонтали
<!-- Анимация движения текста -->
<animateTransform
attributeName="transform"
type="translate"
begin="svg1.click"
dur="6s"
values="0 0;300 0;0 0"
fill="freeze"
restart="whenNotActive" />
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100" style="border:1px solid gray;" >
<mask id="msk">
<rect width="400" height="100" fill="white" />
<g fill="black">
<circle cx="0" cy="5" r="30" />
<circle cx="100" cy="90" r="30" />
<circle cx="200" cy="-25" r="80" />
<circle cx="320" cy="50" r="32" />
<circle cx="405" cy="90" r="30" />
</g>
</mask>
<!-- Красный фон с текстом -->
<rect width="400" height="100" fill="#FE5F55" />
<text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS
<!-- Анимация движения текста -->
<animateTransform
attributeName="transform"
type="translate"
begin="svg1.click"
dur="6s"
values="0 0;300 0;0 0"
fill="freeze"
restart="whenNotActive" />
</text>
<!-- Синий маскирующий прямоугольник -->
<rect width="400" height="100" mask="url(#msk)" fill="#8E5DF8" >
</rect>
</svg> #2. По вертикали
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="100" viewBox="0 0 400 100" style="border:1px solid gray;" >
<mask id="msk">
<rect width="400" height="100" fill="white" />
<g fill="black">
<circle cx="0" cy="5" r="30" />
<circle cx="100" cy="90" r="30" />
<circle cx="200" cy="-25" r="80" />
<circle cx="320" cy="50" r="32" />
<circle cx="405" cy="90" r="30" />
</g>
</mask>
<!-- Красный фон с текстом -->
<rect width="400" height="100" fill="#FE5F55" />
<text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS
<!-- Анимация движения текста по вертикали -->
<animateTransform
attributeName="transform"
type="translate"
begin="svg1.click"
dur="4s"
values="0 0;0 50;0 -30"
fill="freeze"
restart="whenNotActive" />
</text>
<!-- Синий маскирующий прямоугольник -->
<rect width="400" height="100" mask="url(#msk)" fill="#8E5DF8" >
</rect>
</svg>