<!-- Add jQuery and jQuery.NiceScroll -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<script>
$(function () {
$('.box').niceScroll({
option
});
// Adjust when the window size is changed.
$('.box').getNiceScroll().resize();
});
</script>
<div class="box">...</div>
Property | Type | Default | Description |
---|---|---|---|
cursorcolor | String | #424242 | change cursor color in hex |
cursoropacitymin | Number | 0 | change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0 |
cursoropacitymax | Number | 1 | change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0 |
cursorwidth | String | 5px | cursor width in pixel (you can also write "5px") |
cursorborder | String | 1px solid #fff | css definition for cursor border |
cursorborderradius | String | 5px | border radius in pixel for cursor |
zindex | String | auto | change z-index for scrollbar div |
scrollspeed | Number | 60 | scrolling speed |
mousescrollstep | Number | 40 | scrolling speed with mouse wheel (pixel) |
touchbehavior | Boolean | false | DEPRECATED!! use "touchemulate" |
emulatetouch | Boolean | false | enable cursor-drag scrolling like touch devices in desktop computer |
hwacceleration | Boolean | true | use hardware accelerated scroll when supported |
boxzoom | Boolean | false | enable zoom for box content |
dblclickzoom | Boolean | true | (only when boxzoom=true) zoom activated when double click on box |
gesturezoom | Boolean | true | (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box |
grabcursorenabled | Boolean | true | (only when touchbehavior=true) display "grab" icon |
autohidemode | Boolean or String | true | how hide the scrollbar works, possible values true: hide when no scrolling false: do not hide 'cursor': only cursor hidden 'leave': hide only if pointer leaves content 'hidden': hide always 'scroll': show only on scroll |
background | String | '' | change css for rail background |
iframeautoresize | Boolean | true | autoresize iframe on load event |
cursorminheight | Number | 32 | set the minimum cursor height (pixel) |
preservenativescrolling | Boolean | true | you can scroll native scrollable areas with mouse, bubbling mouse wheel event |
railoffset | Boolean | false | you can add offset top/left for rail position |
bouncescroll | Boolean | false | (only hw accell) enable scroll bouncing at the end of content as mobile-like |
spacebarenabled | Boolean | true | enable page down scrolling when space bar has pressed |
railpadding | String | { top: 0, right: 0, left: 0, bottom: 0 } | set padding for rail bar |
disableoutline | Boolean | true | for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll |
horizrailenabled | Boolean | true | nicescroll can manage horizontal scroll |
railalign | String | right | alignment of vertical rail |
railvalign | String | bottom | alignment of horizontal rail |
enabletranslate3d | Boolean | true | nicescroll can use css translate to scroll content |
enablemousewheel | Boolean | true | nicescroll can manage mouse wheel events |
enablekeyboard | Boolean | true | nicescroll can manage keyboard events |
smoothscroll | Boolean | true | scroll with ease movement |
sensitiverail | Boolean | true | click on rail make a scroll |
enablemouselockapi | Boolean | true | can use mouse caption lock API (same issue on object dragging) |
cursorfixedheight | Boolean | false | set fixed height for cursor in pixel |
hidecursordelay | Number | 400 | set the delay in microseconds to fading out scrollbars |
directionlockdeadzone | Number | 6 | dead zone in pixels for direction lock activation |
nativeparentscrolling | Boolean | true | detect bottom of content and let parent to scroll, as native scroll does |
enablescrollonselection | Boolean | true | enable auto-scrolling of content when selection text |
cursordragspeed | Number | 0.3 | speed of selection when dragged with cursor |
rtlmode | String | auto | horizontal div scrolling starts at left side |
cursordragontouch | Boolean | false | drag cursor in touch / touchbehavior mode also |
oneaxismousemode | Boolean or String | auto | it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse |
scriptpath | String | '' | define custom path for boxmode icons ("" => same script path) |
preventmultitouchscrolling | Boolean | true | prevent scrolling on multitouch events |
disablemutationobserver | Boolean | false | force MutationObserver disabled, |
enableobserver | Boolean | true | enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed |
scrollbarid | Boolean | false | set a custom ID for nicescroll bars |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add jQuery and jQuery.NiceScroll -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<title>jQuery.NiceScroll</title>
<style>
[class^='box-'] {
width: 80vw;
max-width: 640px;
height: 380px;
padding: 15px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12),
0 1px 2px rgba(0, 0, 0, .24);
overflow: auto;
}
.horizontal p {
white-space: nowrap;
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">jQuery.NiceScroll</h1>
<p class="dlw-description">jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.</p>
</header>
<section>
<h2 class="dlw-subtitle">[1] Default Cursor</h2>
<script>
$(function () {
$('.box-1').niceScroll();
});
// Adjust when the window size is changed.
$('.box-1').getNiceScroll().resize();
</script>
<h3 class="dlw-lead">Vertical Scroll</h3>
<div class="box-1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<h3 class="dlw-lead">Horizontal Scroll</h3>
<div class="box-1 horizontal">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[2] Cursor Color Style</h2>
<p>Defines the color and border of the cursor.</p>
<script>
$(function () {
$('.box-2').niceScroll({
cursorcolor: '#0f7dc2',
background: 'grey',
cursorborder: '1px solid #8bc4e8'
});
$('.box-2').getNiceScroll().resize();
});
</script>
<div class="box-2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[3] Cursor Shape</h2>
<p>Define the cursor width and rounded corners.</p>
<script>
$(function () {
$('.box-3').niceScroll({
cursorwidth: '24px',
cursorborderradius: 0
});
$('.box-3').getNiceScroll().resize();
});
</script>
<div class="box-3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[4] Hide Setting</h2>
<p>Define the timing and time to hide the cursor.</p>
<h3 class="dlw-lead">Always Show</h3>
<p>autohidemode: false</p>
<script>
$(function () {
$('.box-4-1').niceScroll({
autohidemode: false
});
$('.box-4-1').getNiceScroll().resize();
});
</script>
<div class="box-4-1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<h3 class="dlw-lead">Hide if pointer leaves content</h3>
<p>autohidemode: 'leave'</p>
<script>
$(function () {
$('.box-4-2').niceScroll({
autohidemode: 'leave'
});
$('.box-4-2').getNiceScroll().resize();
});
</script>
<div class="box-4-2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<h3 class="dlw-lead">Hide Cursor Delay Time</h3>
<p>hidecursordelay: 2000</p>
<script>
$(function () {
$('.box-4-3').niceScroll({
hidecursordelay: 2000
});
$('.box-4-3').getNiceScroll().resize();
});
</script>
<div class="box-4-3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[5] Zoom</h2>
<p>Zoom scroll box content.</p>
<script>
$(function () {
$('.box-5').niceScroll({
boxzoom: true
});
$('.box-5').getNiceScroll().resize();
});
</script>
<div class="box-5">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<script>
$(function () {
// This code is inserted for demonstration preview.
$(document).ajaxStop(function() {
$('div').getNiceScroll().resize();
});
});
</script>
</body>
</html>
Here, design samples of various effects to text are posted.
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.
Using
In this example, Picturefill is added for IE.
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.
Flex is the value of the CSS display property.
It is a standard button design of Bootstrap Framework.
Hover.css is a style-sheet collection of hover effects.
Button.css is collection of CSS3 button animations.
It is a standard Card design of Bootstrap Framework.
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
Introduction of various embedment methods of YouTube.
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.
Instagram.css is a stylesheet set that filters photos like instagram.
Moment.js is a javascript that processes and displays date and time.
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
Multifilter is jQuery Table Filtering Plugin.
Responsive table using "display: flex;".
Not supported for rowspan.
Responsive table using "display: grid;".
Not supported for rowspan.
It is a standard Table design of Bootstrap Framework.
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
It is a standard Carousel of Bootstrap Framework.
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
metisMenu is a jQuery plugin that expands vertical and vertical menus.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
Scrolla is jQuery scroll animation plugin.
Hover.css is a style-sheet collection of hover effects.
Animate.css is a style-sheet collection of animation effects.
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
jQuery.mb.YTPlayer is jQuery Background player plugin.
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
It is a standard Carousel of Bootstrap Framework.
It is a standard Card design of Bootstrap Framework.
It is a standard button design of Bootstrap Framework.
It is a standard Table design of Bootstrap Framework.
HTML5 Cheat Sheet by Make A Website Hub
CSS3 Cheat Sheet by Smashing Magazine
This is the Visual Studio Code default keyboard shortcut list.
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
On this page you can search for codes collectively.
It is a news feed about design.