Js,css,html Production homepage, video carousel, hidden click and so on.

Throughout the project, a total of 1000+ code has been written, which can be more easily optimized. The entire homepage interactive effect can be basic, including Carousel, video, click Change Shape, move into mask, waterfall stream load slide, rotate and so on. The carousel navigation has not been completely finished and has been temporarily pushed toward the right. Personal feel that the main difficulty is that the function and application of JS, CSS familiar with, mainly repetitive work, JS involved in some of the calculation is rather difficult. In the whole code there are detailed comments, interested friends can see.

Project: Http://pan.baidu.com/s/1miaVde4

Here is the implementation of the menu shape after the click "Three" into "Ⅹ"

A total of 4 div (as a line) between the Middle 2 div coincident, click to hide the upper and lower lines, while the middle of the rotation

CSS code:


#menu Div:nth-child (1) {
    top:0px
}

#menu Div:nth-child (4) {
    Top:16px
}

/* Click the menu to initialize the definition */

#Menu-hidden {
    width:1368px;
    Background-color: #55F7D7;
    height:667px;
    position:fixed;
    top:0px;
    right:1350px;
    z-index:14;
    -webkit-transition:right 0.4s linear;
}

JS Code:

var menu = document.getElementById ("menu");
Menu.onclick = function () {
var Mhidden = document.getElementById ("Menu-hidden");
var mdiv = this.getelementsbytagname ("div");
Push it when clicked
According to the judge, whether the menu clicked, No click is hidden on the line of the Div white line, the middle of the rotation
if (mdiv[0].style.opacity! = "0") {
mdiv[0].style.opacity = 0;
mdiv[3].style.opacity = 0;
Mdiv[2].style.webkittransform = "Rotate (45deg)";
Mdiv[1].style.webkittransform = "Rotate ( -45deg)";
Mhidden.style.right = "0px";
Disable scroll bars
Document.documentElement.style.overflowY = ' hidden ';
}
When you click again, resume initialization
else {
mdiv[0].style.opacity = 1;
mdiv[3].style.opacity = 1;
Mdiv[2].style.webkittransform = "Rotate (0deg)";
Mdiv[1].style.webkittransform = "Rotate (0deg)";
Mhidden.style.right = "1350px";
Restore scroll bar
Document.documentElement.style.overflowY = ' auto ';
}
}

Waterfall flow when the first load, a rise in the sliding effect in the layout, you can move all of your pictures down a little bit, I here is 200px and then mainly through the scrolltop control, through this attribute value to judge, add a rise effect, the core JS analysis is good. You can see the source code in detail.

JS Code:
var one = SetInterval (Scrollevenlistener, 2);//2 milliseconds call once, repeatedly judge
function Scrollevenlistener () {
    var ODIs = Document.body.scrollTop;
    var line1 = [document.getElementById ("LPc-1"), document.getElementById ("Mpc-1"), document.getElementById ("Rpc-1")] ;//Get the ID of my first row of pictures
    if (ODIs >= 574) {
        for (var i = 0; i < line1.length; i++) {
            parseint whether it is a string or a number, when the first non-digit is encountered, all previous digits are taken out
            var NH = parseint (Document.defaultView.getComputedStyle (line1[i], null). top);
            Line1[i].style.top = NH-200 + "px";
All pictures rise, clear this function
            if (i ==line1.length-1) {

                Clearinterval (one);
            }
        }
    }
}

Js,css,html Production homepage, video carousel, hidden click and so on.