CodemySite_Web development

I built my own website with this fake 3D image effect with webGL. The original webGL source code  Home site code: HTML Remember link the app.js file at the end of body. The div named gl is the position with webGL. You should have two images:original picture and map one.  How to edit the image in Photoshop? Open PS  Go to image-->adjustment-->gradient map... You can select black/white mode or custom the gradient color,I picked grey here. And here we have two pbackground images here. Next , conclude the webGL files. lib and shades And the motion effect will work.

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

I've tried so many demos about slider with or without libraries. Here is other slider demos for reference: carousel with html,css and javascript css animation slider slick.js---fully functional slides example Rotating Slider jQuery Plugin Javascript Animated Frame Slideshow xSlider.js---automatic slider plugin with jQuery View Switcher without JavaScript Css Slider Without JavaScript flexslider.js demo swiper.js demo---autoslider Auto Slider with Javascript

Not all websites' layouts are obsessed with Bootstrap now. More ways to show the power of CSS nowadays. The grid layout can be done with float ,flexbox or grid. Also some of the browsers don't support flexbox and grid,but the float is always works widely. Here is the responsive grid template with float , which contains most of layouts display. See the Pen grid template with float by Yifang Di ( @diyifang ) on CodePen . And recently I learned flexbox through a fun game. check  here ,it's free.

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.