3D-Interactive Popup Window With jQuery
A lightweight jQuery plugin for showing 3D popup window that interacts with mouse movement.
Source code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3D Popup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/popup.css" />
<script src="js/Latest.min.js"></script>
<script src="js/popup.js"></script>
<style>
body { background-color:#fafafa;}
</style>
<script>
$(document).ready(function() {
$("#tst").click(popup);
});
</script>
</head>
<body>
<div class="container">
<h1>3D Popup</h1>
<a id="tst" rel="popup_name" href="#" class="btn btn-info btn-lg">Don't See</a>
<div class="popup" style="margin:0px">
<div id="popup_name" class="popup_block">
<div class="popup_head">
<h2>Charles Babbage</h2>
</div>
<div class="popup_body">
<p>Charles Babbage (Dec. 1791 – Oct. 1871)
Mathematician, philosopher and (proto-) computer scientist who originated the idea of a programmable computer.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Cascading Style Sheets (CSS)
css/popup.css:
.popup{
position: absolute;
top:30%;
left:20%;
}
.popup_block{
display: none; /*--masqué par défaut--*/
position: absolute;
width:600px;
margin:0px;
box-sizing: border-box;
border-radius: 20px;
border-style:solid;
border-color: #50FFD1;
cursor: pointer;
transform-style: preserve-3d;
box-shadow: 0px 20px 100px #aaa;
}
.close{
padding:10px;
}
.popup_head{
background-color: rgba(80, 225, 255, 0.69);
padding:10px;
border-radius: 10px 10px 0 0;
transition-duration:0.2s;
}
.popup_body{
padding:20px;
}
.popup_head > h1, h2, h3, h4, h5{
margin-top:0px;
color:white;
}
.popup_head:hover{
padding-left:20px;
}
Javascript(js)
js/popup.js:
function popup(){
if(!$('a.close').length){
var rel = $(this).attr('rel');
$("#"+rel).fadeIn().css("display", "block");
$("#"+rel).prepend('<a href="#" class="close">x</a>');
$('body').on('click', 'a.close', closepopup);
}
}
function closepopup(){
$('.popup_block').fadeOut(function() {
$('.popup_block').css("display", "none");
});
$('a.close').remove();
}
$(document).mousemove(function(e) {
if($('a.close').length){
var Force = 30;
var Rotate = 20;
var width = $(document).width();
var height = $(document).height();
var moveX = (e.pageX - width/2) / (width/2) * -Force;
var moveY = (e.pageY - height/2) / (height/2) * -Force;
var rotateY = (e.pageX / width * Rotate*2) - Rotate;
var rotateX = -((e.pageY / height * Rotate*2) - Rotate);
$('.popup_block')
.css('left', moveX+'px')
.css('top', moveY+'px')
.css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
}
});
js/Latest.min.js:
Download Latest.min.js from mentioned below link:
https://drive.google.com/file/d/0B26Rv57L82TvLU9kUDZYQUkwc2s/view
Output:
Figure:Click button 3d popup will display.
A lightweight jQuery plugin for showing 3D popup window that interacts with mouse movement.
Source code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3D Popup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/popup.css" />
<script src="js/Latest.min.js"></script>
<script src="js/popup.js"></script>
<style>
body { background-color:#fafafa;}
</style>
<script>
$(document).ready(function() {
$("#tst").click(popup);
});
</script>
</head>
<body>
<div class="container">
<h1>3D Popup</h1>
<a id="tst" rel="popup_name" href="#" class="btn btn-info btn-lg">Don't See</a>
<div class="popup" style="margin:0px">
<div id="popup_name" class="popup_block">
<div class="popup_head">
<h2>Charles Babbage</h2>
</div>
<div class="popup_body">
<p>Charles Babbage (Dec. 1791 – Oct. 1871)
Mathematician, philosopher and (proto-) computer scientist who originated the idea of a programmable computer.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Cascading Style Sheets (CSS)
css/popup.css:
.popup{
position: absolute;
top:30%;
left:20%;
}
.popup_block{
display: none; /*--masqué par défaut--*/
position: absolute;
width:600px;
margin:0px;
box-sizing: border-box;
border-radius: 20px;
border-style:solid;
border-color: #50FFD1;
cursor: pointer;
transform-style: preserve-3d;
box-shadow: 0px 20px 100px #aaa;
}
.close{
padding:10px;
}
.popup_head{
background-color: rgba(80, 225, 255, 0.69);
padding:10px;
border-radius: 10px 10px 0 0;
transition-duration:0.2s;
}
.popup_body{
padding:20px;
}
.popup_head > h1, h2, h3, h4, h5{
margin-top:0px;
color:white;
}
.popup_head:hover{
padding-left:20px;
}
js/popup.js:
function popup(){
if(!$('a.close').length){
var rel = $(this).attr('rel');
$("#"+rel).fadeIn().css("display", "block");
$("#"+rel).prepend('<a href="#" class="close">x</a>');
$('body').on('click', 'a.close', closepopup);
}
}
function closepopup(){
$('.popup_block').fadeOut(function() {
$('.popup_block').css("display", "none");
});
$('a.close').remove();
}
$(document).mousemove(function(e) {
if($('a.close').length){
var Force = 30;
var Rotate = 20;
var width = $(document).width();
var height = $(document).height();
var moveX = (e.pageX - width/2) / (width/2) * -Force;
var moveY = (e.pageY - height/2) / (height/2) * -Force;
var rotateY = (e.pageX / width * Rotate*2) - Rotate;
var rotateX = -((e.pageY / height * Rotate*2) - Rotate);
$('.popup_block')
.css('left', moveX+'px')
.css('top', moveY+'px')
.css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
}
});
js/Latest.min.js:
Download Latest.min.js from mentioned below link:
https://drive.google.com/file/d/0B26Rv57L82TvLU9kUDZYQUkwc2s/view
Output:
Figure:Click button 3d popup will display.
Thanks for visiting...