CodemySite_Web development

When shopping online or browsing the galary,we'd like to zoom in the image which takes small space for neat view or loading speed related resons. And I found two plugin which is convient works well and sufficient,named intense-image.js and zooming.js.I will record below one by one. First one is intense.js. Github source DOWNLOAD Details: STEP1: link intense.js in the body. link dowload Github STEP2: An image derived from library with class name. data-title and data-caption are the caption of the image at absolute position. When the page is loaded,the image excutes the Intense() function. You can change cursor images and size in Css. Second is zooming.js: Github source DOWNLOAD Details: STEP1: link zooming.js in body link download Github  and more document STEP2: The image wrapped in the grid. After the content is loaded,the zoomimg function excutes with customized options. I changes fews ,such as background color,background opacity,resi

Page here Github Download STEP1: HTML Three columns contain cover with title and logo image, and the content is the menu lists hidden first. STEP2: CSS Google Fonts imported. The container display flex. Each screen ocupied same space with flex-grow:1. The pink squre centered all the tag inside. Different background color for screen and content. When hovering, the screen expand to 5 times. The content can not see at first.When hovering the button and the content, the content show up with animation.

Slider without Javascript. Learned from Online Tutorial Page here Github Download Step1: html There are five slide section among div classed slider. The container is the paragrapy outside the silder. Each slide gets some words content and an image as background showing. Step2: CSS  Google font imported. The slider takes 100%width with position. Each slide should be hidden with infinite animation named slider. 0%-5% transform visibility from hidden to visible,meanwhile the opacity 0 to 1. 5%-25% stay visible  25%-30% transform visibility and opacity  The style of image and content which is upper layer of image. The animation delay every four seconds for each slide. More CSS slider  examples: View swither without js  CSS slider without js

Thirteen days left for Christmas,it 's good time to glow friends and family 's  hearts.  Page HERE Github DOWNLOAD STEP1: html  Each letter wrapped in tag span.   = space STEP2: css  Google Fonts import. The background is a centered image. And make sure everything inside is in the center with display flex. Outline is the inner border of container. Border is the out border of container. Each letter animates by order with animation-delay 0.25s. There are 18 spans,so the delaytime total is 3.75s which is the exact animation duration time.  The animate session: First and last time,the color is white , blur, text-shadow glowing. Other time, the text is normal without fancy glowing. Responsive format for different screen devices with @media.