Hozzáértők! Ezt hogyan kell megcsinálni CSS vagy esetleg javascriptben? Kurzor hatására forgó téglalap alakú"div"?
Van egy videóhátterem, és egy elválasztó sávom, ahova a feliratokat tettem, azt szeretném, hogy az elválasztó sáv ferde helyzetből kiindulva a kurzor hatásának megfelelően mozogjon
Az az elképzelésem, hogy létrehozok egy "div"-et és azt forgatom, de az a baj, hogy ahogy forog a "div" kitolja az ablakot
konkrétan ez a helyzet(a "div" túl növi magát az ablakon és meg lehet nézni hol a vége): [link]
ezt szeretném(akárhogy forog a "div" nem tudom megnézni hol végződik)
és ez történne, ha mozgatom az egeret:
ez a következő dolog, amit meg szeretnék oldani, de amíg az első problémát nem oldom meg, addig ennek nem tudok nekiállni
köszönöm!
válasza:Most hirtelen nekem is beletört a bicskám, de ez jó kiindulási alap lehet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="../jqrzy/jQrzy2.1.js"></script>
<style>
body{
background-color:black;
overflow: hidden;
}
#white {
position:absolute;
background-color: white;
}
#frame {
overflow: hidden;
color:white;
}
</style>
</head>
<body>
<div id="frame">
<div id="log"></div>
<div id="white" onmousemove="mousemove(event);"></div>
</div>
<script>
var white = document.getElementById("white");
var frame = document.getElementById("frame");
var log = document.getElementById("log");
frame.style.width = window.innerWidth;
frame.style.height = window.innerHeight;
white.style.height = Math.round(window.innerHeight)*4+"px";
white.style.width = Math.round(window.innerHeight)*4+"px";
white.style.top = -Math.round(window.innerHeight)+"px";
white.style.left = Math.round(window.innerWidth/1.5)+"px";
var degree = -15;
function mousemove(event){
var degree = (30*(event.clientX/window.innerWidth));
white.style.webkitTransform="rotate("+Math.round(degree)+"deg)";
white.style.msTransform="rotate("+Math.round(degree)+"deg)";
white.style.MozTransform="rotate("+Math.round(degree)+"deg)";
white.style.OTransform="rotate("+Math.round(degree)+"deg)";
white.style.transform="rotate("+Math.round(degree)+"deg)";
}
function mouseout(){
var degree = -15;
white.style.webkitTransform="rotate("+Math.round(degree)+"deg)";
white.style.msTransform="rotate("+Math.round(degree)+"deg)";
white.style.MozTransform="rotate("+Math.round(degree)+"deg)";
white.style.OTransform="rotate("+Math.round(degree)+"deg)";
white.style.transform="rotate("+Math.round(degree)+"deg)";
}
mousemove();
</script>
</body>
</html>
válasza: válasza:Belemásolom egy az egyben a Dreamweaverbe a kódot amit írtál, de még sytax errort ír ki az 50-es sorban:
"white.style.webkitTransform="rotate("+Math.round(degree)+"d"
, és ha kiveszem e <script></script> részt akkor sem jön be semmi fehér négyzet
Neked ezzel tényleg sikerült?? semmi hiba?
najó, másolási hiba volt, megoldottam, de
most meg az a helyzet, hogy nem úgy mozog ahogy szeretném, az is gond, hogy amint ráviszem az egeret, hirtelen ugrik egyet, ahelyett, hogy szépen mozogna, és ha a fekete háttérben van, akkor nem mozog
csinálok róla egy videót, hogy mit szeretnék pontosan!
válasza: válasza:erősen próbáltam mindent, belemásoltam a <body>-ba <body onmousemove="mousemove(event)>
ez nem volt jo
belemasoltam a css-be az sem
a body-n belulre ha beteszem akkor meg kiirja sargan es hibanak jelzi,
hogy erted ezt hogy masoljam bele a bodyba?
https://www.youtube.com/watch?v=s_f4yqnWwQA&feature=youtu.be
ez lenne a vegcel, a fekete savokat leszamitva
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!