[기타] '깜율'님이 문의하신 스크립트 입니다.

인벤 스크립트에 관심을 가져주셔서 감사합니다.

요청하신 내용, 버튼과 화면에 애니메이션 효과가 추가된 소스를 답글로 달아 드립니다.

이외에 추가로
- 탭 id로 한글이 쓰여진 부분은 작동의 이상을 일으킬수 있어, 영문으로 수정하였습니다.
- 받은 인장들의 상자 가로폭이 인장을 벗어나 있는 것을 확인하여 width(가로폭)를 추가하였습니다.

전환 효과는 기본적으로 transition:초s 를 사용해, 추가할 수 있습니다. 색상, 길이, 투명도 등이 변경될 때 애니메이션 효과를 줄 수 있습니다. 뒤에 붙는 초를 조절하여 애니메이션의 속도를 조절하실 수도 있습니다.

혹시 원하시던 작동방식과 다르거나, 이외에도 궁금한 내용이 있으시면 언제든지 인벤 스크립트 게시판에 글 남겨주세요.

감사합니다.


■ HTML을 누른 상태에서 붙여넣어 주세요.

---

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div style='background: url("https://upload2.inven.co.kr/upload/2016/05/18/bbs/i13055244628.png"); font-size: 11px;'>

<div style='padding: 4px 6px; background-image: url("https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png");'>
<div style='background: url("http://www.randomurl.ze.am/e/jd.php?d=2012-10-28 08:47:18&amp;c=fbb2ab#.png"); height: 20px;'>
</div></div>

<div style='padding: 0px; border-radius: 6px; border: 1px solid rgb(251, 178, 171); border-image: none; color: rgb(251, 178, 171); overflow: hidden; font-size: 11px; margin-top: 16px; margin-left: 6px; display: inline-block; -ms-zoom: 1; background-image: url("https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png");' data-inven-action="last-attack-5,last-attack-10,last-attack-all,search-profile" data-no-tooltip data-inven-result-detail>
<span style="margin: 2px 1px 0px 4px; padding: 0px 2px; width: 130px; height: 17px; color: rgb(251, 178, 171); font-size: 11px; float: left;" data-inven-attr-for="input"></span>
<span style="margin: 0px 0px 0px 1px; padding: 6px 4px 4px; border: 0px currentColor; border-image: none; height: auto; color: white; line-height: 100%; font-size: 11px; float: left; background-color: rgb(251, 178, 171);" data-inven-attr-for="button"></span>
<span style='padding: 4px 6px; border-radius: 6px; border: 1px solid rgb(251, 178, 171); border-image: none; width: 300px; color: rgb(251, 178, 171); font-size: 11px; margin-top: 2px; margin-left: 6px; background-image: url("https://upload2.inven.co.kr/upload/2015/03/02/bbs/i2612834329.png");' data-inven-attr-for="action-result" data-position="out"></span>
</div>

<div style="padding-top: 16px;" data-inven-tabs>

<div style="float: left;">

<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: rgb(251, 178, 171);transition:0.5s;"
data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'},'mma0':{'display':'none','opacity':'0','visibility':'hidden'}}"
data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'},'mma0':{'display':'block','opacity':'1','visibility':'visible'}}" data-inven-tab-for="mma0d">메인</div>

<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: rgb(251, 178, 171);transition:0.5s;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'},'mma1':{'display':'none','opacity':'0','visibility':'hidden'}}"
data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'},'mma1':{'display':'block','opacity':'1','visibility':'visible'}}" data-inven-tab-for="mma1d">받은 인장들</div>

<div style="margin: 6px 0px; padding: 4px 2px; border-radius: 0px 6px 6px 0px; width: 12px; color: white; cursor: pointer; background-color: rgb(251, 178, 171);transition:0.5s;" data-inven-unselected-css="{'_SELF_':{'paddingLeft':'2px'},'mma3':{'display':'none','opacity':'0','visibility':'hidden'}}"
data-inven-selected-css="{'_SELF_':{'paddingLeft':'6px'},'mma3':{'display':'block','opacity':'1','visibility':'visible'}}" data-inven-tab-for="mma3d">게임 기록</div>

