Diskuze: Zkosení a animace elementu
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Zobrazeno 9 zpráv z 9.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Nejsem si jist, ale mám pocit, že tohle podle obrázku neuděláš, jinak by se ti začali kosit i ty postavičky. Na tohle potřebuješ přímo 2 divy (růžový a modrý) a do nich vložit obrázky postaviček. Následně divy transformovat, ale s tím už zkušenosti nemám.
Ještě na upřesnění chci docílit toho, aby se u modrého pruhu (zkosený) jakoby zvětšovala/zmenšovala šířka. Woman.jpg bude nad man.jpg a při najetí na část s man.jpg se zvětší o daný kus šířka. Jestli mi rozumíte?
Jedná se pouze o ilustrační obrázky, ta růžová a modrá nejde oddělit, jedná se o ucelený obrázek.
No to jsem zkoušel, pomocí více divů, ty jsem zkosil a do nich vložil obrázek který jsem zkosil na druhou stranu, aby byl rovný. To je okei. ale problém je s tou animací, když pomocí transition měním šířku, tak se zvětšuje jako obdélník a né jako zkosená strana.
Nevím, jestli by to šlo udělat nějak jednodušeji, ale pokud ti nevadí delší CSS zápis, pak by to mohlo vypadat takto. Použil jsem zde pouze 1 obrázek a ona posouvací lišta je obarvený a nakloněný <div>. Na JSFiddle jsem umístil živou ukázku.
HTML:
<div id="container">
<img src="img.jpg">
<div class="man">
<div class="color"></div>
</div>
</div>
CSS:
#container {
height: 400px;
width: 700px;
position: relative;
}
#container div, #container img {
height: 100%;
position: absolute;
}
.man {
margin-left: 50%;
width: 50%;
}
.man:hover > div {
margin-left: -10%;
width: 25%;
}
.color {
background-color: rgb(181, 230, 247);
margin-left: 20%;
transition: all 0.5s;
transform: skewX(11deg);
width: 0;
}
Jop, tohle přesně chci, ale právě problém je, že obrázky které jsem umístil sem jsou pouze ilustrativní pro jednoduší pochopení, v mém případě potřebuji takhle animovat dvě fotografie.
Napadalo mě něco v tom stylu, vytvořit zkosený div a v něm obrázek. Pomocí toho divu, kdy by se mu při :hover měnila šířka by zakrýval obrázek, ale vůbec se mi to nedaří nastavit.
Možná (určitě ) jdu na to moc složitě, takže jestli vás napadne jiné efektivnější řešení, třeba za použit JS, určitě budu rád, když se o něj podělíte.
Možná by to šlo udělat jen v css ale co třeba použit jquery a mít tam 3 divy, jedn modrý jeden růžový a jeden s tím zkosenim a pak by jsi jen měnil šířku toho růžového a modrého.
Javascript mi říká míň než css, ale kouknu na to jquery.
Problém je v tom, že mám dvě fotky, jednu fotku bych umístit do zpod a
druhou bych dal navrch a tu fotku navrchu bych chtěl jakoby při hoveru
ořezávat šikmo (měnit šířku, ale šikmo a zároveň nedeformovat
fotografii), takže nemůžu použít jednolitou barvu.
Možná, to jenom nechápu, tak jestli bys naznačil kód?
Pro lepší pochopení, jsem udělal GIF
Ale zatím děkuji všem za rady a tipy.
Zkusil jsem to z opačné strany - použil jsem 2 oddělené obrázky namísto jednoho. Bohužel nevím, zda ti to bude vyhovovat. Pro toto řešení potřebuješ dva oddělené samostatné obrázky a ne dvě dvojice obrázků.
Navíc zde musíš 1 obrázek vykreslovat dvakrát, protože vlivem CSS vlastnosti skewX vznikal v pravém horním rohu ustřižený kus pravého obrázku, takže je to zas o něco objemnější. Další nevýhodou je fakt, že zde pokulhává responzivita. Na několika místech jsem nemohl použít procenta, takže při změně velikosti galerie budeš muset opravit rozměry na více místech. Všechno by to vyřešila CSS vlastnost clip-path, ale ta není podporována ani v Exploreru, ani ve Firefoxu. Zde je opět ukázka na JSFiddle.
HTML:
<div class="container">
<img src="img1">
<div class="right">
<img src="img2">
</div>
<div class="corner">
<img src="img2">
</div>
</div>
CSS:
.container {
height: 400px;
overflow: hidden;
position: relative;
width: 600px;
}
.container img, .container div {
height: 100%;
position: absolute;
}
.container img {
width: 600px;
}
.right, .right img {
transition: all 0.5s;
}
.right {
overflow: hidden;
transform: skewX(11deg);
width: 40%;
margin-left: 60%;
z-index: 3;
}
.right img {
margin-left: -300px;
transform: skewX(-11deg);
}
.right:hover {
margin-left: 40%;
width: 60%;
}
.right:hover img {
margin-left: -180px;
}
.corner {
width: 10%;
margin-left: 90%;
overflow: hidden;
z-index: 2;
}
.corner img {
margin-left: -800%;
}
Zobrazeno 9 zpráv z 9.