Diskuze: animace "hover" - dvě současně
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 6 zpráv z 6.
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Jdi na to přes CSS. Na tohle je zbytečné používat JavaScript 
Třeba takto:
<!doctype html>
<html>
<head>
<style type="text/css">
button {
transition: 0.5s transform;
border-radius: 8px;
border: 2px solid #CC0000;
margin-top: 13px;
margin-right: 15px;
margin-bottom: 18px;
margin-left: 13px;
background-color: #FFFFFF;
position: relative;
width: 186px;
height: 186px;
}
button img {
position: absolute;
left: 8px;
top: 8px;
}
button:hover {
margin-top: 11px;
margin-right: 14px;
margin-bottom: 15px;
margin-left: 12px;
border: 3px solid #CC0000;
}
</style>
<script>
var image = document.createElement("img");
image.width = "170";
image.height = "170";
image.src = "frontImage.png";
function zvetsit(el)
{
el.appendChild(image);
var pomer = 1.3;
var transformace = "scale(" + pomer + ")";
el.style["webkitTransform"] = transformace;
el.style["mozTransform"] = transformace;
el.style.oTransform = transformace;
el.style["MsTransform"] = transformace;
el.style.transform = transformace;
}
function transitionEnd(event)
{
this.removeChild(this.lastChild);
this.removeEventListener("transitionend", transitionEnd);
}
function zmensit(el)
{
el.addEventListener("transitionend", transitionEnd);
var pomer = 1;
var transformace = "scale(" + pomer + ")";
el.style["webkitTransform"] = transformace;
el.style["mozTransform"] = transformace;
el.style.oTransform = transformace;
el.style["MsTransform"] = transformace;
el.style.transform = transformace;
}
</script>
</head>
<body>
<button onmouseover="zvetsit(this)" onmouseout="zmensit(this)">
<img src="obr.jpg" width="170" height="170" alt="">
<!--<img src="frontImage.jpg" width="170" height="170" alt="">-->
</button>
</body>
</html>Já bych požil nějakou knihovnu na animaci.
Verquido, jak by to bylo pouze v CSS? Není tam nutné zachytit událost konce animace?
ajajaj... <:)
tak jasně CSS udělal bych v pohodě každý zvlášť
zvětšení přes "transaction" a prolnutí přes opacitu...
ale nevím jak dát dohromady dvě animace na dvou obrázcích
přes vrstvy (z-index)? a zároveňa aby to byl "a href" odkaz? jsem z toho
volako zmeteny...
potrápím se s tím kódem a dám vědět
díky moc.... <:)
Libor
Když ty obrázky od sebe nějak odlišíš (ID nebo classou) tak to nebude problém přes CSS, např.
button:hover > img.obrazek-zvetseni {
}
button:hover > img.obrazek-prekryti {
}lukáši, super... vypadá, že to funguje...
poladím to ke svému účelu a dám vědět jak to dopadlo <:)
(omlouvám se za nepřítomnost měl jsem teď čtvrt roku moc práce...)
Zobrazeno 6 zpráv z 6.