CodemySite_Web development

It's a convenient  way to show video when users scroll the page, which they won't miss the video. Step1: link the Jquery in the bottom of the body <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> Step2: The mp4 video in the div named videoBox derived from the file. Then the article which ever you like is to strench the page height for enough length to scroll. html The videoBox has a border and the video verticle-align:bottom is to fit the border. Setting the two situations call in and out ,which are when doesn't scroll and scroll to the fixed scrollTop. When users scroll to a bigger height, the video should be fixed at the right bottom of the page and the first layer with animations each. css Step3: js ha is the total height of the length of videoBox top from page and the height of the videoBox. When scroll the page,if the top distance larger t

Tippy is a lightweight and pure JS tooltip library which can convert different themes and animations. The users could customer the html in it. The official Github here Step1: link the tippy.css file from cdn: <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/0.3.0/tippy.css"> link the tippy.js in the bottom of body: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/0.3.0/tippy.js"></script> Step2: html Name each button an id and title you want to show. css A little stylish in the head to make sure in the middle of the page. Step3: js Using new Tippy() to set the attributes. Parameter: Event: new Tippy( '.tippy' , {    beforeShown: function () {      // When the tooltip has been triggered and has started to transition in    },    shown: function () {      // When the tooltip has

It's really popular to apply CSS3 moving effects in nowadays website,which looks amazing compare to the static status. The official Github here Step1: link the bootstrap I've used in this demo: <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css"> link the script files of jQuery and smoove from cdn in the end of body section: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.9/jquery.smoove.min.js"></script> Step2: HTML html Because of the bootstrap layout, I used the class row and col-md-4 to seperate the sections. All the items you want css3 fancy effects should have the attributes setting. Then doing a little s

Foxholder.js Github here Step1: link the stylesheet in the head. <link rel="stylesheet" type="text/css" href="foxholder-styles.css"> link the jQuery library and foxholder.js file in the body <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="foxholder.js"></script> Step2: HTML < div class = " your-class " > < input id = " your-id-1 " type = " text " placeholder = " My Input " /> < textarea id = " your-id-2 " placeholder = " My Textarea " ></ textarea > < button type = " submit " >Submit</ button > </ div > Note! Use only  tag for submit buttons html html html 15 different types of placeholder above. The point is the div with a className should be the parents o

It's a popular way to verify the users security when they login or register. The Github address Step1: Link jQuery library cause it's basic for plugin.Download or link online address https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js Download unlock.css and unclock.js and link them in the file. Step2: HTML Bulid a div named a id or class which can be grabbed in the js part. Step3: JS js Using slideToUnlock to link the unlock.js. width:  the width of bar height: the height of bar text: the text content in the bar bgColor: background color of bar progressColor: the bar color after you drag through it handleColor: the color of block where you drag succColor: the bar color after the verification is succeed textColor: the color of messages succText: the message when the verification is succeed succTextColor: the color of message when it success succFunc: When the verification is succeed, you can recall a function Tips: Don't