CodemySite_Web development

More possibilities of animation effects with TweenMax.js inspire me in the project. Github DOWNLOAD Step1: link jq library ,TweenMax.js And fontAwesome.css for this demo Step2: html Seperate the screen to four blocks. When trigger the menu button, the menu show up. Step3: CSS menu-block is actually the full screen which contains four blocks. Set the position of each block and the backgound color. Initialize the width of each block to 0%,so that the animation starts from 0 to each block's percentage of width. Step4: js With tweenmax.js, first is to initialize a timeline. Each block animates the width to 25% in 1.2sec with Power4. Menu list bounce in from the top in 0.9 sec. And the timeline is reversable. Another  Menu example with TweenMax.js  read  

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 ( @...

Parallax is common applying for website,which bring mordern style. Actually it is kind of animation by changing the position of targets when scrolling the page. Github DOWNLOAD Step1: HTML Three images display as list with same class name. data-x and data-y are the attributes for setting in Js file. Step2: css Gradient background. Items in the center of page. Step3: js When window listened scrolling event, there is a function should happend next. Get the target through DOM . Loop all the targets one by one, and get the position of the scroll with pageXOffset and the dataset from html. So the total number of position is the combination of two which based on scrolling and dataset. The last step is to add the calculated position to the style with translate3d. There are tons of plugin for parallax. You can try the plugin named Parallax.js   which is simple to use.

A tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements. Step1: link javascript at the bottom of body Github HERE https://cdnjs.cloudflare.com/ajax/libs/baffle.js/0.3.6/baffle.min.js Step2: html  Step3: css Style the text decently. Step4: JS Apply the plugin with baffle(). Set the characters and the speed of changing text. The process :start , reveal and stop. The reveal time is the duration of animation. See the Pen baffle.js example by Yifang Di ( @diyifang ) on CodePen .

Water ripple effect when click or drag with mouse.  Step1: link the jQuery library and ripple.js  DOWNLOAD Step2: HTML Step3: CSS Step4: JS

I used to write the carousel demo before: Auto slides with Javascript  Javascript animated frame slides And also some slides without Javascript: CSS slides without Javascript View switcher without Javascript CSS animation slider Also some slides with jQuery library: Slick.js  Rotating-slider.js Xslider.js flexSlider.js Swiper.js

D3.js is a Javascript library for visualizing data with different charts.I think it's useful to business data analysis. The most frequent used charts are three types:bar chart, pie chart and line chart. First, Bar chart . Remember to link the d3.js library in html. JS Code:  Data displayed in Array. Set the svg size and add the svg in the html. After built the svg, it's an order to select the rectangular and data,through enter() to add it. Then there is the same to set attributes to rect. The bar filled color is calculated with the number of array. When mouseover the bar which will change the background color displayed separately. Next step is to add label to each bar. The same processing with select rect as text here. Add the text content which derived from array and give it attributes. Try to scale the chart acoording to the svg size, there is a way to scale it with scaleLinear(). See the Pen d3.js simple bar chart by Yifang Di ( @diyifang...