I want to activate a collision detection between the green and red div, simple, just square collision.
I need it for a game like the dinosaur of google, I'm designing for a class proyect.
I putted the var of the size form macaco and obstaculo in comment, beacuse something is not working in it, if i leave it normal, the jump function does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inicio esqueleto</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div onclick="saltar()" id="macaco" class="macaco"></div>
<div id="obstaculo"></div>
<script type="text/javascript">
var macaco = document.getElementById("macaco");
var obstaculo = document.getElementById("obstaculo");
function saltar(){
macaco.classList.add("play");
setTimeout(function(){
macaco.classList.remove("play");
},1000);
}
// var macaco = {x: 40, y: 70, width: 40, height: 70};
// var obstaculo = {x: 40, y: 50, width: 40, height: 50};
function collision(macaco, obstaculo){
if (macaco.x < obstaculo.x + obstaculo.width &&
macaco.x + macaco.width > obstaculo.x &&
macaco.y < obstaculo.y + obstaculo.height &&
macaco.y + macaco.height > obstaculo.y
) {
alert("It worked!")
// Colision detectada
} return true
}
</script>
</body>
</html>
#macaco {
background-color: green;
height: 70px;
width: 40px;
transform: translateX(15vw);
position: absolute;
bottom: 22px;
position: absolute;
}
#obstaculo {
background-color: red;
height: 50px;
width: 40px;
transform: translateX(50vw);
position: absolute;
bottom: 22px;
position: absolute;
animation: linear obstaculo 2s;
}
.play {
animation: linear saltar 1s;
}
#keyframes saltar {
0% {transform: translatey(0px) translateX(15vw)}
50% {transform: translatey(-120px) translateX(15vw)}
100% {transform: translatey(0px) translateX(15vw)}
}
#keyframes obstaculo {
0% {transform: translatey(0) translateX(50vw)}
100% {transform: translatey(0) translateX(0vw)}
}
For a collision between 2 rectangles you can observe only the x (width) part. So it's down to 2 ranges colliding.
[x1, x1 + w1] and [x2, x2 + w2].
This will not happen when x1 + w1 < x2 or x2 + w2 < x1.
So it will happen when the opposite of above happens. Using some Boolean arithmetic (de morgen law) it comes down to:
x1 + w1 >= x2 and x2 + w2 >= x1 (1D collision between 2 ranges)
Back to the 2 rectangles, this needs to happen also for the y side, so we can combine them all to:
function isRectColliding(rect1, rect2) {
return (rect1.x + rect1.width) >= rect2.x &&
(rect2.x + rect2.width) >= rect1.x &&
(rect1.y + rect1.height) >= rect2.y &&
(rect2.y + rect2.height) >= rect1.y
}
var rect1 = macaco.getBoundingClientRect()
var rect2 = macaco2.getBoundingClientRect()
var rect3 = obstaculo.getBoundingClientRect()
console.log('isRectColliding(rect1, rect3)', isRectColliding(rect1, rect3))
console.log('isRectColliding(rect2, rect3)', isRectColliding(rect2, rect3))
#macaco {
background-color: green;
height: 70px;
width: 40px;
transform: translateX(15vw);
position: absolute;
bottom: 22px;
}
#macaco2 {
background-color: yellow;
height: 70px;
width: 40px;
transform: translateX(45vw);
position: absolute;
bottom: 22px;
}
#obstaculo {
background-color: red;
height: 50px;
width: 40px;
transform: translateX(50vw);
position: absolute;
bottom: 22px;
position: absolute;
animation: linear obstaculo 2s;
}
<div id="macaco"></div>
<div id="macaco2"></div>
<div id="obstaculo"></div>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
perspective: 500px;
perspective-origin: top;
transform-style: preserve-3d;
width: 100%;
height: 100vh;
background: black;
position: relative;
}
.cursor {
position: absolute;
width: 8rem;
height: 3px;
border-radius: 10px;
background: white;
z-index: 11;
left: -50px;
top: 30px;
transform-style: preserve-3d;
transform: translateZ(100px) rotateX(-0deg);
}
.follow_cursor {
position: absolute;
background: white;
width: 2px;
height: 5rem;
z-index: 2;
top: 100%;
left: 0%;
right: 0;
transform-origin: top;
backdrop-filter: blur(20px);
}
.follow_cursor2 {
position: absolute;
background: white;
width: 2px;
height: 2rem;
z-index: 3;
top: 100%;
left: 100%;
right: 0px;
transform-origin: top;
backdrop-filter: blur(20px);
}
</style>
</head>
<body>
<!-- this div need to be fixed -->
<div class="follow_cursor"></div>
<div class="follow_cursor2"></div>
<div class="cursor"></div>
</body>
<script>
let cursor = document.querySelector(".cursor");
let main = document.querySelector(".main");
const follow = document.querySelector(".follow_cursor");
const follow_2 = document.querySelector(".follow_cursor2");
const origR = follow.getBoundingClientRect();
const origR_2 = follow_2.getBoundingClientRect();
document.onmousemove = (e) => {
let x = e.pageX;
let y = e.pageY;
cursor.style.transform = `translate3d(${x}px, ${y}px , 0)`;
// calculate distance and angle.
let xf = origR.left + origR.width / 2;
let x2f = origR_2.left + origR_2.width / 2;
let yf = origR.top;
let y2f = origR_2.top;
// // distance to cursor from follow
let dist = Math.sqrt((xf - x) * (xf - x) + (yf - y) * (yf - y));
let dist2 = Math.sqrt((x2f - x) * (x2f - x) + (y2f - y) * (y2f - y));
// console.log(dist)
var angle = 0;
var angle2 = 0;
// get the rotation angle
angle = 90 + (Math.atan2(yf - y, xf - x) * 180) / Math.PI;
angle2 = 90 + (Math.atan2(y2f - y, x2f - x) * 180) / Math.PI;
follow.style.transform =
"rotateZ(" + angle + "deg) scaleY(" + dist / origR.height + ")";
follow_2.style.transform =
"rotateZ(" + angle2 + "deg) scaleY(" + dist2 / origR_2.height + ")";
};
</script>
</html>
i am trying to join the vertical lines with my custom cursor but its not working.
i need to join these cursor ending with these vertical line endings.
the link of this image given below
you can run the snippets and check the image to take the refrence what i am trying to do.
i will be thankful if you will help me.
my communication skill are not good hope you will understand
i want this lines to look like this in the image
Your code was hard to read, but I think the transform: translateZ() in the initial css had to do with the error.
I've made you a working example containing 3 elements: the lines and the custom cursor.
I calculate the window height (win_H) and width (win_W) and the width of the custom cursor (myc_W).
The lines are fixed at the left and right bottom of the window, touching at the left and right corner of the custom pointer. From there it's simply maths: calculate the triangles (Pythagoras c2=a2+b2) and the angles (note the angles are in radials, not degrees!).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
perspective: 500px;
perspective-origin: top;
transform-style: preserve-3d;
width: 100%;
height: 100vh;
background: black;
position: relative;
}
#my_cursor {
position: absolute;
width: 8rem;
height: 3px;
border-radius: 10px;
background: white;
left: 0px;
top: 0px;
}
#line_1{
position: absolute;
background: white;
width: 2px;
height: 100%;
bottom: 0;
left: 0;
transform-origin: bottom left;
backdrop-filter: blur(20px);
}
#line_2{
position: absolute;
background: white;
width: 2px;
height: 100%;
bottom: 0;
right: 0;
transform-origin: bottom right;
backdrop-filter: blur(20px);
}
</style>
</head>
<body>
<div id="line_1"></div>
<div id="line_2"></div>
<div id="my_cursor"></div>
</body>
<script>
let
my_cursor = document.getElementById("my_cursor"),
line_1 = document.getElementById("line_1"),
line_2 = document.getElementById("line_2"),
win_W=window.innerWidth,
win_H=window.innerHeight,
myc_W=(my_cursor.getBoundingClientRect().width)/2
;
//SET STARTING POSITION in middle of screen
_calculate( (win_W/2), (win_H/2));
document.onmousemove = (e) => {
_calculate( e.pageX, e.pageY);
}
function _calculate(mouseX,mouseY){
//CUSTOM CURSOR position:
let myc_XL = mouseX - myc_W,
myc_XR = mouseX + myc_W,
myc_Y = mouseY;
my_cursor.style.transform = `translate3d(${myc_XL}px, ${myc_Y}px , 0)`;
let a,b,c,angle;
//LINE 1
a = myc_XL;
b = win_H - mouseY;
c = Math.sqrt((a*a)+(b*b));
angle = Math.asin( a /c );
line_1.style.transform = "rotateZ(" + angle + "rad) scaleY(" + (c/win_H) + ")";
//LINE 2
a = win_W - myc_XR;
c = Math.sqrt((a*a)+(b*b));
angle = Math.asin( a / c );
line_2.style.transform = "rotateZ(" + (-angle) + "rad) scaleY(" + (c/win_H) + ")";
};
</script>
</html>
I have recently created a program which creates new element when someone clicks it. The new element which is created has some specific CSS styling. Now i want it's background to randomly change when the user clicks on button. Like the first time when someone clicks the background is red another time its green and so on like this.. My code is -
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
I want the background color of this box to change randomly..Please help, any help is appreciated..
as you can see from the code, I created a function that randomizes the numbers and puts them in the rgb.
function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
return bgColor;
}
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundColor = random_bg_color();
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
For answer your comment :
Generate random image:
var Images = new Array("https://via.placeholder.com/150/0000FF/808080","https://via.placeholder.com/150/FF0000/FFFFFF",
"https://via.placeholder.com/150/FFFF00/000000");
function randompic() {
var randomNum = Math.floor(Math.random() * Images.length);
return Images[randomNum];
}
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundImage = "url('"+randompic()+"')";
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
This seems to work:
http://jsfiddle.net/mcuzq9rb/
I included a random color generator and applied it to the style of the floating squares.
Let me know if it's what you wanted.
I would style the box with an rga-value, similar to how you randomly set the size of the bubble:
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
bubbles.style.backgroundColor = "rgb("+r+", "+g+", "+b+")";
Here's a little function that uses rando.js to set an element's background color to a random hex string.
function setRandomBackgroundColor(element) {
var hexString = "#";
for (var i = 0; i < 3; i++) {
var hex = rando(255).toString(16);
hexString += hex.length == 1 ? "0" + hex : hex;
}
element.style.backgroundColor = hexString;
}
<script src="https://randojs.com/1.0.0.js"></script>
<button onclick="setRandomBackgroundColor(document.body);">Set random background color</button>
I've just started to study javascript, and checked the example from the website https://cssanimation.rocks/clocks/. But, unfortunatelly, one part in js script does not work. The code is like this:
/*
* Starts any clocks using the user's local time
* From: cssanimation.rocks/clocks
*/
(function() {
// Initialise the locale-enabled clocks
//initInternationalClocks();
// Initialise any local time clocks
initLocalClocks();
// Start the seconds container moving
//moveSecondHands();
// Set the intial minute hand container transition, and then each subsequent step
//setUpMinuteHands();
})();
function initLocalClocks() {
//get the local time using javascript
var date = new Date();
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
var hands = [
{
hand: "hours",
angle: (hours * 30) + (minutes/2)
},
{
hand: "minutes",
angle: (minutes * 6)
},
{
hand: "seconds",
angle: (seconds * 6)
},
];
for (var j = 0; j < hands.length; j++){
var elements = document.querySelectorAll('.' + hands[j].hand);
// window.alert(elements.length);
for (var k = 0; k < elements.length; k++)
{
// window.alert(elements[k]);
elements[k].style.webkitTransform = 'rotateZ(' + hands[j].angle + 'deg)';
elements[k].style.transform = 'rotateZ(' + hands[j].angle + 'deg)';
if (hands[j].hand === 'minutes'){
elements[k].parentNode.setAttribute('data-second-angle', hands[j+1].angle)
}
}
}
}
// Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
function setUpMinuteHands() {
// Find out how far into the minute we are
var containers = document.querySelectorAll('.minutes-container');
var secondAngle = containers[0].getAttribute("data-second-angle");
if (secondAngle > 0) {
// Set a timeout until the end of the current minute, to move the hand
var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
setTimeout(function() {
moveMinuteHands(containers);
}, delay);
}
}
.footer{
color: black;
font-style: italic;
position: fixed; bottom: 0; left:0; right: 0; height: 30px;
float: left;
clear: both;
}
.clock {
border-radius: 50%;
background: #fff url(./images/ios_clock.svg) no-repeat center;
background-size: 88%;
height: 20em;
padding-bottom: 0%;
position: relative;
width: 20em;
}
.clock::after{
background: #000;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 5%;
height: 5%;
z-index: 10;
}
.minutes-container, .hours-container, .seconds-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hours {
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes {
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds {
background: #000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 100%;
width: 1%;
z-index: 8;
}
#keyframes rotate {
100% {
transform: rotateZ(360deg);
}
}
.hours-container{
animation: rotate 43200s infinite linear;
}
.minutes-container{
animation: rotate 3600s infinite linear;
}
.seconds-container {
animation: rotate 60s infinite linear;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="script.js" ></script>
</head>
<body>
<article class="clock">
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</article>
</body>
<footer>
<div class="footer">All materials are taken from the website cssanimation.rocks
</div>
</footer>
</html>
And when I open page, javascript is executed, but array "elements" from the line:
var elements = document.querySelectorAll('.' + hands[j].hand)
is empty. I've checked via alert windows, and really, querySelectorAll does not return objects, but name of css class seems to be correct... I've tried the same in console (like: document.querySelectorAll('.hands'), and it returns the needed div...
Could you, please, help me - what can be wrong with it?...
P.S. When I've pasted snippet to this post, the js script seems working... Now I'm completely lost - is it something with my browser settings, or something?
Thank you very much in advance for any suggestion/help!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create a map viewer, which views a map from some angle. It is obvious how to create it, if angle is 90 degrees (like in google maps). However, I want an angle less than 90 and without using WebGL. Like this:
Maybe there are some solutions, hacks and tricks to do that using CSS or canvas?
Thanks!
Used JavaScript only for navigation by buttons and window edges. Requires some configuration for your screen display: just find commends beginning with Adjust
var mapWidth = -4500 + 900, // #Adjust: the same as #second width
mapHeight = -2234 + 600, // #Adjust: the same as #second height
$map;
function moveScreen(dx, dy) {
var positionX = $map.css("backgroundPositionX"),
positionY = $map.css("backgroundPositionY");
positionX = parseInt(positionX.substring(0, positionX.length - 2)) + dx;
positionY = parseInt(positionY.substring(0, positionY.length - 2)) + dy;
if (positionX < mapWidth) {
positionX = mapWidth;
}
if (positionX > 0) {
positionX = 0;
}
if (positionY < mapHeight) {
positionY = mapHeight;
}
if (positionY > 0) {
positionY = 0;
}
$map.css("backgroundPositionX", positionX + "px");
$map.css("backgroundPositionY", positionY + "px");
}
$(document).ready(function(){
$map = $("#second");
var moverLeft = null, moverUp = null, moverRight = null, moverDown = null;
var clearMover = function(code) {
if (code == 37) {
clearInterval(moverLeft);
moverLeft = null;
}
if (code == 38) {
clearInterval(moverUp);
moverUp = null;
}
if (code == 39) {
clearInterval(moverRight);
moverRight = null;
}
if (code == 40) {
clearInterval(moverDown);
moverDown = null;
}
}
var moveScreenTop = function(){
if (moverUp == null) {
moverUp = setInterval(function(){ moveScreen(0, 10)}, 10);
}
};
var moveScreenBottom = function(){
if (moverDown == null) {
moverDown = setInterval(function(){ moveScreen(0, -10) }, 10);
}
};
var moveScreenLeft = function(){
if (moverLeft == null) {
moverLeft = setInterval(function(){ moveScreen(10, 0) }, 10);
}
};
var moveScreenRight = function(){
if (moverRight == null) {
moverRight = setInterval(function(){ moveScreen(-10, 0) }, 10);
}
};
$("#button_top").hover(moveScreenTop, function(){clearMover(38);});
$("#button_bottom").hover(moveScreenBottom, function(){clearMover(40);});
$("#button_left").hover(moveScreenLeft, function(){clearMover(37);});
$("#button_right").hover(moveScreenRight, function(){clearMover(39);});
$("#button_left_top").hover(function(){moveScreenLeft(); moveScreenTop();}, function(){clearMover(37);clearMover(38)});
$("#button_right_top").hover(function(){moveScreenRight(); moveScreenTop();}, function(){clearMover(39);clearMover(38)});
$("#button_right_bottom").hover(function(){moveScreenRight(); moveScreenBottom();}, function(){clearMover(39);clearMover(40)});
$("#button_left_bottom").hover(function(){moveScreenLeft(); moveScreenBottom();}, function(){clearMover(37);clearMover(40)});
$(document).keyup(function(e){
clearMover(e.which);
});
$(document).keydown(function(e){
if (e.which == 37) {
moveScreenLeft();
}
if (e.which == 38) {
moveScreenTop();
}
if (e.which == 39) {
moveScreenRight();
}
if (e.which == 40) {
moveScreenBottom();
}
});
});
body {
margin: 0;
overflow: hidden;
}
#first {
/* Adjust perspective for your screen */
-moz-perspective: 600px;
-moz-perspective-origin: 50%;
-webkit-perspective: 600px;
-webkit-perspective-origin: 50%;
perspective: 600px;
perspective-origin: 50%;
width: 100%;
height: 100%;
}
#second {
margin: 0 auto;
/* Adjust width and height for your screen */
width: 900px;
height: 600px;
background: url("http://img2.wikia.nocookie.net/__cb20131223222429/althistory/images/archive/b/bb/20140706210315!World_Map_(Ranjit_Singh_Lives).png") 0px 0px;
/* Adjust translateZ for your screen */
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(260px) rotateX( 20deg );
-moz-transform: translateZ(260px) rotateX( 20deg );
transform: translateZ(260px) rotateX( 20deg );
}
.button_edge, .button_corner {
opacity: 0.1;
background-color: #999999;
position: fixed;
}
#button_top {
height: 30px;
left: 30px;
right: 30px;
top: 0px;
}
#button_bottom {
height: 30px;
left: 30px;
right: 30px;
bottom: 0px;
}
#button_left {
width: 30px;
left: 0px;
top: 30px;
bottom: 30px;
}
#button_right {
width: 30px;
right: 0px;
top: 30px;
bottom: 30px;
}
.button_corner {
width: 30px;
height: 30px;
}
#button_left_top {
left: 0px;
top: 0px;
}
#button_right_top {
right: 0px;
top: 0px;
}
#button_right_bottom {
right: 0px;
bottom: 0px;
}
#button_left_bottom {
left: 0px;
bottom: 0px;
}
.tip {
opacity: 0.9;
color: white;
background-color: #666666;
padding: 10px;
font-size: 14px;
width: 200px;
position: fixed;
left: 45%;
bottom: 50px;
}
.tip:hover {opacity: 0.2;}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="first">
<div id="second"></div>
</div>
<div class="button_edge" id="button_top"></div>
<div class="button_edge" id="button_bottom"></div>
<div class="button_edge" id="button_left"></div>
<div class="button_edge" id="button_right"></div>
<div class="button_corner" id="button_left_top"></div>
<div class="button_corner" id="button_right_top"></div>
<div class="button_corner" id="button_right_bottom"></div>
<div class="button_corner" id="button_left_bottom"></div>
<div class="tip">Use arrow buttons or mouse for navigation</div>
P.S.: Of course it is not a final version: it needs to adjust user's screen automatically, but I like the current version).
I've been searching and I can't find anything on the web, but I'm interested in creating (or using something already available, hopefully since I'm pressed with time) similar to this site:
http://www.citroen.hr/citroen/#/citroen/
It's also similar to the Safari Top Sites view, but has the added mouse-tracking and 3d rotation.
Does anyone know of something similar created with javascript/html/css or can point me in the right direction?
A basic version with HTML elements, CSS 3D transforms (so it only works in browsers supporting 3D transforms & nesting of 3D transformed elements - this means no Opera and no IE) and a little bit of JavaScript for the mouse tracking:
demo
HTML:
<ul class='tiles'>
<li class='tile'></li>
<!-- more tiles; I used 16 for the demo and put them on an icosagon -->
</ul>
<div class='slider'></div>
Relevant CSS:
.tiles {
position: absolute;
top: 50%; left: 50%;
padding: 0;
width: 0; height: 0;
list-style: none;
transform-style: preserve-3d;
transform: rotateY(-162deg);
}
.tile {
position: absolute;
left: 50%;
margin: 0.5em -10em;
width: 20em; height: 20em;
backface-visibility: hidden;
opacity: 0.5;
/* inradius of an icosagon */
cursor: pointer;
transition: 0.5s;
}
.tile:hover { opacity: 1; }
.tile:nth-child(odd) { bottom: 100%; }
.tile:nth-child(2), .tile:nth-child(1) {
transform: rotateY(18deg) translateZ(-66.29439em);
}
/* and so on... in general, something of the form:
.tile:nth-child(2*i), .tile:nth-child(2*i-1) {
transform: rotateY(1*18deg) translateZ(-66.29439em);
}
where 18deg = outer angle of the icosagon
66.29439em = 1.05*20em*(1 + sqrt(5) + sqrt(5 + 2*sqrt(5)))/2
= 1.05 * inradius of icosagon
see http://mathworld.wolfram.com/Icosagon.html */
.tile:nth-child(1) {
background: url(image1.jpg);
background-size: cover;
}
/* and so on, set backgrounds for each */
.slider {
position: absolute;
bottom: 5%; left: 10%;
height: 0.25em; width: 80%;
opacity: 0.5;
background: grey
linear-gradient(90deg, crimson 100%, transparent 100%) no-repeat;
background-size: 5% 100%;
}
JavaScript:
(function(){
var b = document.body;
b.addEventListener('mousemove', function(e) {
var w = b.clientWidth, x = e.clientX,
perc = x/w,
full_angle = -162,
to_angle = full_angle + (100 - perc)*full_angle,
txt = 'rotateY(' + to_angle + 'deg)',
prefixes = ['Webkit', 'Moz', /*'ms', 'O', */''],
len = prefixes.length,
property = 'Transform',
a = document.querySelector('.tiles'),
s = document.querySelector('.slider');
for(var i = 0; i < len; i++) {
if(prefixes[i] == '')
property = property.toLowerCase();
a.style[prefixes[i] + property] = txt;
}
s.style.backgroundPosition = (perc*100 - .5) + '% 50%';
}, false);
}());