3d image canvas play

Developer
Joseph
Size
3,181 Kb
Views
16,192
  1. 3d image canvas play Previews
  2. 3d image canvas play HTML Codes
  3. 3d image canvas play CSS Codes
  4. 3d image canvas play JS Codes

How do I make an 3d image canvas play?

What is a 3d image canvas play? How do you make a 3d image canvas play? This script and codes were developed by Joseph on 21 November 2022, Monday.

3d image canvas play Previews
IQ Test

3d image canvas play - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3d image canvas play</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="info"></div>
<div class="container"> <div class="background" id="background"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3d image canvas play - Script Codes CSS Codes

html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
/* Hide the scrollbar... */
body::-webkit-scrollbar { display: none; }
/* Set 3d perspective property to the body element - perspective value of 1px makes relative Z distancing simply a factor of 1 */
body { overflow-y: auto; -moz-perspective: 1px; -webkit-perspective: 1px; perspective: 1px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective-origin: 50% 50%;
}
body, body * { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
/* The container element and children must be 100% width to give the different layers the same vanishing point (by default the middle of the viewport) - otherwise they will be out of alignment */
.container { padding: 0px; width:100%; height:100%; position:absolute;
}
/* The translateZ value is -1px which equates to twice as distant as the foreground elements; the element thus needs to be scaled up to nullify the scaling of distance. Using the foo3d() transform functions - translate3d() - triggers hardware compositing to boost performance */
.container .background { -moz-transform: translate3d(0px,0px,0px); -ms-transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px); transform: translate3d(0px,0px,0px); z-index: -400;
}
.container .foreground { -moz-transform: translate3d(0px,0px,1px) scale(1.0); -ms-transform: translate3d(0px,0px,1px) scale(1.0); -webkit-transform: translate3d(0px,0px,1px) scale(1.0); transform: translate3d(0px,0px,1px) scale(1.0); z-index: 200;
}
.container > * { position: absolute;
}
.background
{ background:rgba(192,53,104,0.9); width:5100px; height:3300px;
}
#header { top: 0px; left:0px; background-color:#000; display:none;}
#background	{	top: 0px;	left:0px;	background-size:cover;	background-position:50% 50%;	background-image:url(http://www.prontomarchio.com/wp-content/uploads/2013/01/leonardo3.jpg);	}
#footer { top: 200%; left:0px; background-color:#fff; display:none;}
#hello, #goodbye
{
position:absolute;
top:33%;
color:#14c095;
width:66%;
left:50%;
margin-left:-33%;
text-align:center;
font-family: 'Courier New', Courier, monospace;
}
#hello > p, #goodbye > p { text-align:left !important; }
#arrow
{ position:absolute; bottom:35px; color:#fff;
}
#info { position:fixed; z-index:99; top:25px; left:25px; color:#000; font-size:2em; }

3d image canvas play - Script Codes JS Codes

$.global = new Object();
$.global.x= 0;
$.global.y = 0;
$.global.windowwidth = $(window).width();
$.global.halfimagewidth = 0;
$(document).ready(function()
{
var canvas = $("#background");
var $imagewidth = canvas.width();
var $imageheight = canvas.height();
$.global.halfimagewidth = $imagewidth/2;
$.global.halfimageheight = $imageheight/2;
canvas.css('left','50%');
canvas.css('margin-left',-$imagewidth/2)
canvas.css('top','50%');
canvas.css('margin-top',-$imageheight/2)
var $windowwidth = $.global.windowwidth;
var $windowheight = $(window).height();
var $halfwidth = $windowwidth / 2;
var $halfheight = $windowheight / 2;
var $widthadj = $windowwidth * 3;
var mouseX = 0, mouseY = 0;
$(window).mousemove(function(e) { var offset = $('.container').offset(); mouseX = Math.min(e.pageX - offset.left); mouseY = Math.min(e.pageY - offset.top); $.global.x = mouseX - $halfwidth; $.global.y = mouseY - $halfheight; if (mouseX < 0) mouseX = 0; if (mouseY < 0) mouseY = 0;
});
// cache the selector var xp = 0, yp = 0; var loop = setInterval(function(){ // change 12 to alter damping higher is slower var $xpercent = ( $.global.x / $windowwidth ) * 100/1; var $ypercent = ( $.global.y / $windowheight ) * 100/1; var $thex = ( $xpercent * $imagewidth/100 ) - 300; var $thexadj = $thex; xp += ( $thexadj - xp) / 12; yp += ($.global.y - yp) / 12; canvas.css('transform','translate3d(' + xp*-1 + 'px,' + yp*-1 +'px,0px)'); $('#info').html('x: ' + $xpercent.toFixed(1) + ' y: ' + $ypercent.toFixed(1) );
}, 12); });
3d image canvas play - Script Codes
3d image canvas play - Script Codes
Home Page Home
Developer Joseph
Username jibbon
Uploaded November 21, 2022
Rating 3
Size 3,181 Kb
Views 16,192
Do you need developer help for 3d image canvas play?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joseph (jibbon) Script Codes
Name
NEW SPACE COLONY
Dragdealer slider
Mousy canvas experiment
3d transform card flip
A Pen by Joseph
Simple responsive fullscreen slider
Fluid full-width vimeo element
Large canvas mousemove experiment
NEW SPACE COLONY - safe
Bloody Simple Grid
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!