The cool and domineering HTML5/jQuery application and source code, html5jquery

The cool and domineering HTML5/jQuery application and source code, html5jquery

Maybe five years ago, HTML5 was still a very cutting-edge technology. People just thought of it as an experiment, let alone product applications. But now HTML5 is very popular, and HTML5 plays a very important role in both PC and mobile. Some of the applications we want to share today are based on HTML5 and jQuery. With the download of source code, you will feel very useful. Please share it with us.

HTML5 linear chart data area can be colored

This is a Canvas-based HTML5 chart application. It is animated when chart data is initialized.

Core jQuery code:

Var myData = {labels: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"], datasets: [{fillColor: "rgba (220,220,220 ,. 5) ", strokeColor:" rgba (220,220,220, 1) ", pointColor:" rgba (220,220,220, 1) ", pointStrokeColor:" # fff ", data: [, 59, 56,55, 40] },{ fillColor: "rgba (90,190, 90 ,. 5) ", strokeColor:" rgba (90,190, 90,1) ", pointColor:" rgba (90,190, 90,1) ", pointStrokeColor:" # fff ", data, 90,27, 90]} new Chart (document. getElementById ("canvas "). getContext ("2d ")). line (myData)View Code

Download demo source code online

HTML5/CSS3 Facebook login form imitation

This is a creative form implemented using CSS3. It looks like Facebook.

Core CSS code:

. Login-form-wrap {background: # 5170ad; background:-moz-radial-gradient (center, ellipse cover, # 5170ad 0%, #355493 100%); background: -webkit-gradient (radial, center, 0px, center, 100%, color-stop (0%, # 5170ad), color-stop (100%, #355493); background: -webkit-radial-gradient (center, ellipse cover, # 5170ad 0%, #355493 100%); background:-o-radial-gradient (center, ellipse cover, # 5170ad 0%, #355493 100%); background:-ms-radial-gradient (center, ellipse cover, # 5170ad 0%, #355493 100%); background: radial-gradient (ellipse at center, # 5170ad 0%, #355493 100%); filter: progid: DXImageTransform. microsoft. gradient (startColorstr = '# 5170ad', endColorstr =' #355493 ', GradientType = 1); border: 1px solid # 2d416d; box-shadow: 0 1px #5670a4 inset, 0 0 10px 5px rgba (0, 0, 0, 0.1); border-radius: 5px; position: relative; width: 360px; height: pixel PX; margin: 10px auto 20px auto; padding: 50px 30px 0 30px; text-align: center ;}. login-form-wrap: before {background: url ( http://i.imgur.com/0vLxyVB.png ); Display: block; content: ''; width: 58px; height: 19px; top: 10px; left: 10px; position: absolute ;}. login-form-wrap> h1 {margin: 0 0 50px 0; padding: 0; font-size: 26px; color: # fff ;}. login-form-wrap> h5 {margin-top: 40px ;}. login-form-wrap> h5> a {font-size: 14px; color: # fff; text-decoration: none; font-weight: 400 ;}. login-form input [type = "email"],. login-form input [type = "password"] {width: 100%; border: 1px solid #314d89; outline: none; padding: 12px 20px; color: # afaf; font-weight: 400; font-family: 'lato', sans-serif; cursor: pointer ;}. login-form input [type = "email"] {border-bottom: none; border-radius: 4px 4px 0 0; padding-bottom: 13px; box-shadow: 0-1px 0 # e0e0e0 inset, 0 1px 2px rgba (0, 0, 0, 0.23) inset ;}. login-form input [type = "password"] {border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0-1px 2px rgba (0, 0, 0, 0.23) inset, 0 1px 2px rgba (255,255,255, 0.1 );}. login-form input [type = "submit"] {font-family: 'lato', sans-serif; font-weight: 400; background: # e0e0e0; background: -moz-linear-gradient (top, # e0e0e0 0%, # cecece 100%); background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, # e0e0e0), color-stop (100%, # cecece); background:-webkit-linear-gradient (top, # e0e0e0 0%, # cecece 100%); background: -o-linear-gradient (top, # e0e0e0 0%, # cecece 100%); background:-ms-linear-gradient (top, # e0e0e0 0%, # cecece 100%); background: linear-gradient (to bottom, # e0e0e0 0%, # cecece 100%); filter: progid: DXImageTransform. microsoft. gradient (startColorstr = '# e0e0e0', endColorstr =' # cecece ', GradientType = 0); display: block; margin: 20px auto 0 auto; width: 100%; border: none; border-radius: 3px; padding: 8px; font-size: 17px; color: #636363; text-shadow: 0 1px 0 rgba (255,255,255, 0.45); font-weight: 700; box-shadow: 0 1px 3px 1px rgba (0, 0, 0, 0.17), 0 1px 0 rgba (255,255,255, 0.36) inset ;}. login-form input [type = "submit"]: hover {background: # DDD ;}. login-form input [type = "submit"]: active {padding-top: 9px; padding-bottom: 7px; background: # C9C9C9 ;}View Code

Download demo source code online

HTML5/CSS3 awesome progress bar with different progress colors

This is a cool HTML5 progress bar plug-in with good animation effects.

Core jQuery code:

Var Loader = function () {var loader = document. querySelector ('. loader-iner '), meter = document. querySelector ('. meter '), k, I = 1, counter = function () {if (I <= 100) {meter. innerHTML = I. toString (); I ++;} else {window. clearInterval (k) ;}}; return {init: function (options) {options = options |{}; var time = options. time? Options. time: 0, interval = time/100; loader. classList. add ('run'); k = window. setInterval (counter, interval); setTimeout (function () {loader. classList. add ('done') ;}, time) ;}}} (); Loader. init ({// If you have changed the @ time in LESS, update this number to the corresponding value. measured in miliseconds. time: 10000 });View Code

Download demo source code online

CSS3 3D luminous switching button simulation is very realistic

This CSS3 3D switch button still works very well.

Core CSS code:

. Switch input {top: 0; right: 0; bottom: 0; left: 0;-ms-filter: "progid: DXImageTransform. microsoft. alpha (Opacity = 0) "; filter: alpha (opacity = 0);-moz-opacity: 0; opacity: 0; z-index: 100; position: absolute; width: 100%; height: 100%; cursor: pointer ;}. switch {width: 180px; height: 55px; position: relative; margin: 100px auto ;}. switch label {display: block; width: 80%; height: 100%; position: rel Ative; background: #1F2736;/* #121823 */background: linear-gradient (#121823, # 161d2b); border-radius: 30px 30px 30px 30px; box-shadow: inset 0 3px 8px 1px rgba (0.5, 0, 0.5), inset 0 1px 0 rgba (255,255,255, 0, 0.2), 0 1px 0 rgba ); -webkit-transition: all. 5 s transition; transition: all. 5 s success ;}. switch input ~ Label I {display: block; height: 51px; width: 51px; position: absolute; left: 2px; top: 2px; z-index: 2; border-radius: inherit; background: #283446;/* Fallback */background: linear-gradient (# 36455b, #283446); box-shadow: inset 0 1px 0 rgba (255,255,255, 0.2 ), 0 0 8px rgba (0.3, 0, 0.4), 0 12px 12px rgba (, 0,);-webkit-transition: all. 5 s transition; transition: all. 5 s success ;}. switch label + span {co Ntent: ""; display: inline-block; position: absolute; right: 0px; top: 17px; width: 18px; height: 18px; border-radius: 10px; background: #283446; background: gradient-gradient (# 36455b, #283446); box-shadow: inset 0 1px 0 rgba (0.2, 0, 255,255,255), 0 1px 0 rgba, 0.1), 0 0 10px rgba (185,231,253, 0), inset 0 0 8px rgba (0.9, 0, 0.3), inset 0-2px 5px rgba (, 0, 0 ), inset 0-5px 5px rgba (0,0, 0, 0.5);-we Bkit-transition: all. 5 s loading; transition: all. 5 s loading; z-index: 2;}/* Toggle */. switch input: checked ~ Label + span {content: ""; display: inline-block; position: absolute; width: 18px; height: 18px; border-radius: 10px;-webkit-transition: all. 5 s transition; transition: all. 5 s elapsed; z-index: 2; background: # b9f3fe; background: gradient-gradient (# ffffff, #77a1b9); box-shadow: inset 0 1px 0 rgba (0, 0, 0, 0.1), 0 1px 0 rgba (255,255,255, 0.1), 0 0 10px rgba (100,231,253, 1), inset 0 8px rgba (61,157,247, 0.8 ), Inset 0-2px 5px rgba (185,231,253, 0.3), inset 0-3px 8px rgba (185,231,253, 0.5);}. switch input: checked ~ Label I {left: auto; left: 63%; box-shadow: inset 0 1px 0 rgba (255,255,255, 0.2), 0 0 8px rgba (0.3, 0 ), 0 8px 8px rgba (0,0, 0, 0.3), inset-1px 0 1px # b9f3fe;-webkit-transition: all. 5 s transition; transition: all. 5 s elapsed ;}View Code

Download demo source code online

CSS3/SVG Texture Background small icon hollow button

Download demo source code online

HTML5/CSS3 pop-up prompt box built-in function button

This HTML5 tutorial is very practical. It is a pop-up prompt box with animation effects, and the style is also very good.

Core jQuery code:

Function closeMessage (el) {el. addClass ('is-den');} $ ('. js-messageClose '). on ('click', function (e) {closeMessage ($ (this ). closest ('. message ');}); $ (' # js-helpMe '). on ('click', function (e) {alert ('help you will, young padawan '); closeMessage ($ (this ). closest ('. message ');}); $ (' # js-authMe '). on ('click', function (e) {alert ('okelidokeli, requesting data transfer. '); closeMessage ($ (this ). closest ('. mes Sage ');}); $ (' # js-showMe '). on ('click', function (e) {alert ("You're off to our help section. see you later! "); CloseMessage ($ (this ). closest ('. message ');}); $ (document ). ready (function () {setTimeout (function () {closeMessage ($ ('# js-timer') ;}, 5000 );});View Code

Download demo source code online

HTML5 columnar charts can combine data of multiple charts

It is also an HTML5 chart application with a common appearance, but its merging function is very powerful.

Download demo source code online

HTML5/CSS3 Tooltip Animation

A CSS3-based Tooltip tool with fade-in and fade-out animations.

Core CSS code:

. Tooltip p {font-family: sans-serif; font-size: 14px; font-weight: 300 ;}. tooltip {width: 120px; padding: 10px; border-radius: 3px; position: absolute; box-shadow: 1px 1px 10px 0 # ccc; margin:-500px 0 0 0-20px; background: # fff;-webkit-transition: margin. 5 s bytes-in-out;-moz-transition: margin. 5 s bytes-in-out ;}. item: hover {background: # 6d643b ;}. item: hover. tooltip {margin:-145px 0 0-20px;-webkit-transition: margin. 15 s queue-in-out;-moz-transition: margin. 15 s bytes-in-out ;}. arrow {position: absolute; margin: 10px 0 0 50px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid # fff ;}View Code

Download demo source code online

HTML5/CSS3 image segmentation mask slider Animation

This application can cover any element above the image and specify the covered part.

Core jQuery code:

(Function ($) {$ (function () {$ ('. code-wrapper '). on ("mousemove", function (e) {var offsets = $ (this ). offset (); var fullWidth = $ (this ). width (); var mouseX = e. pageX-offsets. left; if (mouseX <0) {mouseX = 0;} else if (mouseX> fullWidth) {mouseX = fullWidth} evaluate ({left: mouseX, transition: 'none'}); transform ({transform: 'translatex ('+ (mouseX) + 'px)', transition: 'none'}); (this).find('.design-image'{.css ({transform: 'translatex ('+ (-1 * mouseX) + 'px)', transition: 'none'}) ;}); $ ('. divider-wrapper '). on ("mouseleave", function () {detail (this).parent().find('.divider-bar'detail .css ({left: '000000', transition: 'All. 3 s '}); Certificate (this).find('.design-wrapper').css ({transform: 'translatex (50%)', transition: 'All. 3 s '}); Certificate (this).find('.design-image').css ({transform: 'translatex (-50%)', transition: 'All. 3 s '}); // end of document ready}) (jQuery );View Code

Download demo source code online

Written by yamoo, HTML5 + CSS3 + the beauty of jQuery applications (Korea). Case Resources in the book

People's post and telecommunications official website provides source code download

How does jquery implement the html5 range sliding value code?

You can directly use the slider in jquery ui.