Diskuze: Zkosení a animace elementu

HTML a CSS HTML a CSS Zkosení a animace elementu American English version English version

Avatar
Lulík
Člen
Avatar
Lulík:

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. srpna 15:05
Avatar
Odpovídá na Lulík
Martin Štěpánek (Enormyk):

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. srpna 15:39
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Lulík
Člen
Avatar
Odpovídá na Lulík
Lulík:

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. srpna 15:42
Avatar
Lulík
Člen
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
Lulík:

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. srpna 15:51
 
Nahoru Odpovědět 1. srpna 15:49
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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  +2 1. srpna 16:45
Avatar
Lulík
Člen
Avatar
Odpovídá na Oxtimus
Lulík:

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ě :D) 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. srpna 17:14
Avatar
Odpovídá na Lulík
Ondřej Štorc:

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. srpna 2:56
Nahoru Odpovědět 2. srpna 2:56
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Lulík
Člen
Avatar
Odpovídá na Ondřej Štorc
Lulík:

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. srpna 10:20
Avatar
Oxtimus
Člen
Avatar
Oxtimus:

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. srpna 11:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.