<!--새 버튼 추가하는 곳-->
</div>

<span data-inven-tab-id="mma0d"></span>
<span data-inven-tab-id="mma1d"></span>
<span data-inven-tab-id="mma3d"></span>


<div style="padding-bottom: 12px; margin-top: 6px; margin-left: 30px;">

<div style="min-height: 300px;transition:0.5s;visibility: visible; opacity: 1; -webkit-transition: 0.7s;" data-inven-id="mma0">
<!--메인 메뉴 내용-->
<div style='border-radius: 6px; border: 1px solid rgb(251, 178, 171); border-image: none; width: 204px; display: block; background-image: url("https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png");'>
<div align="center" style="padding: 4px 8px; color: rgb(251, 178, 171); border-bottom-color: rgb(251, 178, 171); border-bottom-width: 1px; border-bottom-style: solid;"><strong>INVEN 깜율</strong></div>
<strong></strong>
<div align="left" style="padding: 4px 8px;">
<strong>TERA 아룬의 영광</strong></div>
<div align="left" style="padding: 4px 8px;">사제 Priest&nbsp;&nbsp; Lv.65 깜율</div>
<div align="left" style="padding: 4px 8px;"></div>
<div align="left" style="padding: 4px 8px;"><br /></div>
<div align="left" style="padding: 4px 8px;"><strong>크리티카 KRITIKA</strong></div>
<div align="left" style="padding: 4px 8px;">그림자술사 크라켄리치&nbsp;</div>
</div></div>

<div style="display: none;transition:0.5s;opacity: 0; -webkit-transition: 0.7s;" data-inven-id="mma1">
<!--메뉴 1 내용-->
<div style='width:94%;padding: 4px 8px; border-radius: 6px; border: 1px solid rgb(251, 178, 171); border-image: none; display: inline-block; background-image: url("https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png");'>
<img src="https://upload2.inven.co.kr/upload/2016/05/18/bbs/i13077436889.png" style='width:100%;'><br />
<img src="https://upload2.inven.co.kr/upload/2016/05/18/bbs/i11016649727.png" style='width:100%;'><br />
<strong>감귤냠냠 님 감사합니다!</strong>
<br /><br />
<img src="https://upload2.inven.co.kr/upload/2016/05/18/bbs/i10889351645.jpg"><br />
<strong>윤펭 님 감사합니다!</strong>
<br /><br />
<img src="https://upload2.inven.co.kr/upload/2016/05/18/bbs/i12656161832.jpg"><br />
<strong>오팔님 님 감사합니다!</strong>
<br /><br />
<img src="https://upload2.inven.co.kr/upload/2016/05/18/bbs/i10545997011.gif" style='width:100%;'><br />
<strong>미야케치노 님 감사합니다!</strong>
<br /><br />
<p></p>
</div></div>

<div style="display: none;transition:0.5s;opacity: 0; -webkit-transition: 0.7s;" data-inven-id="mma3">
<div style='padding: 4px 8px; border-radius: 6px; border: 1px solid rgb(251, 178, 171); border-image: none; display: inline-block; background-image: url("https://upload2.inven.co.kr/upload/2015/11/25/bbs/i12387913663.png");'>
<strong>TERA 아룬의 영광</strong>
<br /><br />
2016년 4월 5일
<strong>멍시크</strong> -&gt; <strong>깜율</strong> 닉네임 변경
<br /><br />

<img src="https://upload2.inven.co.kr/upload/2016/05/19/bbs/i12440105263.png"><br />
<br />2016년 5월 19일
<br /><br />

<strong>챔피언</strong> 업적 달성<br />
<strong>복수의 화신</strong> 칭호(폭군 듀리온의 안식처 100회 클리어) 획득<br />
<br />------------------------------------------------
<br /><br />
<strong>KRITIKA 크리티카</strong><br />
<br />1차 길드대전 종합 5위
<br />PvP종목
<strong>1위</strong><br />
<br />2차 길드대전 총합 4위
<br />PvP종목
<strong>2위</strong> </div>
</div>

<!--새 내용 추가하는 곳-->
</div></div></div>