http://hugoware.net/snippets/jquery-dual-scroll

html

css

.div01{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}
.div02{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}

jQuery

var tbox1 = $('.tlans-box .txt-box .txtarea-view.tbox1');
var tbox2 = $('.tlans-box .txt-box .txtarea-view.tbox2');

var height = parseInt(tbox2.css('height'));

var hold = false;
var window_scroll = true;
tbox1.add(tbox2)
   .mouseenter(function() { window_scroll = false; })
   .mouseleave(function() { window_scroll = true; });

var locked = false;
var sync_to = function(source, target) {
   if (locked) { return locked = false, true; }
   locked = true;

   var percent = source.scrollTop() / (source[0].scrollHeight - height);
   var top = (target[0].scrollHeight - height) * percent;
   target[0].scrollTop = top;
}

tbox1.scroll(function(e) { sync_to.call(e, tbox1, tbox2); });
tbox2.scroll(function(e) { sync_to.call(e, tbox2, tbox1); });

jQuery HTML5 Audio / Video Library

jPlayer는 커스터마이징이 가능한 오디오 플레이어

배포사이트 : http://jplayer.org/

script

$("#jquery_jplayer_1").jPlayer({
   ready: function () {
      $(this).jPlayer("setMedia", {
         m4a: "/resource/tts_10.mp3"    //음원 경로
      });
   },
   play: function() { // To avoid multiple jPlayers playing together.
      $(this).jPlayer("pauseOthers");
   },
   swfPath: "/resource/script/jplayer",    //jplayer 경로
   supplied: "m4a",
   cssSelectorAncestor: "#jp_container_1",
   wmode: "window",
   globalVolume: true,
   useStateClassSkin: true,
   autoBlur: false,
   smoothPlayBar: true,
   keyEnabled: true,
   defaultPlaybackRate : .5     //배속. 디폴트 1
});

html

<div class="player">

   <div id="jquery_jplayer_1" class="jp-jplayer"></div>

   <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">

      <div class="jp-controls">
         <button class="jp-play" role="button" tabindex="0">play</button>
         <button class="jp-pause" role="button">Pause</button>
         <button class="jp-stop" role="button">Stop</button>
      </div>

   </div>

</div>

커스텀 스크롤바를 만들어주는 플러그인

배포사이트 : http://manos.malihu.gr/jquery-custom-content-scroller/

데모 : http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

웹에서 그래프를 표현하는 것은 엄청 귀찮고 싫어하는 작업인데..

css로 원형 그래프를 표현할 수 있는 라이브러리를 찾았다!

거기다 무지 간편함!!!! 완전 사랑스럽ㅠㅠ

Pure CSS Circular Percentage Bar

https://www.cssscript.com/pure-css-circular-percentage-bar/

위 링크를 타고 들어가서 아래 다운로드 버튼 누르면 끝! 

사용법은 다운로드 옆 Demo 버튼을 누르고 들어가면 예시로 만들어진 차트들이 있으니 참고해서 작업하면 됨.

a img{

-webkit-filter: grayscale(100%);
filter: gray;

}

 

a:hover img{

-webkit-filter: grayscale(0%);
filter: none;

}