JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="http://playground.benbarnett.net/jquery-animate-enhanced/scripts/src/jquery.animate-enhanced.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<div class="notify" id="mynotify">
<div class='content'>
Your content here
Your content here
Your content here
<div class="close">X Close</div>
</div>
</div>
<a href="#" id="toggle" class="toggle">Toggle Panel</a> <a href="#" id="open" class="toggle">Open</a> <a href="#" id="close" class="toggle">Close</a>
<div id="debug"></div>

CSS

body{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all .5s ease-in; /* change all instances of .5s to another number to modify open/ close duration */
transition: all .5s ease-in; /* change all instances of .5s to another number to modify open/ close duration */
}


.notify{ /* main notifier container */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-perspective: 1500px;
-webkit-perspective-origin: 50% 100%;
perspective: 1500px;
perspective-origin: 50% 100%;
width: 100%; /* width of notifier container */
height: 230px; /* height of notifier container */
position: absolute;
top: 0;
left: 0;
z-index: 1000;
background: rgba(0,0,0,.8);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;
visibility: hidden;
}


.notify .content{ /* content container */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
width: 100%;
background: #ffd990; /* background color of interface */
background: rgb(255,217,144); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,217,144,1) 0%, rgba(255,225,173,1) 51%, rgba(255,217,144,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,217,144,1)), color-stop(51%,rgba(255,225,173,1)), color-stop(100%,rgba(255,217,144,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,217,144,1) 0%,rgba(255,225,173,1) 51%,rgba(255,217,144,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,217,144,1) 0%,rgba(255,225,173,1) 51%,rgba(255,217,144,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,217,144,1) 0%,rgba(255,225,173,1) 51%,rgba(255,217,144,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,217,144,1)...

JavaScript

/* 3D Drop In Notifier Panel
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* v1.1 (Dec 22nd, 13): Fixed various issues in legacy browsers such as IE8/9 and Opera, adds alternate transition effect.
*/

var notifier = {
	defaults: {
		noteid: null,
		content: 'inline',
		freq: 'manual', // options: 'manual', 'session'
		defaultstate: 'open',
		state: 'closed initial',
		onopenclose: function($el, state){
		},
		oninit: function($el, state){
		}
	},
	
	open: function(){
		var scrolltopduration = (this.$doccontent.scrollTop()) > 10? 'normal' : 0;
        console.log(this.$doccontent.scrollTop());
        console.log(scrolltopduration);
		this.$doccontent.stop().animate({scrollTop:0}, scrolltopduration, function(){
			notifier.$body.addClass('open_notify');
            console.log(notifier.transform3d);
            if (notifier.transform3d){
                console.log(notifier.measures.noteheight);
                notifier.$body.css({transform: 'translate3d(0, ' + notifier.measures.noteheight + 'px, 0)'})
                
            }else{
				notifier.$notify.slideDown('normal', function(){
					notifier.s.onopenclose.call(notifier, notifier.$notify, 'open')
				})
			}
		})
		this.s.state = 'open'
	},

	close: function(){
		this.$body.removeClass('open_notify')
        if (notifier.transform3d){
            console.log("transform3d");
            this.$body.css({transform: 'translate3d(0, 0, 0)'})
        }else{
            console.log("slide");
			notifier.$notify.slideUp('normal', function(){
				notifier.s.onopenclose.call(notifier, notifier.$notify, 'closed')
			})
		}
		this.s.state = 'closed'
	},

	toggle: function(){
		if (this.s.state.indexOf('closed') != -1)
			this.open()
		else
			this.close()
	},

	getajaxcontent: function(url){
		$.ajax({
			url: url,
			dataType: 'html',
			error:function(ajaxrequest){
				alert('Error fetching content.<br />Server Response:...