CodemySite_Web development

ZoomIt.js is a jQuery plugin which could magnify the image dynamically. gitHub here Step1: link jquery zoomIt.css and zoomIt.js <link rel="stylesheet" media="all" href="dist/styles/zoomit.css" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="dist/scripts/jquery.zoomit.min.js"></script> Step2: html html img id for selecting in script src links small picture data-zoomed links big picture Step3: js js Initialize the plugin Options img  ( jQuery Object ) - The "unzoomed" image object that is intended to zoom src  ( String  |  Function ) - May either be a string or a function that returns a string of the path to the large image to be zoomed. class  ( Object ) - Object containing different class names used by the plugin container  ( String : Default  zoomit-container ) - Class to be used for the container loaded  ( String : Default...

This plugin is a lightweight pop up with javascript. github here I test all the usual applications here and found out it's very easy to use and looks good if you combine with bootstrp. Demo😜 Step1: link spop.css and spop.js also link bootstrp for more easy and fancy button styles. also link jquery for click events which is handy. in head in body Step2: html html With buttons and id individual, it's easy to select in the script.And with bootstrap class name for buttons, they show fancy here. CSS a little stylish for test position. css Step3: js js Four types of basic call functions.  Default success warning error js group It's same for spop call of each. js callback When the pop opens, the button appends the word"lol" for one click. When the pop closes, another pop shows success messages and close automatically. js event Call the close event with data-spop="close". Options : Templete:...

A rotating slider with controls use circle ckip-path.   Note, because Internet Explorer/Edge do not support the Clip-path property, this will not work in those browsers. github here step1: link rotating-slider.css , jquery and rotating-slider.js step2: html html Build the DOM : .rotating-slider>ul.slides>li>.inner step3: css Give 6 slides different colors or backgrounds. step4: jq Select the rotating-slider and apply the roatingSlider plugin. Set the attribute such as height, width and speed and so on. The default attributes below,change as you wish. $('.rotating-slider').rotatingSlider({ autoRotate: true, autoRotateInterval: 6000, draggable: true, directionControls: true, directionLeftText: '&lsaquo;', directionRightText: '&rsaquo;', rotationSpeed: 750, slideHeight: 360, slideWidth: 480, /* Callback Functions */ beforeRotationStart: function(){}, afterRotati...

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Author Mary Lou Github here I tried the first demo here, and more demos please check github Step1: link anime.js and imagesloaded. (when you need loading styles) Step2: html Inside the sildeshow, there are slides and slidenav html Inside the slides, there are four slide div with detail info. html Step3: css complete css ,please check codepen. The most important css is shape class name styles. css Step4: js js slides and shape have different durations,and frameFill is color white. css initialize the DOM variables. css The function creats frame with svg and set attributes. update frame when resize. with anime.js, the slides eases smoothly. More anime.js document here See the Pen Animated SVG Frame Slideshow by Yifang Di ( @diyifang ) on CodePen .

With css3 transition, the pictures change the border style and scales,whichc looks like the mask layer effects. Step1: link the bootstrap.css and font-awesome.css(id you want to use font-awesome icon) css links Step2: html html .box-content is the mask layer content. and inner is the descriptions of pictures. box-content icon is from font-awesome with "fa" class. Step3: css css .box:before---the white transparent border. When hovering,the border width turns 30px to 1px. css .box:after--- the white border besides the transparent border. When hovering,the borders hide. css The images zoom in to 1.2.When hovering, the images shrink to normal. css .box-content---inside the two borders.When hovering, the position changes 6px with transitions. css .box-inner-content---the description part hides at first, and show up when the box hovering. css css Make the stylish for the detail tag for inside for box-inner-content. ...

This jquery plugin could show and hide password with bootstrap2 or bootstrp3 version. github here step1: link font-awesome.css(or you can just use  Bootstrap's Glyphicon font  ) link jquery library, bootstrap-show-password.js step2: html html Initialize plugin with data-* Name Attribute type default description - data-toggle String password Active password without writing JavaScript. placement data-placement String after The placement of show/hide icon, can be 'before' or 'after'. message data-message String Click here to show/hide password The tooltip of show/hide icon. white data-white Boolean false Show the white icon. (Just work in bootstrap v2) eyeClass data-eye-class String glyphicon Base eye icon class. eyeOpenClass data-eye-open-class String glyphicon-eye-open Open eye icon class. eyeCloseClass data-eye-close-class String glyphicon-eye-close Close eye icon class. eyeClassPositionInside data-eye-class-position-inside Boolean ...

A simple jQuery snow plugin with customizable options and elements. Works with pure HTML elements. Can be used with FontAwesome or any other icon font as well as images. This is the best website styling during Christmas and easy to customs the speed and icons. Github here Step1: link font-awesome.css  ,jquery library and jquery-snow.js in head in body step2: HTML Make it happend at body or any tag which can fetch using target attribute at javascript. step3: css css If make this happends in the body,you should size the html and body. step4: js After the DOM is loaded, it's time to affect the plugin. <script type="text/javascript"> var snowEffectInterval = jQuery.fn.snow({ // min size of element (default: 20) minSize: 30, // max size of element (default: 50) maxSize: 60, // flake fall time multiplier (default: 20) fallTimeMultiplier: 20, // flake fall time difference (default: 1...