Posts

Showing posts from March, 2019

fake3d website based on WebGL

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

sticky side menu with Javascript

Image
  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 can chan

responsive full screen autoslider with Javascript

Image
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