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>
