CodemySite_Web development

BaguetteBox.js is a  simple and easy to use lightbox script.  GitHub here Step1: link baguetteBox.css and js file <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.css">  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.js"></script> Step2: html Thubnail image should be inside the link which is the original one. data-caption is the words showing below the picture. < div class = " gallery " > < a href = " img/2-1.jpg " data-caption = " Image caption " > < img src = " img/thumbs/2-1.jpg " alt = " First image " > </ a > < a href = " img/2-2.jpg " > < img src = " img/thumbs/2-2.jpg " alt = " Second image " > </ a

This plugin, developed in jQuery, creates the grid of the image and run the animation chosen by the user: fadeIn and fadeOut. It is completely configurable, users can choose the size of the cells of the grid, the speed of the animations, the type of animations etc. GitHub here Step1: link jQuery and gridImageAnimation.js     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>     <script type="text/javascript" src="gridImageAnimation.js"></script> Step2: html A button which has classname and the picture you want to show on the screen. css Basic styles. And the first and third images should be hide before launch the function. Step3: js When click the button,check the className. If the button has the classname called run-demo1, we can recongnize the range of the function processing. Then show the picture you wanna below wit

circleChart.js is a HTML5 circle progress plugin which can be customed of color,size and animation so on. gitHub here Step1: link jQuery and circleChart.js files in the body     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>     <script type="text/javascript" src="circleChart.min.js"></script> Step2： div with id name or class name html the basic html styles css Step3: js circle1 default (data-value=85) circle2,3,4,5 set attributes(someone don't forget "") circle6 ondraw a function after 3 second. See the Pen circleChart.js---a nice and easy to use jQuery plugin for drawing circular charts by Yifang Di ( @diyifang ) on CodePen .

Step1: the header should get an id. html Style the html css The header should be fixed at the top of the page. Set two situation: 1.When scrolldown, the header slide up with transition. 2.When scrollup, the header slide down with transition. Step2: Javascript js scroll_position: current position last_scroll_position: the new position after scrolling Explain the though: When windows hear the scroll, there would be lauch a function which is a if...else if . If the distance of scrollY bigger than the current number and bigger than 60, the header should be romove the slideDown classname and add the slideUp classname. If the distance of scrollY smaller than the cutrrent number which means scroll up,the header should be romove the slideUp classname and add the slideDown classname. Then the last position of scrollY should be given to the current scroll position for next scrolling movement. See the Pen hide and show header when scrolling with js and css3

JqueryRotate.js is a cross-browser jQuery plugin tot rotate image by any-angle with an animation support. GitHub here More documents here Step1: link the jQuery and jQueryRotate.js in the body     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>     <script type="text/javascript" src="jQueryRotateCompressed.js"></script> Step2: These images named different id . html css Step3: js Four types of rotate images: rotate(angle) rotate(parameters) getRotateAngle() stopRotate() 1. rotate(angle)   Rotate to fixed angle eg. $('#i1').rotate(60). 2. rotate(parameters) parameters contains： angle [Number] ：the angle to rotate,default=0 bind [Object] ： bind event animateTo [Number] ：the angle rotating to ,default=0 center [Array] ： rotate based on center duration [Number] :the time last,default=1000 step [Functio

Two types of popular responsive layout:list layout and grid layout, which are based on Bootstrap with jQuery to switch. Step1: link the bootstrap css <!-- Latest compiled and minified CSS -->     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme -->     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> link the font-awesome for icon if you want <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> head link the jqu

jQuery-scrolla.js is a jQuery animations when scrolling,which is based on animate.css . GitHub here Step1 : link the animate.css in the head <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> head link the jQuery and scrolla.js at the bottom of body <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="js/scrolla.jquery.min.js"></script> Step2: html I set the several images at the div named container. The method of this plugin is to add each item which you want to animate a class name and other attributes. data-animate: the animation name according to animate.css plugin data-duuration: the time animation can be lasted data-delay: the time animation delay from beginning Step3: Call scrolla