Креативный эффект для секции с текстом

Пример:

HTML:

<div class="txt-section">
	<svg>
		<defs>
			<clipPath id="clip1">
				<text y="40%" x="50%" text-anchor="middle">
					Саратов
					<tspan y="75%" x="50%">Столица Поволжья!</tspan>
				</text>
			</clipPath>
		</defs>		
		<!-- Фоновый текст -->
		<text y="40%" x="50%" fill="#337AB7" text-anchor="middle">
			Саратов
			<tspan y="75%" x="50%">Столица Поволжья!</tspan>
		</text>   		
		<!-- Анимированные круги для фона -->
		<g class="xx">
			<g class="yy">    
				<circle cx="0" cy="0" r="15%" stroke="#337AB7" 
				stroke-width="3" fill="rgba(0,0,0,.3)"/>   
			</g>
		</g>		
		<!-- Обрезанный слой с анимированным кругом -->
		<g clip-path="url(#clip1)">
			<g class="xx">
				<g class="yy">
					<circle cx="0" cy="0" r="15%" stroke="#337AB7" 
					stroke-width="3" fill="#BFE2FF"/>
				</g>
			</g> 
		</g>
	</svg>
</div>

<svg>

<defs>

Саратов

<tspan y="75%" x="50%">Столица Поволжья!</tspan>

</text>

</clipPath>

</defs>

Саратов

<tspan y="75%" x="50%">Столица Поволжья!</tspan>

</text>

<circle cx="0" cy="0" r="15%" stroke="#337AB7"

stroke-width="3" fill="rgba(0,0,0,.3)"/>

</g>

<circle cx="0" cy="0" r="15%" stroke="#337AB7"

stroke-width="3" fill="#BFE2FF"/>

</g>

</svg>

</div>

CSS:

.txt-section {
	height: 60vh;
	box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 28px 30px rgba(0,0,0,0.1);
	overflow: hidden;
	background: #f0f0f0;
	transform: translateZ(0);
	border-radius: 10px;
	margin: 20px 0;
}       
.txt-section svg {
	background-image: url(background.jpg);
	background-size: cover;
	background-position: center;
	height: 100%;
	width: 100%;
}       
.txt-section text {
	font-size: clamp(30px, 5vw, 100px);
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);    
}       
.txt-section tspan {
	font-size: clamp(20px, 4vw, 80px);
}   
.xx {
	animation-name: xMove;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}        
.yy {
	animation-name: yMove;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}       
@keyframes xMove {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}       
@keyframes yMove {
	from { transform: translateY(0); }
	to { transform: translateY(100%); }
}
.txt-section svg {
	will-change: transform;
	backface-visibility: hidden;
}

.txt-section {

height: 60vh;

box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 28px 30px rgba(0,0,0,0.1);

overflow: hidden;

background: #f0f0f0;

transform: translateZ(0);

border-radius: 10px;

margin: 20px 0;

}

.txt-section svg {

background-image: url(background.jpg);

background-size: cover;

background-position: center;

height: 100%;

width: 100%;

}

.txt-section text {

font-size: clamp(30px, 5vw, 100px);

font-weight: bold;

text-transform: uppercase;

text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);

}

.txt-section tspan {

font-size: clamp(20px, 4vw, 80px);

}

.xx {

animation-name: xMove;

animation-duration: 1.5s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: linear;

}

.yy {

animation-name: yMove;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: linear;

}

@keyframes xMove {

from { transform: translateX(0); }

to { transform: translateX(100%); }

}

@keyframes yMove {

from { transform: translateY(0); }

to { transform: translateY(100%); }

}

.txt-section svg {

will-change: transform;

backface-visibility: hidden;

}

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: