티스토리 꾸미기 :: 블로그홈 상단 이미지 물결 효과

≣ 목차

 

 

 

서칭을 하다가 재미있어 보이는 효과가 있어 포스팅을 보러 오시는 분들께 뭔가 이목을 끌 수 있겠다 싶어 퍼오게 되었으니 같이 한번 보시죠.

 

 

본문 상단 글제목 물결 효과 만들기

 

 

물결효과 HTML 수정

 

관리자 홈 > html 편집 > html 탭으로 가서 <div class="main-slider">> 를 검색하여 줍니다.

 

<div class="main-slider">

 

찾은 부분에서

<div class="inner"> 가 보일텐데 바로 윗 줄에 커서를 놓고 엔터를 한번 치신 다음 아래 코드를 붙여넣기 해줍니다.

 

<!-- 물결 -->
<svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none"><defs>
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path></defs>
<g class="wave1"><use xlink:href="#wave-path" x="50" y="3" fill="rgba(32,32,32, .1)"></use></g>
<g class="wave2"><use xlink:href="#wave-path" x="50" y="0" fill="rgba(32,32,32, .2)"></use></g>
<g class="wave3"><use xlink:href="#wave-path" x="50" y="9" fill="#202020"></use></g></svg>
<!-- 물결 END -->

 

 

 

 

변경 된 코드를 적용해줍니다.

 

물결효과 CSS 코드 추가

CSS 탭으로 이동 후 아래 코드를 맨 하단에 붙여 넣기 해줍니다.

.hero-waves {
	/*웨이브*/
	display: block;
	width: 100%;
	height: 60px;
	position: absolute;
	right: 0;
	top: 270px; /* 물결 높이 위치 */
	z-index: 10;
}
@media screen and (min-width: 344px) {
  .hero-waves {
    height: 70px; /* 특정 화면 크기 이상에서만 높이를 70px로 재정의 */
  }
}
.wave1 use {
	fill: rgba(253, 253, 255, 0.2);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave2 use {
	fill: rgba(253, 253, 255, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave3 use {
	fill: rgb(253, 253, 255, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave1 use {
	fill: rgba(49, 52, 60, 0.3);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave2 use {
	fill: rgba(49, 52, 60, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave3 use {
	fill: rgba(49, 52, 60, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
@media screen and (min-width: 344px) {
  .hero-waves {
    height: 70px; /* 특정 화면 크기 이상에서만 높이를 70px로 재정의 */
  }
}
.wave1 use {
	fill: rgba(253, 253, 255, 0.2);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave2 use {
	fill: rgba(253, 253, 255, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.wave3 use {
	fill: rgb(253, 253, 255, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave1 use {
	fill: rgba(49, 52, 60, 0.3);
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave2 use {
	fill: rgba(49, 52, 60, 0.5);
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
.dark .wave3 use {
	fill: rgba(49, 52, 60, 1);
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}
@-webkit-keyframes move-forever1 {
	0% {
		transform: translate(85px, 0%);
	}
	100% {
		transform: translate(-90px, 0%);
	}
}
@keyframes move-forever1 {
	0% {
		transform: translate(85px, 0%);
	}
	100% {
		transform: translate(-90px, 0%);
	}
}
@-webkit-keyframes move-forever2 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@keyframes move-forever2 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@-webkit-keyframes move-forever3 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
@keyframes move-forever3 {
	0% {
		transform: translate(-90px, 0%);
	}
	100% {
		transform: translate(85px, 0%);
	}
}
/* 물결 END */

 

 

 

물결의 위치는 .hero-waves 에서 top: 270px 부분에서 변경해주면 됩니다.

 

마무리

사용하는 스킨에 따라 본문의 위치가 틀려질 수 있으므로, 위치 조정을 해주면서 사용하면 되겠습니다.

 

2025.08.26 - [일상/티스토리 꾸미기] - 티스토리 꾸미기 :: 본문 상단 이미지 교체 및 물결 효과