CodemySite_Web development

  A jQuery plugin that provides a great set of features like Auto-close, Ajax-loading, Themes, Animations, and more. Official site How to use it? Step1: jquery, jquery-confirm js and CSS can do with nom, bower, or CDN $ npm install jquery-confirm or $ bower install craftpip/jquery-confirm or <script src="// https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js "></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> Step2: my HTML and CSS I set up a button, you can do any DOM you want. Step3: JavaScript select the DOM,and fire up with  .confirm() , also can do  .dialog()  or  .alert() content:the box content title: the title in the content icon: the icon in content, can do with font-awesome like my code, remember to link the font-awesome CSS fil...

Strip is a Lightbox that only partially covers the page. This is less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience. Github Documents Step1: link latest  jQuery library Link strip.css and strip.js Step2: usage in HTML One image with caption and options selected. More options  here Multiple images for a group with captions. Loop images sliders. Step3: A little css dressing Quick Usage &commercial use free!  x

TextyleFLIP is a jquery Plugin to animate the text withe CSS3. Github How to use it? Step1: Link the jquery.js and textyleF.js Step2: HTML It must contains the text you wanna animate. Step3: CSS basically set up And the two decorate lines are pseudo elements. Actually after applying the plugin which will seperate every text into seperated letter, the span tag will add to each letter.So it's easier to animate them. Step4: call the plugin with jQuery There are several options and callback function which can be customized. See the Pen textyleFLIP.js by Yifang Di ( @diyifang ) on CodePen .

  Github here According to a plugin named jquery.ssMenu , I thought the sticky side menu should be concise and responsive for mobile. Step1: link the font awesome for the icons in front of each list. and the demo css file and jquery library at the bottom of body for Javascript  Step2: html Menu is a list with <a> tag inside and icon embeded seperately. Step3: css Linked the google font with @import The menu is fixed at the left side of browser. Class .open is the main classname manipulated in the Javascript part. With some hovering motion, the position and the color with be changed. Any change is animated with transition,more smoother. The badge is the red reminder besides the icon. More color themes version is easy to set with background color. The browser in mobile is different layouts which is at the top fixed. Step4: JS I deleted some part of original code which I feel like useless. You...

A cool toggle radial menu with TweenMax.js from COIDEA STEP1: LINK jq library and tweenmax.js STEP2: html The navigation contains the trigger buttons for toggle and the menu lists. STEP3: css The trigger button placed at the absolute position. Each line of the trigger button animates delay. The same animation with close button. And When trigger button is opened, the lines inside trigger dispear with delay animation. Each list of menu has different gradient background color. The same changes when hovering the menu list. STEP4: js Initial all the DOM we need. With TweenMax.js ,it's first to set a timeline for all the animation. TweenMax.to(target,duration,vars) An ease controls the rate of change during tween. There are several ways to ease ,such as back,elastic,bounce and so on. More TweenMax.js Documents HERE See the Pen radial menu with TweenMax.js from coidea by Yifang Di ( @...

There are amount of slides plugins nowadays,such as flexslider.js ( the article here ) which is easy and bundle. And anther kind of slides are based on pure javascript ,such as this animated framed slideshow(the article here ). Slick is fully responsive and functional slide plugin which is also friendly to mobile touch.And it has a Wordpress version. Try below Step1: link the slick.css and slick-theme.css if you need link the script file slick.js and don't forget to insert the jquery first Step2: Html I put eight images within the slide section.. Step3: css Step4: js initialize the slick plugin. More setting,events and methods check document here The demo github here