background : url( "../img/opacity0.gif" ) fixed repeat;\r
}\r
\r
+\r
+.slidein, .slideout {\r
+ position : relative;\r
+ width : 200px;\r
+ height : 200px;\r
+ margin : 1em auto;\r
+ background : #000;\r
+ \r
+ -webkit-transition : 0.5s ease-in-out; /* win safari3.2 */\r
+ -webkit-transition : -webkit-transform 0.5s ease-in-out; /* win safari4 delay は指定しない */\r
+ -moz-transition : -moz-transform 0.5s ease-in-out 0s;\r
+ -ms-transition : -ms-transform 0.5s ease-in-out 0s;\r
+ -o-transition : -o-transform 0.5s ease-in-out 0s;\r
+ transition : transform 0.5s ease-in-out 0s;\r
+\r
+ /* http://blog.webcreativepark.net/2012/10/19-161432.html */\r
+ -webkit-backface-visibility : hidden;\r
+ -moz-backface-visibility : hidden;\r
+ backface-visibility : hidden;\r
+}\r
+.slidein .slider {\r
+ -webkit-transform : translate(100px,0); /* win safari3.2 */\r
+ -webkit-transform : translateX(100px) translateZ(0); /* safari4 */\r
+ -moz-transform : translateX(100px) translateZ(0);\r
+ -ms-transform : translateX(100px) translateZ(0);\r
+ -o-transform : translateX(100px) translateZ(0);\r
+ transform : translateX(100px) translateZ(0);\r
+}\r
+.slideout .slider {\r
+ -webkit-transform : translate(0,0); /* win safari3.2 */\r
+ -webkit-transform : translateX(0) translateZ(0); /* safari4 */\r
+ -moz-transform : translateX(0) translateZ(0);\r
+ -ms-transform : translateX(0) translateZ(0);\r
+ -o-transform : translateX(0) translateZ(0);\r
+ transform : translateX(0) translateZ(0);\r
+}\r
+.slider {\r
+ position : absolute;\r
+ top : 0;\r
+ height : 0;\r
+}\r
+.slider div {\r
+ position : absolute;\r
+ top : 0;\r
+ width : 200px;\r
+ height : 200px;\r
+}\r
+.slider-red {\r
+ left : 0;\r
+ background : #f00;\r
+}\r
+.slider-blue {\r
+ left : 200;\r
+ background : #00f;\r
+}\r
+\r
+\r
/*------------------------------------------------------------------------------------\r
* hidden-sysyem-node\r
*/\r
transformOrigin : '0 0';\r
position : absolute;\r
}\r
- .ScrollBox-Scrollbar-Wrapper-V,\r
- .ScrollBox-Scrollbar-Wrapper-H,\r
- .ScrollBox-Scrollbar-Wrapper-V-withH,\r
- .ScrollBox-Scrollbar-Wrapper-H-withV {\r
- position : absolute;\r
- z-index : 100;\r
- overflow : hidden;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-V,\r
- .ScrollBox-Scrollbar-Wrapper-V-withH {\r
- width : 7px;\r
- top : 2px;\r
- right : 1px;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-V {\r
- bottom : 2px;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-V-withH {\r
- bottom : 7px;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-H,\r
- .ScrollBox-Scrollbar-Wrapper-H-withV {\r
- height : 7px;\r
- bottom : 1px;\r
- left : 2px;\r
- }\r
- .ScrollBox-Scrollbar-Wrapper-H {\r
- right : 2px;\r
+ .Root .ScrollBox-IndicatorV,\r
+ .Root .ScrollBox-IndicatorH {\r
+ position : absolute;\r
+ overflow : hidden;\r
+ background : #000;\r
+ background : rgba(0,0,0,0.5);\r
+ border : 0;\r
}\r
- .ScrollBox-Scrollbar-Wrapper-H-withV {\r
- right : 7px;\r
+ .Root .ScrollBox-IndicatorV {\r
+ top : 0;\r
+ right : 0.1em;\r
+ left : auto;\r
+ width : 0.5em;\r
+ } \r
+ .Root .ScrollBox-IndicatorH {\r
+ top : auto;\r
+ bottom : 0.1em;\r
+ left : 0;\r
+ height : 0.5em;\r
}\r
- .ScrollBox-Scrollbar-Indicator-V,\r
- .ScrollBox-Scrollbar-Indicator-H {\r
- position : absolute;\r
- z-index : 100;\r
- background : #000;\r
- background : rgba(0,0,0,0.5);\r
- border : 1px solid #fff;\r
- border : 1px solid rgba(255,255,255,0.9);\r
- background-clip : padding-box;\r
- -o-background-clip : padding-box;\r
- -ms-background-clip : padding-box;\r
- -moz-background-clip : padding-box;\r
- -khtml-background-clip : padding-box;\r
- -webkit-background-clip : padding-box;\r
- box-sizing : border-box;\r
- -o-box-sizing : border-box;\r
- -ms-box-sizing : border-box;\r
- -moz-box-sizing : border-box;\r
- -khtml-box-sizing : border-box;\r
- -webkit-box-sizing : border-box;\r
- border-radius : 3px;\r
- -o-border-radius : 3px;\r
- -ms-border-radius : 3px;\r
- -moz-border-radius : 3px;\r
- -khtml-border-radius : 3px;\r
- -webkit-border-radius : 3px;\r
- transition-property : transform;\r
- -o-transition-property : -o-transform;\r
- -ms-transition-property : -ms-transform;\r
- -moz-transition-property : -moz-transform;\r
- -khtml-transition-property : -khtml-transform;\r
- -webkit-transition-property : -webkit-transform;\r
- transform: translate(0,0);\r
- -o-transform: translate(0,0);\r
- -ms-transform: translate(0,0);\r
- -moz-transform: translate(0,0);\r
- -khtml-transform: translate(0,0);\r
- -webkit-transform: translate(0,0);\r
- }\r
- .ScrollBox-Scrollbar-Indicator-V {\r
- width:100%;\r
- }\r
- .ScrollBox-Scrollbar-Indicator-H {\r
- height:100%;\r
- }
\ No newline at end of file
OSDN Git Service
