CodemySite_Web development

It's a 3D animation which looks amazing whatever for quotes or images.Here I  build a demo about lancome cosmetics with articles and pictures. First is layout for html page with javascript. Basically, link the css stylesheet and jquery files. The html is a section named source using javascript to add data. The javascript is divided into two parts: append data from source.js , applying foldscroll.js . Then,the css part decorates all pictures and articles look good. At last, let me describe the source.js file,adding whatever you want add into html which is easier to manage all the data.  More information can get  from  https://github.com/soulwire/FoldScroll My demo can be download from  https://pan.baidu.com/s/1hrGdJak

如何应用插件jarallax.js？ 无意之间看到这款插件，觉得用起来很方便，只是制作简单的动图，形成视觉差，还是不错的选择。以下是我做的demo，是关于动画主题，Q萌的妹纸是两个png图片，文字部分保持固定。当滚动滚轮时， 两个图片会根据设置的高度进行即时滚动。 关于基本的HTML和css部分大家都可以发挥自己的想象编写。 body部分主要分为content,bg,girl1,girl2。 onload=init()是为了在body加载的时候载入JavaScript函数。 CSS就是各种设置大小，背景等内容，只要将背景设置成position:fixed，则更加容易尝试视觉差效果，用z-index将各部分层次分开，具有叠加效果。 在head部分连接外部css和jq数据库。JavaScript部分，主要是一个init函数，利用语句jarallax.addAnimation实现，括号中第一个是动画的ID或者CLASS名称，第二个是用[]包裹起来的变化。 addAnimation(selector, jarallaxKeys) version added: 0.1 selector: A string containing a jQuery selector expression. JarallaxKeys: An array containing multiple objects with a progress property and additional CSS properties. jarallax.js不断更新，每一版本都更新过一些内容。以上是我使用的最基本的，详细信息可以查看官网。 http://www.jarallax.com/?page=documentation-jarallax   

Only click some websites, you can earn money quickly wherever you are. at  http://www.clixsense.com   by spending only 10 minutes a day on ClixSense. So if you are looking for  ways to make money online , you need to add this way in your list as one of the option because it takes not more than 5-10 minutes of your daily time. 1. By viewing ads Get paid to view ads in the main income option in ClixSense. When you click on view ads option, you will find number of ads there. Just refer this image- 2. By Completing Surveys You can click on the  Surveys  tab, check the available surveys and complete them to earn money. You will get paid $0.5 to $1 for completing a survey. When you signup, you will get at least 3-4 surveys. 3. By completing different offers You can also earn in ClixSense by completing different types of offers. These offers are available from different types of websites. E.g. you will get paid for signup on Snapdeal, you can e...

The original css is from: https://github.com/kazzkiq/balloon.css First, link the balloon.css to your head,and basic main.css.Design the layout of your website,like me.  I make the DOM body>.main>.container>.pos>h2+button                                                                 >.len>h2+button                                                                 >.icon>h2+button css is  basic style, you can use whatever you like. Because of the font-awesome icon class .f, the button is different with others.To keep it look great,I restyle the .fa class css.  For positioning, use  data-balloon-pos  attribut...

Speaking of CSS3 hover animations, many of images slip in my mind. One of the most useful  hover animation seems like a slide combined images and text. Here is my small example,I named it Mr,PIG's profile.  About the layout of this project is basically simple. I named the image "1.jpg".And link to main.css to the html file. first part is about image.The important point is the max-width so that the image contains in the effect1.  second part is about text. To make sure the text in the middle of the box, I used the display flex and set the top -100% to hide the text.  The last part is about <p> and .btn , it's kind of basic css style to change the background-color and font-color when you hover it. 

I found out a useful flyaway.css which can apply to your website for active animation. When you wanna send an email or something, every feedback from php could be shown  by the cute animations. Here is my easy example: The image I picked up from font Awesome.First link the font-awesome database, the css stylesheet, the original javascript  min and the file flyaway.js which I download from the author 進擊的燊. The  githubaddress： https://github.com/lushen/flyaway/tree/master   from 進擊的燊 I actually change the .one to .bind. I'm not sure but the outcome doesn't affect. What I really got confused about this js is the .bind(....),so I check it on stack.Following is answer. The animationend events  are  case sensitive, and vary from browser to browser. The official spec is all lowercase, though the various browser prefixes even vary in their implementation too. Mozilla : mozAnimationEnd Webkit : webkitAnimationEnd Opera : oanimatio...