Devrama Slider – jQuery Image/HTML Slider Plugin
Devrama Slider is a image slider with many features. It support both images and HTML contents.ResponsiveCSS3 Transition ReadyTransition EffectsProgress BarHTML content inside a slideAdvanced Preload/LazyloadCSS CustomizableUser defined Navigation/Control available
Related Plugins
Latest Plugins
You May Also Like
Subscribe to Newsletter
Subscribe to email newsletter for latest jQuery plugins & tutorials.
Please enable JavaScript to view the
CATEGORIES
SUBSCRIBE & GET UPDATESCSS Transitions 101
Jan. 18, 2010
Reading time: 6 minutes
Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary.
A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. No transitions.
This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully.
Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple.
What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them.
A few months back, I stuck my foot in my mouth by
that allow them to do some of the basic styling that they’ve been pleading for. The only issue: none of them worked in Internet Explorer. Nope, not even IE8.
Some readers felt that suggesting techniques that around 75% of audiences would not be able to see was imprudent.
To those readers I say, ‘Hold onto your hats’, because I’m going to introduce you to another new CSS property that allows you to add transitions to any element with only a couple of lines of code.
CSS transitions are being introduced right now in CSS Level 3 but have already been added as an extension to Webkit. Right now that means they work only in browsers based on Webkit, including Apple Safari and Google Chrome.
&Where CSS Transitions Come From
Transitions have been a part of Webkit for a while and are the basis of a lot of the cool things that the Safari UI can do that other browsers cannot.
But the W3C CSS Workgroup resisted adding transitions to its official specs, some members arguing that transitions are not style properties and would be better handled by a scripting language.
But many designers and developers, myself included, argued that these are in fact styles— only dynamic styles, rather than the traditional static styles that so many of us are used to.
Fortunately, the argument for dynamic styles held the day. Last March, representatives from Apple and Mozilla began adding the , closely modeled on what Apple had already added to Webkit.
&A Brief Note on Design Enhancements
Before we continue, let me emphasize one point: never rely on styles for website functionality if the styles are not browser interoperable (i.e. available on all common browsers).
One more time for those who missed it: never rely on styles for website functionality if the styles are not browser interoperable.
That said, you can use styles, such as transitions, as design enhancements to improve the user experience, without sacrificing usability for those who cannot see them. This is okay as long as you could otherwise live without the transitions and users can still complete their tasks.
&First, a Few Transition Ideas
CSS transitions will not replace all uses of DHTML, but here are a few ways to enhance your design in browsers that support transitions, without ruining it for the rest of your audience.
You will need to view this page in
to see these transitions work. Both browsers are available in Mac and PC flavors.
Roll-Overs
The most obvious use for transitions is to highlight elements (whether links, tables, form fields, buttons or something else) when the user’s mouse hovers over them. Transitions are a great way to give the page a smoother look.
Example #1
Drop-Down Menus
Pure CSS menus are easy to accomplish, and transitions let you give menus slide-down and highlighting effects.
Example #2
You can move an object between two points on the page and use transitions to animate its movement.
Example #3
Click & Hold!
&Transitions, States and Actions
But hold on a minute there, Tex. Before diving into transitions, we have to understand the various states to which an element can transition.
States define how a particular element currently interacts with the user or the page, and they are specified in CSS using the pseudo-classes. For example, when the user hovers over an element, that element would be styled with the hover pseudo-class.
Dynamic Pseudo Class
Elements Affected
Description
Links only
Unvisited links
Links only
Visited links
All elements
Mouse cursor over element
All elements
Mouse clicks element
All elements that can be selected
Element is selected
All elements
Default state of all elements
Transitions work by changing a style over a period of time between different element states. For example, the color value of the default state of an element will pass through intermediate colors in the spectrum before appearing as the color value for the hover state.
&A Simple Transition
Let’s consider a simple transition from one color to another when the user hovers over a link. Like any other CSS property, transitions are added directly to the selector that it is to be applied to. The property can then take one of following four values.
CSS property
The property that is to be altered (for example, color). See the table below for a list of all of the CSS properties that can be transitioned.
How long the transition will last, generally in seconds (for example, .25s).
Timing function
Allows you to control how the duration is timed. Rather than using a simple linear count, you can speed up or slow down the transition or even specify a beat or count (for example, linear). More on this later in the article.
How long to wait between the action and the beginning of the transition, usually expressed in seconds (for example, .1s). This value can be omitted if you don’t want a delay.
Because the transition property started out as a Webkit extension, we have to include both the transition and -webkit-transition properties for backwards compatibility.
Let’s first add both of these properties to the :hover pseudo-class:
-webkit-transition: color .25
transition: color .25
Now, when a link is hovered over, rather than jumping from blue to red, it will transition for a quarter of a second through the intermediate colors.
Of course, we also want to transition back to the default link color, so we’ll add a transition to the :link (and probably :visited) pseudo-classes, with just a very brief delay (one-tenth of a second) before it fades:
a:link, a:visited {
-webkit-transition: color .25s linear .1s;
transition: color .25s linear .1s;
&Adding Multiple Transitions
Because a transition is a CSS property, if you add multiple instances of the transition property in the same rule, then the last one will override previous ones, rather than add to them. So in the following rule, the only transition would be the background color:
background-color: rgb(235,235,185);
-webkit-transition: color .25
transition: color .25
transition: background-color .15s linear .1;
Multiple transitions are added as a comma-separated list in the same transition property definition:
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear, background-color .15s linear .1s;
transition: color .25s linear, background-color .15s linear .1s;
This will create both a color and background-color transition.
&What Can Be Transitioned?
Almost any CSS property that has a color, length or position component, including many of the new CSS 3 properties, can be given a transition. One notable exception seems to be box-shadow.
Straight from the W3C’s Transitions spec, here is a list of CSS properties that can be given a transition, along with the aspects that are transformed. I’ve highlighted a few of the more useful properties.
CSS Property
What Changes
background-color
background-image
Only gradients
background-position
Percentage, length
border-bottom-color
border-bottom-width
border-color
border-left-color
border-left-width
border-right-color
border-right-width
border-spacing
border-top-color
border-top-width
border-width
Length, percentage
Length, percentage
font-weight
Length, percentage
Length, percentage
letter-spacing
line-height
Number, length, percentage
margin-bottom
margin-left
margin-right
margin-top
max-height
Length, percentage
Length, percentage
min-height
Length, percentage
Length, percentage
outline-color
outline-offset
outline-width
padding-bottom
padding-left
padding-right
padding-top
Length, percentage
text-indent
Length, percentage
text-shadow
Length, percentage
vertical-align
Keywords, length, percentage
visibility
Visibility
Length, percentage
word-spacing
Length, percentage
&Transition Timing and Delay
With transitions, you can vary the count rate, counting slower at the beginning and speeding up at the end, vice versa, or anything in between. CSS transitions come with five keywords for transition timing and allow you to specify values for your own timing curve.
How It Works
cubic-bezier(x1, y1, x2, y2)
X and Y values are between 0 and 1 to define the shape of a bezier curve used for the timing function.
Constant speed
Gradual slowdown
ease-in-out
Speed up and then slow down
&A Universal Transition?
Transitions will quickly become standard operating procedure for all websites,
enhancing user interface feedback.
To add ubiquitious transitions across your entire website, one option is to add a transition to the universal selector, similar to a CSS reset. This applies a default transition to all elements on the page, allowing you to keep a consistent transition:
*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
color .25s linear,
background-color .25s linear,
border-color .25
transition:
color .25s linear,
background-color .25s linear,
border-color .25
One argument against a universal transition, and indeed against using the universal selector for CSS resets in general, is that applying a style to every element on the page may slow down page rendering. However, I’ve never found any evidence that this is the case. Anyone know different?
is the author of more than 13 books on digital media, including . For more information on CSS and web typography, check out Jason’s new book, . Follow Jason on Twitter: .
By WebdesignerDepot Staff
are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know
by WebdesignerDepot Staff
Popular posts
Featured freebiesjQuery plugin Slider
Devrama Slider - jQuery Plugin
'Devrama Slider' is a image slider with many features. It support both images and HTML contents.
Responsive
Automatically,
it resizes
with window size!!
CSS3 Transition Ready
CSS3 Transition
jQuery animation as fallback
HTML content inside
&th colspan="2"&HTML tags in your slide.&/th&
&td&Table content 1&/td&
&td&Table content 2&/td&
HTML tags in your slide.
Table content 1
Table content 2
Customizable Controls/Navigation
Various Transition Effects
Download v0.9.4
Examples and Codes
Just copy and paste these codes for simple use.
Responsive
Slider automatically resizes as the parent container resizes. This means Devrama Slider can be used on different sizes of devices.
CSS3 Transition Ready
CSS3 Native transition effect is used when browser support it, otherwise jQuery animate function.
Transition Effects
There are transition effects such as 'slide', 'fade', 'split', 'door', 'wave'
Progress Bar
Progress bar shows a time remaining
HTML content inside a slide
You can use HTML content in the slider instead images.
Advanced Preload/Lazyload
Images are loaded sequentially, and the slide shows as soon as its images are loaded while other images in other slides are being loaded in background process.
Single Javascript file
No css file required.
CSS Customizable(optional)
Previous, Next, Navigation buttons can be customized using CSS.
User defined Navigation/Control available
You can make your own Navigation/Control to control Devrama Slider.
Pause on hover
How to use?
Include jQuery and jquery.devrama.slider.js
&script type="text/javascript" src="jquery.js"&&/script&
&script type="text/javascript" src="jquery.devrama.slider.js"&&/script&
1. Simple Image Slide
&script type="text/javascript" src="jquery.js"&&/script&
&script type="text/javascript" src="jquery.devrama.slider.js"&&/script&
data-lazy-src: image url
&div id="my-slide"&
&img data-lazy-src="/static/devrama-slider/images/1774705b_b.png" /&
&img data-lazy-src="/static/devrama-slider/images/_81a3f048ca_b.png" /&
&img data-lazy-src="/static/devrama-slider/images/_044d26b6df_b.png" /&
&img data-lazy-src="/static/devrama-slider/images/_d5010f8efc_b.png" /&
&img data-lazy-src="/static/devrama-slider/images/_db0f314ef6_b.png" /&
&script type="text/javascript"&
$(document).ready(function(){
$('#my-slide').DrSlider(); //Yes! that's it!
1. Add &div id="slide-id-name"&&/div&
2. Inside &div id="slide-id-name"&, add &img& tags.
3. Instead of src attribute in &img&, use data-lazy-src.
4. Add this $('#my-slide').DrSlider(); in your javascript code.
2. Simple Linked Image Slide
&script type="text/javascript" src="jquery.js"&&/script&
&script type="text/javascript" src="jquery.devrama.slider.js"&&/script&
data-lazy-src: image url
&div id="my-slide"&
&a href=""&&img data-lazy-src="/static/devrama-slider/images/1774705b_b.png" /&&/a&
&a href=""&&img data-lazy-src="/static/devrama-slider/images/_81a3f048ca_b.png" /&&/a&
&a href=""&&img data-lazy-src="/static/devrama-slider/images/_044d26b6df_b.png" /&&/a&
&a href=""&&img data-lazy-src="/static/devrama-slider/images/_d5010f8efc_b.png" /&&/a&
&a href=""&&img data-lazy-src="/static/devrama-slider/images/_db0f314ef6_b.png" /&&/a&
&script type="text/javascript"&
$(document).ready(function(){
$('#my-slide').DrSlider(); //Yes! that's it!
1. Add &div id="slide-id-name"&&/div&
2. Inside &div id="slide-id-name"&, add &a&&img&&/a& tags.
3. Instead of src attribute in &img&, use data-lazy-src.
4. Add this $('#my-slide').DrSlider(); in your javascript code.
3. HTML Content in Slides
&script type="text/javascript" src="jquery.js"&&/script&
&script type="text/javascript" src="jquery.devrama.slider.js"&&/script&
data-lazy-src: image url
data-lazy-background: slide background url
&div id="my-slide"&
&!-- First Slide ---------------------------------------------&
&div style="background-color:#27446F;"&
&h3&HTML content inside&/h3&
&th colspan="2"&HTML tags in your slide.&/th&
&td&Table content 1&/td&
&td&Table content 2&/td&
&!-- Second Slide ---------------------------------------------&
&div data-lazy-background="/static/devrama-slider/images/_81a3f048ca_b.png"&
&h3&HTML content inside&/h3&
&img src="/avatar/fe3fe9ed9c9b067fcb1fd4?s=200"/&
&script type="text/javascript"&
$(document).ready(function(){
$('#my-slide').DrSlider({
width: 1024, //slide width
height: 400
//slide height
}); //Yes! that's it!
1. Add &div id="slide-id-name"&&/div&
2. Inside &div id="slide-id-name"&, add HTML codes surrounded by &div&
3. Add this in your javascript code.
&&$('#my-slide').DrSlider({
&&&&&&&&width: 1024, //replace 1024 by the slide width you want
&&&&&&&&height: 400
//replace 400 by the slide height you want
4. Optionally, you can load a background image of the slide using data-lazy-background attribute in the slide block.
Because the slide size cannot be determined with HTML content without a slide image, You should configure width and height.
Configuration
1. Default Configuration Values
$('#my-slide').DrSlider({
width: undefined,
height: undefined,
userCSS: false,
transitionSpeed: 1000,
duration: 4000,
showNavigation: true,
classNavigation: undefined,
navigationColor: '#9F1F22',
navigationHoverColor: '#D52B2F',
navigationHighlightColor: '#DFDFDF',
navigationNumberColor: '#;,
positionNavigation: 'out-center-bottom',
navigationType: 'circle',
showControl: true,
classButtonNext: undefined,
classButtonPrevious: undefined,
controlColor: '#FFFFFF',
controlBackgroundColor: '#;,
positionControl: 'left-right',
transition: 'slide-left',
showProgress: true,
progressColor: '#;,
pauseOnHover: true,
onReady: undefined
2. Detail of Configuration Values
Default Value
Available Values
Description
e.g.0, 1, 2, 3, 4&
Slide with images will be automatically detected its width. HTML contents without a background image will need this configuration to render the slider box size. The slider box will be shown in pixel.
e.g.0, 1, 2, 3, 4&
same as above.
true, false
If userCSS is true,this will disable all native CSS of the slider. Then, you can decorate the slider with your own CSS.
transitionSpeed
e.g.0, 1, 2, 3, 4&
Transition effect time between slides in milliseconds.
e.g.0, 1, 2, 3, 4&
Time in milliseconds that the slide stays.
showNavigation
true, false
Show/Hide navigation.
classNavigation
e.g.'my-navigation','my-nav','cool-navigation','cool-nav'&
User defined navigation. type class name in this value.
navigationColor
e.g.'#9F1F22', '#FF0000', '#00FF00'&
Navigation color in regular status.
navigationHoverColor
e.g.'#9F1F22', '#FF0000', '#00FF00'&
Navigation color in mouse over status.
navigationHighlightColor
e.g.'#9F1F22', '#FF0000', '#00FF00'&
Navigation color when its slide is active.
navigationNumberColor
e.g.'#9F1F22', '#FF0000', '#00FF00'&
Navigation number text color.
positionNavigation
out-center-bottom
out-center-bottom
out-left-bottom
out-right-bottom
out-center-top
out-left-top
out-right-top
in-center-bottom
in-left-bottom
in-right-bottom
in-center-top
in-left-top
in-right-top
in-left-middle
in-right-middle
Positioning the navigation.
navigationType
number, circle, square
Navigation shape
showControl
true, false
Show/Hide Previous-Next controls on hover.
classButtonNext
e.g.'my-next',,'cool-next'&
User defined next button. type class name in this value.
classButtonPrevious
e.g.'my-previous',,'cool-previous'&
Same as above.
controlColor
e.g.'#9F1F22', '#FF0000', '#00FF00'&
Next and Previous buttons arrow color.
controlBackgroundColor
e.g.'#9F1F22', '#FF0000', '#00FF00'&
Next and Previous buttons background color.
positionControl
left-right
left-right
top-center
bottom-center
bottom-left
bottom-right
Positioning the control buttons.
transition
slide-left
slide-left
slide-right
slide-bottom
wave-right
wave-bottom
Transition effect between slides.
showProgress
true, false
Show/Hide progress bar
progressColor
e.g.'#9F1F22', '#FF0000', '#00FF00'&
progress bar color.
pauseOnHover
true, false
Pause when the mouse is on the slide
Callback function when first slide is ready to go. This means that images in first slide are downloaded completely.
Licensed under the
Copyright & . All Rights Reserved.　　Devrama Slider 是一个图片滑块，支持很多特色功能。除了支持图片滑动，其它的
内容也支持。主要特色：响应式、图片预加载、图片延迟加载、进度条、自定义导航栏和控制按钮等等。
默认的参数配置：
$('#my-slide').DrSlider({
width: undefined,
height: undefined,
userCSS: false,
transitionSpeed: 1000,
duration: 4000,
showNavigation: true,
classNavigation: undefined,
navigationColor: '#9F1F22',
navigationHoverColor: '#D52B2F',
navigationHighlightColor: '#DFDFDF',
navigationNumberColor: '#000000',
positionNavigation: 'out-center-bottom',
navigationType: 'circle',
showControl: true,
classButtonNext: undefined,
classButtonPrevious: undefined,
controlColor: '#FFFFFF',
controlBackgroundColor: '#000000',
positionControl: 'left-right',
transition: 'slide-left',
showProgress: true,
progressColor: '#797979',
pauseOnHover: true,
onReady: undefined
您可能感兴趣的相关文章
本文链接：
编译来源：
阅读(...) 评论()