/** Hippo Offcanvas styling: selectors .hippo-offcanvas-contents */ .hippo-offcanvas-wrapper, .hippo-offcanvas-pusher, .hippo-offcanvas-contents { height : 100%; } .hippo-offcanvas-contents { /* overflow-y : scroll; background : #f3efe0; */ } .hippo-offcanvas-open .hippo-offcanvas-contents, .hippo-offcanvas-open .hippo-offcanvas-contents-inner { } .hippo-offcanvas-html-open, .hippo-offcanvas-body-open{ height: 100% } .hippo-offcanvas-contents, .hippo-offcanvas-contents-inner { position : relative; } .hippo-offcanvas-wrapper { position : relative; overflow : hidden; } .hippo-offcanvas-pusher { position : relative; left : 0; z-index : 99; height : 100%; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; } .hippo-offcanvas-pusher::after { position : absolute; top : 0; right : 0; width : 0; height : 0; background : rgba(0, 0, 0, 0.5); content : ''; opacity : 0; -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; -moz-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; -o-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; z-index: 999; } .hippo-offcanvas-open .hippo-offcanvas-pusher::after { width : 100%; height : 100%; opacity : 1; -webkit-transition : opacity 0.5s; -moz-transition : opacity 0.5s; -o-transition : opacity 0.5s; transition : opacity 0.5s; } .hippo-offcanvas-container { position : absolute; top : 0; left : 0; z-index : 100; visibility : hidden; width : 85%; height : 100%; background : #0d5740; /* Will Change */ -webkit-transition : all 0.5s; -moz-transition : all 0.5s; -o-transition : all 0.5s; transition : all 0.5s; } .hippo-offcanvas-container::after { position : absolute; top : 0; right : 0; width : 100%; height : 100%; background : rgba(0, 0, 0, 0.5); content : ''; opacity : 1; -webkit-transition : opacity 0.5s; -moz-transition : opacity 0.5s; -o-transition : opacity 0.5s; transition : opacity 0.5s; } .hippo-offcanvas-open .hippo-offcanvas-container::after { width : 0; height : 0; opacity : 0; -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; -moz-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; -o-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .hippo-offcanvas-container > div { overflow-y : scroll; overflow-x : hidden; height : calc(100% - 45px); /* visibility : hidden; Remove or Comments for windows scroll */ } .hippo-offcanvas-container > div > div { visibility : visible; } .hippo-offcanvas-left .hippo-offcanvas-container { left : 0; } .hippo-offcanvas-right .hippo-offcanvas-container { left : auto; right : 0; } /* Individual effects */ /* Effect 1: Slide in on top Name: slide-in-on-top */ .hippo-offcanvas-left.slide-in-on-top.hippo-offcanvas-open .hippo-offcanvas-container, .hippo-offcanvas-right.slide-in-on-top.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transform : translate3d(0, 0, 0); -moz-transform : translate3d(0, 0, 0); -ms-transform : translate(0, 0); -o-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } .hippo-offcanvas-left.slide-in-on-top .hippo-offcanvas-container { -webkit-transform : translate3d(-100%, 0, 0); -moz-transform : translate3d(-100%, 0, 0); -ms-transform : translate(-100%, 0); -o-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } .hippo-offcanvas-right.slide-in-on-top .hippo-offcanvas-container { -webkit-transform : translate3d(100%, 0, 0); -moz-transform : translate3d(100%, 0, 0); -ms-transform : translate(100%, 0); -o-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } .slide-in-on-top .hippo-offcanvas-container::after { display : none; } /* Effect 2: Reveal : done */ .hippo-offcanvas-left.reveal.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.reveal.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .reveal .hippo-offcanvas-container { z-index : 0; visibility: hidden; opacity: 0; } .reveal.hippo-offcanvas-open .hippo-offcanvas-container { z-index : 1; visibility: visible; opacity: 1; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; } .reveal .hippo-offcanvas-container::after { display : none; } /* Effect 3: Push done */ .hippo-offcanvas-left.push-down.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.push-down.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .hippo-offcanvas-left.push-down .hippo-offcanvas-container { -webkit-transform : translate3d(-100%, 0, 0); -moz-transform : translate3d(-100%, 0, 0); -ms-transform : translate(-100%, 0); -o-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } .hippo-offcanvas-right.push-down .hippo-offcanvas-container { -webkit-transform : translate3d(100%, 0, 0); -moz-transform : translate3d(100%, 0, 0); -ms-transform : translate(100%, 0); -o-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } .push-down.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; } .push-down .hippo-offcanvas-container::after { display : none; } /* Effect 4: Slide along : done*/ .hippo-offcanvas-left.slide-along.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.slide-along.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .hippo-offcanvas-left.slide-along .hippo-offcanvas-container { z-index : 1; -webkit-transform : translate3d(-50%, 0, 0); -moz-transform : translate3d(-50%, 0, 0); -ms-transform : translate(-50%, 0); -o-transform : translate3d(-50%, 0, 0); transform : translate3d(-50%, 0, 0); } .hippo-offcanvas-right.slide-along .hippo-offcanvas-container { z-index : 1; -webkit-transform : translate3d(50%, 0, 0); -moz-transform : translate3d(50%, 0, 0); -ms-transform : translate(50%, 0); -o-transform : translate3d(50%, 0, 0); transform : translate3d(50%, 0, 0); } .slide-along.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -webkit-transform 0.5s; -ms-transition : -webkit-transform 0.5s; -o-transition : -webkit-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(0, 0, 0); -moz-transform : translate3d(0, 0, 0); -ms-transform : translate(0, 0); -o-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } .slide-along .hippo-offcanvas-container::after { display : none; } /* Effect 5: Reverse slide out done */ .hippo-offcanvas-left.reverse-slide-out.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.reverse-slide-out.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .hippo-offcanvas-left.reverse-slide-out .hippo-offcanvas-container { z-index : 1; -webkit-transform : translate3d(50%, 0, 0); -moz-transform : translate3d(50%, 0, 0); -ms-transform : translate(50%, 0); -o-transform : translate3d(50%, 0, 0); transform : translate3d(50%, 0, 0); } .hippo-offcanvas-right.reverse-slide-out .hippo-offcanvas-container { z-index : 1; -webkit-transform : translate3d(-50%, 0, 0); -moz-transform : translate3d(-50%, 0, 0); -ms-transform : translate(-50%, 0); -o-transform : translate3d(-50%, 0, 0); transform : translate3d(-50%, 0, 0); } .reverse-slide-out.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(0, 0, 0); -moz-transform : translate3d(0, 0, 0); -ms-transform : translate(0, 0); -o-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } /* Effect 6: Rotate pusher done */ .rotate-pusher.hippo-offcanvas-wrapper { -webkit-perspective : 1500px; -moz-perspective : 1500px; -ms-perspective : 1500px; -o-perspective : 1500px; perspective : 1500px; } .hippo-offcanvas-left.rotate-pusher .hippo-offcanvas-pusher { -webkit-transform-origin : 0% 50%; -moz-transform-origin : 0% 50%; -ms-transform-origin : 0% 50%; -o-transform-origin : 0% 50%; transform-origin : 0% 50%; -webkit-perspective : 1200px; -moz-perspective : 1200px; -ms-perspective : 1200px; -o-perspective : 1200px; perspective : 1200px; /* -webkit-transform-style : preserve-3d; transform-style : preserve-3d;*/ } .hippo-offcanvas-right.rotate-pusher .hippo-offcanvas-pusher { -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; -o-transform-origin : 100% 50%; transform-origin : 100% 50%; -webkit-perspective : 1200px; -moz-perspective : 1200px; -ms-perspective : 1200px; -o-perspective : 1200px; perspective : 1200px; /*-webkit-transform-style : preserve-3d; transform-style : preserve-3d;*/ } .hippo-offcanvas-left.rotate-pusher.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0) rotateY(-15deg); -moz-transform : translate3d(300px, 0, 0) rotateY(-15deg); -ms-transform : translate3d(300px, 0, 0) rotateY(-15deg); -o-transform : translate3d(300px, 0, 0) rotateY(-15deg); transform : translate3d(300px, 0, 0) rotateY(-15deg); } .hippo-offcanvas-right.rotate-pusher.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0) rotateY(15deg); -moz-transform : translate3d(-300px, 0, 0) rotateY(15deg); -ms-transform : translate3d(-300px, 0, 0) rotateY(15deg); -o-transform : translate3d(-300px, 0, 0) rotateY(15deg); transform : translate3d(-300px, 0, 0) rotateY(15deg); } .hippo-offcanvas-left.rotate-pusher .hippo-offcanvas-container { -webkit-transform : translate3d(-100%, 0, 0); -moz-transform : translate3d(-100%, 0, 0); -ms-transform : translate(-100%, 0); -o-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); -webkit-transform-origin : 100%; -moz-transform-origin : 100%; -ms-transform-origin : 100%; -o-transform-origin : 100%; transform-origin : 100%; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-right.rotate-pusher .hippo-offcanvas-container { -webkit-transform : translate3d(100%, 0, 0); -moz-transform : translate3d(100%, 0, 0); -ms-transform : translate(100%, 0); -o-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); -webkit-transform-origin : 0%; -moz-transform-origin : 0%; -ms-transform-origin : 0%; -o-transform-origin : 0%; transform-origin : 0%; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-left.rotate-pusher.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transform : translate3d(-100%, 0, 0) rotateY(15deg); -moz-transform : translate3d(-100%, 0, 0) rotateY(15deg); -ms-transform : translate3d(-100%, 0, 0) rotateY(15deg); -o-transform : translate3d(-100%, 0, 0) rotateY(15deg); transform : translate3d(-100%, 0, 0) rotateY(15deg); } .hippo-offcanvas-right.rotate-pusher.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transform : translate3d(100%, 0, 0) rotateY(-15deg); -moz-transform : translate3d(100%, 0, 0) rotateY(-15deg); -ms-transform : translate3d(100%, 0, 0) rotateY(-15deg); -o-transform : translate3d(100%, 0, 0) rotateY(-15deg); transform : translate3d(100%, 0, 0) rotateY(-15deg); } .rotate-pusher .hippo-offcanvas-container::after { display : none; } /* Effect 7: 3D rotate in done */ .hippo-offcanvas-left.three-d-rotate-in.hippo-offcanvas-wrapper { -webkit-perspective : 1500px; -moz-perspective : 1500px; -ms-perspective : 1500px; -o-perspective : 1500px; perspective : 1500px; -webkit-perspective-origin : 0% 50%; -mos-perspective-origin : 0% 50%; -ms-perspective-origin : 0% 50%; -o-perspective-origin : 0% 50%; perspective-origin : 0% 50%; } .hippo-offcanvas-right.three-d-rotate-in.hippo-offcanvas-wrapper { -webkit-perspective : 1500px; -moz-perspective : 1500px; -ms-perspective : 1500px; -o-perspective : 1500px; perspective : 1500px; -webkit-perspective-origin : 100% 50%; -moz-perspective-origin : 100% 50%; -ms-perspective-origin : 100% 50%; -o-perspective-origin : 100% 50%; perspective-origin : 100% 50%; } .three-d-rotate-in .hippo-offcanvas-pusher { -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-left.three-d-rotate-in.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.three-d-rotate-in.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .hippo-offcanvas-left.three-d-rotate-in .hippo-offcanvas-container { -webkit-transform : translate3d(-100%, 0, 0) rotateY(-90deg); -moz-transform : translate3d(-100%, 0, 0) rotateY(-90deg); -ms-transform : translate(-100%, 0) rotateY(-90deg); -o-transform : translate3d(-100%, 0, 0) rotateY(-90deg); transform : translate3d(-100%, 0, 0) rotateY(-90deg); -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; -o-transform-origin : 100% 50%; transform-origin : 100% 50%; /* -webkit-transform-style : preserve-3d; transform-style : preserve-3d;*/ } .hippo-offcanvas-right.three-d-rotate-in .hippo-offcanvas-container { -webkit-transform : translate3d(100%, 0, 0) rotateY(90deg); -moz-transform : translate3d(100%, 0, 0) rotateY(90deg); -ms-transform : translate(100%, 0) rotateY(90deg); -o-transform : translate3d(100%, 0, 0) rotateY(90deg); transform : translate3d(100%, 0, 0) rotateY(90deg); -webkit-transform-origin : 0% 50%; -moz-transform-origin : 0% 50%; -ms-transform-origin : 0% 50%; -o-transform-origin : 0% 50%; transform-origin : 0% 50%; /* -webkit-transform-style : preserve-3d; transform-style : preserve-3d;*/ } .hippo-offcanvas-left.three-d-rotate-in.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(-100%, 0, 0) rotateY(0deg); -mos-transform : translate3d(-100%, 0, 0) rotateY(0deg); -ms-transform : translate(-100%, 0) rotateY(0deg); -o-transform : translate3d(-100%, 0, 0) rotateY(0deg); transform : translate3d(-100%, 0, 0) rotateY(0deg); } .hippo-offcanvas-right.three-d-rotate-in.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(100%, 0, 0) rotateY(0deg); -moz-transform : translate3d(100%, 0, 0) rotateY(0deg); -ms-transform : translate(100%, 0) rotateY(0deg); -o-transform : translate3d(100%, 0, 0) rotateY(0deg); transform : translate3d(100%, 0, 0) rotateY(0deg); } /* Effect 8: 3D rotate out done */ .hippo-offcanvas-left.three-d-rotate-out.hippo-offcanvas-wrapper { -webkit-perspective : 1500px; -moz-perspective : 1500px; -ms-perspective : 1500px; -o-perspective : 1500px; perspective : 1500px; -webkit-perspective-origin : 0% 50%; -moz-perspective-origin : 0% 50%; -ms-perspective-origin : 0% 50%; -o-perspective-origin : 0% 50%; perspective-origin : 0% 50%; } .hippo-offcanvas-right.three-d-rotate-out.hippo-offcanvas-wrapper { -webkit-perspective : 1500px; -moz-perspective : 1500px; -ms-perspective : 1500px; -o-perspective : 1500px; perspective : 1500px; -webkit-perspective-origin : 100% 50%; -moz-perspective-origin : 100% 50%; -ms-perspective-origin : 100% 50%; -o-perspective-origin : 100% 50%; perspective-origin : 100% 50%; } .three-d-rotate-out .hippo-offcanvas-pusher { -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-left.three-d-rotate-out.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.three-d-rotate-out.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .hippo-offcanvas-left.three-d-rotate-out .hippo-offcanvas-container { -webkit-transform : translate3d(-100%, 0, 0) rotateY(90deg); -moz-transform : translate3d(-100%, 0, 0) rotateY(90deg); -ms-transform : translate(-100%, 0) rotateY(90deg); -o-transform : translate3d(-100%, 0, 0) rotateY(90deg); transform : translate3d(-100%, 0, 0) rotateY(90deg); -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; -o-transform-origin : 100% 50%; transform-origin : 100% 50%; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-right.three-d-rotate-out .hippo-offcanvas-container { -webkit-transform : translate3d(100%, 0, 0) rotateY(-90deg); -moz-transform : translate3d(100%, 0, 0) rotateY(-90deg); -ms-transform : translate(100%, 0) rotateY(-90deg); -o-transform : translate3d(100%, 0, 0) rotateY(-90deg); transform : translate3d(100%, 0, 0) rotateY(-90deg); -webkit-transform-origin : 0% 50%; -moz-transform-origin : 0% 50%; -ms-transform-origin : 0% 50%; -o-transform-origin : 0% 50%; transform-origin : 0% 50%; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-left.three-d-rotate-out.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(-100%, 0, 0) rotateY(0deg); -moz-transform : translate3d(-100%, 0, 0) rotateY(0deg); -ms-transform : translate(-100%, 0) rotateY(0deg); -o-transform : translate3d(-100%, 0, 0) rotateY(0deg); transform : translate3d(-100%, 0, 0) rotateY(0deg); } .hippo-offcanvas-right.three-d-rotate-out.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(100%, 0, 0) rotateY(0deg); -moz-transform : translate3d(100%, 0, 0) rotateY(0deg); -ms-transform : translate(100%, 0) rotateY(0deg); -o-transform : translate3d(100%, 0, 0) rotateY(0deg); transform : translate3d(100%, 0, 0) rotateY(0deg); } .three-d-rotate-out .hippo-offcanvas-container::after { display : none; } /* Effect 9: Scale down pusher done */ .scale-down-pusher.hippo-offcanvas-wrapper { -webkit-perspective : 1000px; -moz-perspective : 1000px; -ms-perspective : 1000px; -o-perspective : 1000px; perspective : 1000px; } .scale-down-pusher .hippo-offcanvas-pusher { -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .scale-down-pusher.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(0, 0, -300px); -moz-transform : translate3d(0, 0, -300px); -ms-transform : translate3d(0, 0, -300px); -o-transform : translate3d(0, 0, -300px); transform : translate3d(0, 0, -300px); overflow: hidden; } .hippo-offcanvas-left.scale-down-pusher .hippo-offcanvas-container { opacity : 1; -webkit-transform : translate3d(-100%, 0, 0); -moz-transform : translate3d(-100%, 0, 0); -ms-transform : translate(-100%, 0); -o-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } .hippo-offcanvas-right.scale-down-pusher .hippo-offcanvas-container { opacity : 1; -webkit-transform : translate3d(100%, 0, 0); -moz-transform : translate3d(100%, 0, 0); -ms-transform : translate(100%, 0); -o-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } .scale-down-pusher.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -webkit-transform 0.5s; -ms-transition : -webkit-transform 0.5s; -o-transition : -webkit-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(0, 0, 0); -moz-transform : translate3d(0, 0, 0); -ms-transform : translate(0, 0); -o-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } .scale-down-pusher .hippo-offcanvas-container::after { display : none; } /* Effect 10: Scale up done */ .scale-up.hippo-offcanvas-wrapper { -webkit-perspective : 1000px; -moz-perspective : 1000px; -ms-perspective : 1000px; -o-perspective : 1000px; perspective : 1000px; -webkit-perspective-origin : 0% 50%; -moz-perspective-origin : 0% 50%; -ms-perspective-origin : 0% 50%; -o-perspective-origin : 0% 50%; perspective-origin : 0% 50%; } .hippo-offcanvas-left.scale-up.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.scale-up.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .hippo-offcanvas-left.scale-up .hippo-offcanvas-container { z-index : 1; opacity : 1; -webkit-transform : translate3d(0, 0, -300px); -moz-transform : translate3d(0, 0, -300px); -ms-transform : translate3d(0, 0, -300px); -o-transform : translate3d(0, 0, -300px); transform : translate3d(0, 0, -300px); } .hippo-offcanvas-right.scale-up .hippo-offcanvas-container { z-index : 1; opacity : 1; -webkit-transform : translate3d(150%, 0, -300px); -moz-transform : translate3d(150%, 0, -300px); -ms-transform : translate3d(150%, 0, -300px); -o-transform : translate3d(150%, 0, -300px); transform : translate3d(150%, 0, -300px); } .scale-up.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(0, 0, 0); -moz-transform : translate3d(0, 0, 0); -ms-transform : translate(0, 0); -o-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } /* Effect 11: Scale and rotate pusher done */ .scale-rotate-pusher.hippo-offcanvas-wrapper { -webkit-perspective : 1000px; -moz-perspective : 1000px; -ms-perspective : 1000px; -o-perspective : 1000px; perspective : 1000px; } .scale-rotate-pusher .hippo-offcanvas-pusher { -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-left.scale-rotate-pusher.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(100px, 0, -600px) rotateY(-20deg); -moz-transform : translate3d(100px, 0, -600px) rotateY(-20deg); -ms-transform : translate3d(100px, 0, -600px) rotateY(-20deg); -o-transform : translate3d(100px, 0, -600px) rotateY(-20deg); transform : translate3d(100px, 0, -600px) rotateY(-20deg); overflow: hidden; } .hippo-offcanvas-right.scale-rotate-pusher.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-100px, 0, -600px) rotateY(20deg); -moz-transform : translate3d(-100px, 0, -600px) rotateY(20deg); -ms-transform : translate3d(-100px, 0, -600px) rotateY(20deg); -o-transform : translate3d(-100px, 0, -600px) rotateY(20deg); transform : translate3d(-100px, 0, -600px) rotateY(20deg); overflow: hidden; } .hippo-offcanvas-left.scale-rotate-pusher .hippo-offcanvas-container { opacity : 1; -webkit-transform : translate3d(-100%, 0, 0); -moz-transform : translate3d(-100%, 0, 0); -ms-transform : translate(-100%, 0); -o-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } .hippo-offcanvas-right.scale-rotate-pusher .hippo-offcanvas-container { opacity : 1; -webkit-transform : translate3d(100%, 0, 0); -moz-transform : translate3d(100%, 0, 0); -ms-transform : translate(100%, 0); -o-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } .scale-rotate-pusher.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(0, 0, 0); -moz-transform : translate3d(0, 0, 0); -ms-transform : translate(0, 0); -o-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } .scale-rotate-pusher .hippo-offcanvas-container::after { display : none; } /* Effect 12: Open door done*/ .open-door.hippo-offcanvas-wrapper { -webkit-perspective : 1000px; -moz-perspective : 1000px; -ms-perspective : 1000px; -o-perspective : 1000px; perspective : 1000px; } .hippo-offcanvas-left.open-door .hippo-offcanvas-pusher { -webkit-transform-origin : 100% 50%; transform-origin : 100% 50%; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-right.open-door .hippo-offcanvas-pusher { -webkit-transform-origin : 0% 50%; -moz-transform-origin : 0% 50%; -ms-transform-origin : 0% 50%; -o-transform-origin : 0% 50%; transform-origin : 0% 50%; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-left.open-door.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : rotateY(-10deg); -moz-transform : rotateY(-10deg); -ms-transform : rotateY(-10deg); -o-transform : rotateY(-10deg); transform : rotateY(-10deg); overflow: hidden; } .hippo-offcanvas-right.open-door.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : rotateY(10deg); -moz-transform : rotateY(10deg); -ms-transform : rotateY(10deg); -o-transform : rotateY(10deg); transform : rotateY(10deg); overflow: hidden; } .hippo-offcanvas-left.open-door .hippo-offcanvas-container { opacity : 1; -webkit-transform : translate3d(-100%, 0, 0); -moz-transform : translate3d(-100%, 0, 0); -ms-transform : translate(-100%, 0); -o-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } .hippo-offcanvas-right.open-door .hippo-offcanvas-container { opacity : 1; -webkit-transform : translate3d(100%, 0, 0); -moz-transform : translate3d(100%, 0, 0); -ms-transform : translate(100%, 0); -o-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } .open-door.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition : -webkit-transform 0.5s; -moz-transition : -moz-transform 0.5s; -ms-transition : -ms-transform 0.5s; -o-transition : -o-transform 0.5s; transition : transform 0.5s; -webkit-transform : translate3d(0, 0, 0); -moz-transform : translate3d(0, 0, 0); -ms-transform : translate(0, 0); -o-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } .open-door .hippo-offcanvas-container::after { display : none; } /* Effect 13: Fall down done */ .fall-down.hippo-offcanvas-wrapper { -webkit-perspective : 1500px; -moz-perspective : 1500px; -ms-perspective : 1500px; -o-perspective : 1500px; perspective : 1500px; -webkit-perspective-origin : 0% 50%; -moz-perspective-origin : 0% 50%; -ms-perspective-origin : 0% 50%; -o-perspective-origin : 0% 50%; perspective-origin : 0% 50%; } .hippo-offcanvas-left.fall-down.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.fall-down.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .fall-down .hippo-offcanvas-container { z-index : 1; opacity : 1; -webkit-transform : translate3d(0, -100%, 0); -moz-transform : translate3d(0, -100%, 0); -ms-transform : translate(0, -100%); -o-transform : translate3d(0, -100%, 0); transform : translate3d(0, -100%, 0); } .fall-down.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition-timing-function : ease-in-out; transition-timing-function : ease-in-out; -webkit-transition-property : -webkit-transform; transition-property : transform; -webkit-transform : translate3d(0, 0, 0); -moz-transform : translate3d(0, 0, 0); -ms-transform : translate(0, 0); -o-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); -webkit-transition-speed : 0.2s; transition-speed : 0.2s; } /* Effect 14: Delayed 3D rotate */ .hippo-offcanvas-left.delayed-three-d-rotate.hippo-offcanvas-wrapper { -webkit-perspective : 1500px; -moz-perspective : 1500px; -ms-perspective : 1500px; -o-perspective : 1500px; perspective : 1500px; -webkit-perspective-origin : 0% 50%; -moz-perspective-origin : 0% 50%; -ms-perspective-origin : 0% 50%; -o-perspective-origin : 0% 50%; perspective-origin : 0% 50%; } .hippo-offcanvas-right.delayed-three-d-rotate.hippo-offcanvas-wrapper { -webkit-perspective : 1500px; -moz-perspective : 1500px; -ms-perspective : 1500px; -o-perspective : 1500px; perspective : 1500px; -webkit-perspective-origin : 100% 50%; -moz-perspective-origin : 100% 50%; -ms-perspective-origin : 100% 50%; -o-perspective-origin : 100% 50%; perspective-origin : 100% 50%; } .delayed-three-d-rotate .hippo-offcanvas-pusher { -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-left.delayed-three-d-rotate.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(300px, 0, 0); -moz-transform : translate3d(300px, 0, 0); -ms-transform : translate(300px, 0); -o-transform : translate3d(300px, 0, 0); transform : translate3d(300px, 0, 0); } .hippo-offcanvas-right.delayed-three-d-rotate.hippo-offcanvas-open .hippo-offcanvas-pusher { -webkit-transform : translate3d(-300px, 0, 0); -moz-transform : translate3d(-300px, 0, 0); -ms-transform : translate(-300px, 0); -o-transform : translate3d(-300px, 0, 0); transform : translate3d(-300px, 0, 0); } .hippo-offcanvas-left.delayed-three-d-rotate .hippo-offcanvas-container { -webkit-transform : translate3d(-100%, 0, 0) rotateY(90deg); -moz-transform : translate3d(-100%, 0, 0) rotateY(90deg); -ms-transform : translate(-100%, 0) rotateY(90deg); -o-transform : translate3d(-100%, 0, 0) rotateY(90deg); transform : translate3d(-100%, 0, 0) rotateY(90deg); -webkit-transform-origin : 0% 50%; -moz-transform-origin : 0% 50%; -ms-transform-origin : 0% 50%; -o-transform-origin : 0% 50%; transform-origin : 0% 50%; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-right.delayed-three-d-rotate .hippo-offcanvas-container { -webkit-transform : translate3d(100%, 0, 0) rotateY(-90deg); -moz-transform : translate3d(100%, 0, 0) rotateY(-90deg); -ms-transform : translate(100%, 0) rotateY(-90deg); -o-transform : translate3d(100%, 0, 0) rotateY(-90deg); transform : translate3d(100%, 0, 0) rotateY(-90deg); -webkit-transform-origin : 100% 50%; -moz-transform-origin : 100% 50%; -ms-transform-origin : 100% 50%; -o-transform-origin : 100% 50%; transform-origin : 100% 50%; -webkit-transform-style : preserve-3d; -moz-transform-style : preserve-3d; -ms-transform-style : preserve-3d; -o-transform-style : preserve-3d; transform-style : preserve-3d; } .hippo-offcanvas-left.delayed-three-d-rotate.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition-delay : 0.1s; transition-delay : 0.1s; -webkit-transition-timing-function : ease-in-out; transition-timing-function : ease-in-out; -webkit-transition-property : -webkit-transform; transition-property : transform; -webkit-transform : translate3d(-100%, 0, 0) rotateY(0deg); -moz-transform : translate3d(-100%, 0, 0) rotateY(0deg); -ms-transform : translate(-100%, 0) rotateY(0deg); -o-transform : translate3d(-100%, 0, 0) rotateY(0deg); transform : translate3d(-100%, 0, 0) rotateY(0deg); } .hippo-offcanvas-right.delayed-three-d-rotate.hippo-offcanvas-open .hippo-offcanvas-container { visibility : visible; -webkit-transition-delay : 0.1s; transition-delay : 0.1s; -webkit-transition-timing-function : ease-in-out; transition-timing-function : ease-in-out; -webkit-transition-property : -webkit-transform; transition-property : transform; -webkit-transform : translate3d(100%, 0, 0) rotateY(0deg); -moz-transform : translate3d(100%, 0, 0) rotateY(0deg); -ms-transform : translate(100%, 0) rotateY(0deg); -o-transform : translate3d(100%, 0, 0) rotateY(0deg); transform : translate3d(100%, 0, 0) rotateY(0deg); } /*IE fix*/ .ie9 .reveal .hippo-offcanvas-container, .ie10 .reveal .hippo-offcanvas-container, .ie11 .reveal .hippo-offcanvas-container{ display:none !important; } .ie9 .reveal.hippo-offcanvas-open .hippo-offcanvas-container, .ie10 .reveal.hippo-offcanvas-open .hippo-offcanvas-container, .ie11 .reveal.hippo-offcanvas-open .hippo-offcanvas-container{ display:block !important; }