CodemySite_Web development

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

Theme changing with one click is built with Sass and a little bit of Javascript.Forked from Kaio Almeida. html Toggle button is a input checkbox with label hidden. Sass Hide the input connected with the checkbox. Set the button(Label) a relative shape with pseudo element. When the input is checked, add the animation to label. JS Select the input id. When it changes, then the checked attributes will be added, according to the sass part, and the attribute named data-theme will toggle,meanwhile the transition function execute. Transition applied with cubic-bezier way in sass. In sass, the data-theme attribute changes the color ,background color and button color. See the Pen Easy Dark Mode with SASS by Yifang Di ( @diyifang ) on CodePen . x

This is an easy-use plugin to add darkmode to your website. I'm suprised it's basicaly depends on mix-blend-mode to modify the color sets quickly. To make the website more customer,it's a nice try to make some difference without abundent of css code. How to add this plugin? With cdn related: < script src = " https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js " > </ script > < script > new Darkmode ( ) . showWidget ( ) ; </ script > Or with npm : npm install darkmode-js Then add the following javascript code: import Darkmode from 'darkmode-js' ; new Darkmode ( ) . showWidget ( ) ; And Options is customized with attributes: var options = { bottom : '64px' , // default: '32px' right : 'unset' , // default: '32px' left : '32px' , // default: 'unset' time : '0.5s' , // default: '0.3s' mixColor :

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 .

Recently I am reviewing the Javascript with the course called The complete Javascript Course 2019:build real project from udemy. Online demo Keep up following the basic knowledge and projects from it. The final solution is the Pig game with two dices and two players. The rules: HTML: Two players panel with scores and current score. Three buttons for resetting the game,rolling the dices and holding the current players' score/ At the bottom is the Final scores for winners' reach point.Normally the rules' final score is 100. CSS: The backgound color and the dot are changing when switching the player,because of the classname active added. Set up the position of two dices and the bottom final-score style. Javascript: Initial the original setting in function init() The scores and current score are both "0".And the dices don't display at first place. If there is a winner last round,basically clear all the old records.

Splitting is a JavaScript microlibrary with a collection of small  built-in plugins  designed to split (section off) an element in a variety of ways, such as  words ,  characters ,  child nodes , and  more ! In this demo,I tried with default characters and image cells plugins.  Splliting official Github   and more documents here Step1: link cdn in the head(that's the easiest way or you can install with npm) Step2: html  the target you want split add the attribute "data-splitting". Splitting will automatically add a  splitting  class to the targetted element after it's been run. Each  plugin  will add their own classes to splits/parent as needed (  char  for  chars ,  word  for  words , etc. ) "data-row" and "data-colums" are attributes of grid setting. Step3: css animation parts After splitting the text, each character named char animates with delay. Step4:   Js  Basically apply the splliting.js with Splittin

Official website   Github Install  With Git clone direct to the location your project is and clone in the file Then there will be a file named ikonate If you'd like to customize the icon border ,size,style and color. Check the content in the website and export the icon you need. Also a dark version icon's choice. After exporting the zip file, unzip for three files which are three ways to apply. Here I tried all of them: There are three ways to import this plugin.  1. With <img> Link the svg to the image.Customize the size with css 2.With inline svg Copy the svg from the file named inline . 3.With svg sprite external Link the spritesheet with <use> And don't forget to style svg with css for 2nd and 3rd method: The demo code resources Download

Editor.js is a Block-Styled editor. Blocks are structural units, of which the Entry is composed. For example,  Paragraph ,  Heading ,  Image ,  Video ,  List  are Blocks. Each Block is represented by Plugin. We have  many  ready-to-use Plugins and a  simple API  for creating new ones. My deom is the text editor which can display saved data on screen. Step1: link latest editor.js in body,and each plugin you need attached. from cdn Step2: html two sections display:left is editor,right is display board. Step3: scss rendering Step4: js Grab the click save button. Init the EditorJS with default objects. There are ten types of plugins: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.