sdesai · December 12, 2015 07:58
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
    <head>
        <style>
            html, body {
                padding:0;
                margin:0;
            }

            #container {
                position:relative;
            }

            #box1, #box2 {
                padding:0;
                margin:0;
                border:none;
                position:absolute;
                width:100%;
                background-color:#eee;

                -webkit-transform: translateZ(0);
            }

            #box1 {
                height:10000px;
                background-image: -webkit-linear-gradient(top, #555 0%, #000 100%);
                width:100%;
                left:-100%;
                z-index:1;
                border-bottom:10px solid yellow;
            }

            #box2 {
                height:2000px;
                background-image: -webkit-linear-gradient(top, #f00 0%, #00f 100%);

                border-bottom:10px solid red;
            }

            #hd {
                position:fixed;
                width:100%;
                z-index: 10000;
                background-color: #00ff00;
                height:1em;
            }

            #bd {
                padding-top: 1em;
            }
        </style>
        <script type='text/javascript' src='http://yui.yahooapis.com/3.7.3/yui/yui.js'></script>
    </head>
    <body>
        <div id="hd">Header</div>
        <div id="bd">
            <div class="container">
                <div id="box1"></div>
                <div id="box2"><div>
            </div>
        </div>

        <script>
            YUI().use("node", "event", "transition", function(Y) {

                var box1 = Y.Node.one("#box1"),
                    box2 = Y.Node.one("#box2");

                box2.on("click", function() {
                    box1.transition({
                        transform: "translateX(100%)",
                        duration: 0.3,
                        easing: "ease-out"
                    });
                });

                box1.on("click", function() {
                    box1.transition({
                        transform: "translateX(0px)",
                        duration: 0.3,
                        easing: "ease-out"
                    });
                });
            });
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html, body {
	padding:0;
	margin:0;
	}

	#container {
	position:relative;
	}

	#box1, #box2 {
	padding:0;
	margin:0;
	border:none;
	position:absolute;
	width:100%;
	background-color:#eee;

	-webkit-transform: translateZ(0);
	}

	#box1 {
	height:10000px;
	background-image: -webkit-linear-gradient(top, #555 0%, #000 100%);
	width:100%;
	left:-100%;
	z-index:1;
	border-bottom:10px solid yellow;
	}

	#box2 {
	height:2000px;
	background-image: -webkit-linear-gradient(top, #f00 0%, #00f 100%);

	border-bottom:10px solid red;
	}

	#hd {
	position:fixed;
	width:100%;
	z-index: 10000;
	background-color: #00ff00;
	height:1em;
	}

	#bd {
	padding-top: 1em;
	}
	</style>
	<script type='text/javascript' src='http://yui.yahooapis.com/3.7.3/yui/yui.js'></script>
	</head>
	<body>
	<div id="hd">Header</div>
	<div id="bd">
	<div class="container">
	<div id="box1"></div>
	<div id="box2"><div>
	</div>
	</div>

	<script>
	YUI().use("node", "event", "transition", function(Y) {

	var box1 = Y.Node.one("#box1"),
	box2 = Y.Node.one("#box2");

	box2.on("click", function() {
	box1.transition({
	transform: "translateX(100%)",
	duration: 0.3,
	easing: "ease-out"
	});
	});

	box1.on("click", function() {
	box1.transition({
	transform: "translateX(0px)",
	duration: 0.3,
	easing: "ease-out"
	});
	});
	});
	</script>
	</body>
	</html>