같은 position에 있는 (꼭 같이 있을 필요는 되지만) 레이어를 투명도를 이용하여 부드럽게 교차시켜 줍니다.
소스가 상당히 노가다적입니다;
또 나름대로 주석을 달아놓긴 했는데, 말을 이해하기는 힘드실겁니다-_-;;
고쳐야 할 부분 알려주시면 감사하고, 필요하신 분들은 유용하게 쓰시기 바랍니다~
<![CDATA[<html>
<head>
<title>반투명하게 레이어 교차하기</title>
<pre class="scripts" lanugage="JavaScript">
var name = "layer"; //레이어의 이름.
var space = 1; //반투명 처리 간격.
var time1 = 0.1; //반투명도를 한간격 변경할 시간입니다. (초 단위)
var time2 = 2; //교차가 완료된 후 대기할 시간입니다. (초 단위)
var tran=1; //반투명도를 계산할 변수. (수정하는 것 아님)
var tranlr=1; //레이어1의 번호. (수정하는 것 아님)
function transparent() {
if(!document.getElementById(name+"1")) return; //레이어1이 없다면 그냥 함수를 끝낸다.
var tranlr2=tranlr+1; //교차할 그 다음의 레이어 (레이어2)
if(!document.getElementById(name+tranlr2)) tranlr2=1; //레이어2가 없다면 처음레이어로 돌아간다.
var preview = document.getElementById(name+tranlr);
var preview2 = document.getElementById(name+tranlr2);
if(preview2.style.opacity!="1") { //레이어2가 아직 반투명할 경우
preview2.style.display="block";
/* 여기부터는 Firefox의 방식 - style의 opacity가 1이면 불투명, 0이면 투명 */
var a=Math.round((tran - space*0.1)*10)/10; //레이어1의 변경될 투명도
var b=Math.round(Math.abs(a-1)*10)/10; //레이어2의 변경될 투명도. a에서 1을 뺀다음, 절대값.
preview.style.opacity=a;
preview2.style.opacity=b;
/* 여기부터는 IE의 방식 - filter:alpha가 opacity=100이면 불투명, 0이면 투명 */
a=tran*100 - space*10; //레이어1의 변경될 투명도
b=Math.abs(a - 100); //레이어2의 변경될 투명도. a에서 100을 뺀다음, 절대값.
preview.style.filter="alpha(opacity="+a+")";
preview2.style.filter="alpha(opacity="+b+")";
tran=tran - space*0.1;
setTimeout("transparent();", time1*1000);
} else { //레이어2가 완전히 보일 경우
preview.style.display="none";
tranlr++;
if(!document.getElementById(name+tranlr)) tranlr=1;
tran=1;
setTimeout("transparent();", time2*1000);
}
}
</pre>
<style type="text/css">.another_category {
border: 1px solid #E5E5E5;
padding: 10px 10px 5px;
margin: 10px 0;
clear: both;
}
.another_category h4 {
font-size: 12px !important;
margin: 0 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding: 2px 0 6px !important;
}
.another_category h4 a {
font-weight: bold !important;
}
.another_category table {
table-layout: fixed;
border-collapse: collapse;
width: 100% !important;
margin-top: 10px !important;
}
* html .another_category table {
width: auto !important;
}
*:first-child + html .another_category table {
width: auto !important;
}
.another_category th, .another_category td {
padding: 0 0 4px !important;
}
.another_category th {
text-align: left;
font-size: 12px !important;
font-weight: normal;
word-break: break-all;
overflow: hidden;
line-height: 1.5;
}
.another_category td {
text-align: right;
width: 80px;
font-size: 11px;
}
.another_category th a {
font-weight: normal;
text-decoration: none;
border: none !important;
}
.another_category th a.current {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px solid !important;
}
.another_category th span {
font-weight: normal;
text-decoration: none;
font: 10px Tahoma, Sans-serif;
border: none !important;
}
.another_category_color_gray, .another_category_color_gray h4 {
border-color: #E5E5E5 !important;
}
.another_category_color_gray * {
color: #909090 !important;
}
.another_category_color_gray th a.current {
border-color: #909090 !important;
}
.another_category_color_gray h4, .another_category_color_gray h4 a {
color: #737373 !important;
}
.another_category_color_red, .another_category_color_red h4 {
border-color: #F6D4D3 !important;
}
.another_category_color_red * {
color: #E86869 !important;
}
.another_category_color_red th a.current {
border-color: #E86869 !important;
}
.another_category_color_red h4, .another_category_color_red h4 a {
color: #ED0908 !important;
}
.another_category_color_green, .another_category_color_green h4 {
border-color: #CCE7C8 !important;
}
.another_category_color_green * {
color: #64C05B !important;
}
.another_category_color_green th a.current {
border-color: #64C05B !important;
}
.another_category_color_green h4, .another_category_color_green h4 a {
color: #3EA731 !important;
}
.another_category_color_blue, .another_category_color_blue h4 {
border-color: #C8DAF2 !important;
}
.another_category_color_blue * {
color: #477FD6 !important;
}
.another_category_color_blue th a.current {
border-color: #477FD6 !important;
}
.another_category_color_blue h4, .another_category_color_blue h4 a {
color: #1960CA !important;
}
.another_category_color_violet, .another_category_color_violet h4 {
border-color: #E1CEEC !important;
}
.another_category_color_violet * {
color: #9D64C5 !important;
}
.another_category_color_violet th a.current {
border-color: #9D64C5 !important;
}
.another_category_color_violet h4, .another_category_color_violet h4 a {
color: #7E2CB5 !important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/style/revenue.css"/>
<link rel="canonical" href="https://tipinfo.tistory.com/5644"/>
<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://tipinfo.tistory.com/5644","name":null},"url":"https://tipinfo.tistory.com/5644","headline":"레이어 여러개 반투명하게 교차하기","description":"같은 position에 있는 (꼭 같이 있을 필요는 되지만) 레이어를 투명도를 이용하여 부드럽게 교차시켜 줍니다. 소스가 상당히 노가다적입니다; 또 나름대로 주석을 달아놓긴 했는데, 말을 이해하기는 힘드실겁니다-_-;; 고쳐야 할 부분 알려주시면 감사하고, 필요하신 분들은 유용하게 쓰시기 바랍니다~ 안녕하세요. 미니위니 여러분! 반가워요~ 사랑합니다! 알라뷰~♡ //레이어 교차 함수 시작! document.getElementById(name+"1").style.opacity=1; document.getElementById(name+"1").style.filter="alpha(opacity=100)"; setTimeout("transparent();",time2*1000);","author":{"@type":"Person","name":"tipInfo","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2007-10-13T13:46:11+09:00","dateModified":"2007-10-13T13:46:11+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/script/comment.js" defer=""></script>
</head>
<body>
<div id="layer1" style="display:block;position:absolute;">안녕하세요. 미니위니 여러분!</div>
<div id="layer2" style="display:none;position:absolute;">반가워요~</div>
<div id="layer3" style="display:none;position:absolute;">사랑합니다!</div>
<div id="layer4" style="display:none;position:absolute;">알라뷰~♡</div>
<pre class="scripts" language="JavaScript">
//레이어 교차 함수 시작!
document.getElementById(name+"1").style.opacity=1;
document.getElementById(name+"1").style.filter="alpha(opacity=100)";
setTimeout("transparent();",time2*1000);
</pre>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/script/shortcut.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>
<script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"280080-5644","customProps":{"userId":"0","blogId":"280080","entryId":"5644","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"5644","entryTitle":"레이어 여러개 반투명하게 교차하기","entryType":"POST","categoryName":"인터넷정보","categoryId":"190224","serviceCategoryName":null,"serviceCategoryId":null,"author":"102315","authorNickname":"알 수 없는 사용자","blogNmae":"INFOTIP","image":"","plink":"/5644","tags":["레이어"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script>
<script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script>
</body>
</html>
]]>