Diskuze: Zkosení a animace elementu

Lulík

Člen

Lulík:1.8.2016 15:05

Ahoj,

prosím pomůžete mi? Potřebuji udělat plynulý animovaný přechod, nejspíše pomocí transition a transform, akorát se mi to nedaří správně nastavit, aby to vypadalo jak potřebuji.
Jde o to:
Mám dva obrázky (viz. příloha). Chci, aby při najetí myší na pravou stranu se mi zobrazil obrázek man.jpg a při najetí na levou stranu zobrazil woman.jpg. Samozřejmě, když to budu přepínat čistě pomocí :hover - bude to fungovat, ale nevypadá to dobře. Chtěl bych to udělat animované. Největší problém mám s tím, že ten přechod je zkosený, kdyby se jednalo o čtverec nějak bych si s tím poradil.

Jde to udělat pomocí CSS?

Předem děkuji.

Odpovědět

1.8.2016 15:05

Martin Štěpánek

Tvůrce

Martin Štěpánek :1.8.2016 15:39

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.

Nahoru Odpovědět

1.8.2016 15:39

Všechno jde naprogramovat, chce to jen čas a chuť...

Lulík

Člen

Lulík:1.8.2016 15:42

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?

Nahoru Odpovědět

1.8.2016 15:42

Lulík

Člen

Lulík:1.8.2016 15:49

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.

Editováno 1.8.2016 15:51

Nahoru Odpovědět

1.8.2016 15:49

Michal

Člen

Michal:1.8.2016 16:45

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;
}

Nahoru Odpovědět

1.8.2016 16:45

Lulík

Člen

Lulík:1.8.2016 17:14

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.

Nahoru Odpovědět

1.8.2016 17:14

Ondřej Štorc

Tvůrce

Ondřej Štorc:2.8.2016 2:56

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.

Editováno 2.8.2016 2:56

Nahoru Odpovědět

2.8.2016 2:56

Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..

Lulík

Člen

Lulík:2.8.2016 10:20

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.

Nahoru Odpovědět

2.8.2016 10:20

Michal

Člen

Michal:2.8.2016 11:39

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%;
}

Nahoru Odpovědět

2.8.2016 11:39