CodemySite_Web development

  AOS scrolling animated library template apply.  About the animated scrolling library has lots of options. I'll list some below: delighter.js ---CSS3 animation effects when scrolling scrollreveal.js ---animated elements when scroll page example page(fortnite gun gallary) Parallax with Javascript Laxxx.js ---a light weight Plugin to create animation when scrolling AOS animation demo smoove.js --Gorgeous CSS3 Scroll Effects jquery-scrolla.js ---a jQuery plugin for reveal animations when scrolling Download the landing template from tailwind  . There are 4 sample pages and 4 kinds of projects,such as html,angular,react and vueJS. I grab the html page.  My demo code Github. AOS library Github In this demo, I only set the attibutes to the div I want animate in the html tag. such as "data-aos" and "data-aos-delay". Initialize AOS: AOS . init ( ) ; // You can also pass an optional settings object // below listed default settings AOS . init ( { // Global sett...

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.

First step to become a front-end web developer is mastering how to slice the psd file and convert it to html. Here is my summary about how to do that.  The application: Photoshop CC .  The psd file which I download from the Internet. You can download my example psd file from  https://pan.baidu.com/s/1mhEAzva Way1. It's the traditional way based on the basic function in PS called slice tool. Slice each part you want like this .gif Then ctrl+shift+s or store as web format.  change the slice into all user slice. My slice file is shown below.All the pictures are saved in the file images. Way2. more advanced function called Script. export to file...  open the object file to save pictures and type as PNG-24. Then click run.wait...You may wait a while depends on the psd content and size.  Then,my slice file is shown below. Way3. The most convenient way only supplied on Photoshop CC version.   Edit>>Preferen...