아임웹 텍스트 불투명도 조절하기 | 스크롤 시 선명해지는 텍스트 효과 코드

 

 

아임웹으로 홈페이지 제작을 하다 보면 특정 문구를 처음부터 너무 강하게 보여주기보다,

은은하게 보이다가 스크롤 시 자연스럽게 강조되는 효과가 필요할 때가 있습니다.

 

이번 글에서는 아임웹 텍스트 위젯에 불투명도를 적용하고, 스크롤을 내리면 텍스트가 선명해지는 커스텀 코드를 소개합니다.

HTML/CSS/JS를 깊게 몰라도 위젯 ID만 변경하면 바로 적용할 수 있는 간단한 코드입니다.

 

실제 구현 URL

믓아 스튜디오

---

 

이 코드로 구현되는 기능 설명

이 코드는 아임웹 텍스트 위젯의 투명도를 조절하는 기능입니다.

처음에는 텍스트가 흐리게 보이고, 사용자가 스크롤을 일정 거리 이상 내리면 텍스트가 선명하게 바뀝니다.

즉, 단순히 글자를 보여주는 것이 아니라 스크롤 흐름에 맞춰 자연스럽게 시선을 끌 수 있는 효과입니다.

---

 

사용하면 좋은 상황

이 코드는 이런 상황에 사용하면 좋습니다.
 - 메인 비주얼 아래 핵심 문구를 강조하고 싶을 때
 - 브랜드 슬로건을 은은하게 보여주고 싶을 때
 - 스크롤 인터랙션이 있는 고급스러운 웹디자인을 만들고 싶을 때
 - 아임웹 홈페이지 제작 시 단조로운 텍스트 구성을 개선하고 싶을 때
 - 특정 문구를 처음엔 약하게, 이후 강하게 노출하고 싶을 때
 - 특히 포트폴리오 사이트, 브랜드 소개 페이지, 랜딩페이지에 잘 어울립니다.

---

 

적용 방법

아임웹 관리자에서 적용하고 싶은 텍스트 위젯의 ID를 확인합니다.

예시 위젯 ID는 아래와 같습니다.

#w202606042246a87b59f2f

그다음 아임웹 디자인 모드에서 코드 위젯을 추가한 뒤, 아래 전체 코드를 붙여 넣으면 됩니다.

다른 텍스트 위젯에 적용하려면 코드 안의 위젯 ID만 본인 사이트에 맞게 변경하면 됩니다.

---

 

전체 코드

<style>
/* =========================
   아임웹 텍스트 불투명도 효과
   스크롤 시 텍스트 선명하게 변경
========================= */

#w202606042246a87b59f2f{
    opacity:.2;
    transition:all .6s ease;
}

#w202606042246a87b59f2f.active{
    opacity:1;
}
</style>

<script>
$(window).on('scroll',function(){

  var target = $('#w202606042246a87b59f2f');

  if($(window).scrollTop() > 200){
    target.addClass('active');
  }else{
    target.removeClass('active');
  }

});
</script>

---

 

코드 수정 포인트

1. 불투명도 조절

opacity:.2;

처음 보이는 텍스트의 흐림 정도입니다.

숫자가 낮을수록 더 흐리게 보입니다.

예를 들어 조금 더 잘 보이게 하고 싶다면 아래처럼 수정할 수 있습니다.

opacity:.4;

 

2. 선명해지는 속도 조절

transition:all .6s ease;

텍스트가 자연스럽게 선명해지는 속도입니다.

더 부드럽고 느리게 보이게 하고 싶다면 아래처럼 변경할 수 있습니다.

transition:all 1s ease;

 

3. 스크롤 기준 위치 변경

if($(window).scrollTop() > 200)

스크롤을 200px 이상 내렸을 때 텍스트가 선명해집니다.

더 빨리 반응하게 하려면 숫자를 낮추고, 더 늦게 반응하게 하려면 숫자를 높이면 됩니다.

예시:

if($(window).scrollTop() > 400)

---

 

자주 발생하는 오류와 해결 방법

1. 효과가 적용되지 않을 때

가장 먼저 위젯 ID가 맞는지 확인해야 합니다.

아임웹에서는 위젯마다 ID가 다르기 때문에, 복사한 코드의 ID와 실제 적용할 텍스트 위젯 ID가 다르면 효과가 적용되지 않습니다.

텍스트가 처음부터 너무 흐리게 보일 때

opacity:.2;

이 값을 조금 높여주세요.

추천 값은 .3 또는 .4입니다.

 

2. 스크롤해도 선명해지지 않을 때

코드 위젯이 해당 페이지에 정상적으로 들어갔는지 확인해야 합니다.

또한 아임웹에서 jQuery가 정상적으로 로드되는 환경인지도 확인해 주세요.

 

3. 모바일에서 효과가 어색할 때

모바일에서는 스크롤 거리가 짧기 때문에 기준 값을 낮추는 것이 좋습니다.

if($(window).scrollTop() > 100)

---

 

 

아임웹은 기본 기능만으로도 홈페이지 제작이 가능하지만,

간단한 HTML/CSS/JS 커스텀 코드를 추가하면 훨씬 더 고급스러운 웹디자인을 만들 수 있습니다.

 

이번 텍스트 불투명도 효과는 코드가 짧고 적용 방법도 쉬워서 초보자도 부담 없이 사용할 수 있습니다.

브랜드 문구나 메인 카피를 조금 더 감각적으로 보여주고 싶다면 한 번 적용해 보세요.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

섹션 올리기로 고급스러운 효과 제작하기

https://meztahstudio.tistory.com/38