http://www.smoothdivscroll.com/
http://www.smoothdivscroll.com/basicDemo.html

 

왼쪽으로 흘러가는 텍스트 스크립트입니다.
jquery와 css 를 사용해서 매우 부드럽게 흘러갑니다.
한페이지 내에서 1개 흘러가는 용도로 매우 유용하게 사용할 수 있습니다.  2개이상은 여러분의 몫입니다.

소스는 다음과 같으며, 내용중에 필요한 js와 css 그리고 image 는 첨부파일을 확인하세요.
 

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Scrolling Text - jQuery Smooth Div Scroll - Thomas Kahn</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="Scripts/smoothDivScroll/smoothDivScroll.css" />
<style type="text/css">
/* text 스크롤 */
#scrollingText {
  width: 728px;
  height: 70px;
  position: relative;
  border: solid 1px #ccc;
  padding-top: 20px;
}
 
#scrollingText div.scrollableArea p {
  display: block;
  float: left;
  margin: 0;
  padding-right: 20px;
  font-family: Georgia,Times, 'Times New Roman', Serif; 
  font-size: 45px;
  line-height: 45px;
  font-weight: bold; 
  background-color: #fff; 
  color: #000; 
  white-space: nowrap;
}
#scrollingText2 div.scrollableArea2 p {
  display: block;
  float: left;
  margin: 0;
  padding-right: 20px;
  font-family: Georgia,Times, 'Times New Roman', Serif; 
  font-size: 45px;
  line-height: 45px;
  font-weight: bold; 
  background-color: #fff; 
  color: #000; 
  white-space: nowrap;
}
 
/* image 스크롤 */
#makeMeScrollable
{
  width:470px;  /* 보여지는 넓이 */
  height: 330px; /* 보여지는 높이 */
  position: relative;
}
 
#makeMeScrollable div.scrollableArea *
{
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  /* If you don't want the images in the scroller to be selectable, try the following
      block of code. It's just a nice feature that prevent the images from
      accidentally becoming selected/inverted when the user interacts with the scroller. */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
</head>
 
<body>
<div id="scrollingText">
<p>You know, I have one simple request.</p>
<p>And that is to have sharks with frickin' laser beams attached to their heads! </p>
<p>Now evidently, my cycloptic colleague informs me that that can't be done. </p>
<p>Can you remind me what I pay you people for? </p>
<p>Honestly, throw me a bone here. What do we have? </p>
</div>
 
<div id="makeMeScrollable">
  <img src="images/demo/field.jpg" alt="Field" id="field" />
  <img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
  <img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
  <img src="images/demo/golf.jpg" alt="Golf" id="golf" />
  <img src="images/demo/river.jpg" alt="River" id="river" />
  <img src="images/demo/train.jpg" alt="Train" id="train" />
  <img src="images/demo/leaf.jpg" alt="Leaf" id="leaf" />
  <img src="images/demo/dog.jpg" alt="Dog" id="dog" />
</div>
 
<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
 
<!-- jQuery UI Widget and Effects Core (custom download)
     You can make your own at: http://jqueryui.com/download -->
<script src="Scripts/smoothDivScroll/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
 
<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="Scripts/smoothDivScroll/jquery.mousewheel.min.js" type="text/javascript"></script>
 
<!-- jQuery Kinetic - for touch -->
<script src="Scripts/smoothDivScroll/jquery.kinetic.js" type="text/javascript"></script>
 
<!-- Smooth Div Scroll 1.3 minified-->
<script src="Scripts/smoothDivScroll/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
<!-- If you want to look at the uncompressed version you find it at
     js/jquery.smoothDivScroll-1.3.js -->
 
<!-- Plugin initialization -->
<script type="text/javascript">
<!--
  // text 스크롤
  $(document).ready(function() {
    $("#scrollingText").smoothDivScroll({
      autoScrollingMode: "always",
      autoScrollDirection: "endlessLoopRight",
      autoScrollInterval: 10, 
      autoScrollStep: 2 });
    }
  );
 
  // image 스크롤
  // Initialize the plugin with no custom options
  $(document).ready(function () {
  // I just set some of the options
    $("#makeMeScrollable").smoothDivScroll({
      mousewheelScrolling: "allDirections",
      manualContinuousScrolling: true,
      autoScrollingMode: "onStart"
    });
  });
//-->
</script>
</body>
</html>
 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기