[css]změna velikosti img při animaci

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod dyžon 10. 7. 2020 20:03

zfravím,
potřeboval bych prosím poradit.
udělal jsem si takovou jednoduchou animaci shrnutí závěsu.
css:
Kód: Vybrat vše
.zaves {
    width: 1900px;
    height: 650px;
    display: block;
    background-color: red;
    -webkit-animation: shrn-zaves 3s linear;
    animation-duration: 2s;
    -webkit-clip-path: polygon(0 0, 1900px 0px, 1900px 650px, 0 650px);
    animation-fill-mode: forwards;
    background-image: url('../images/banner/opona_1.png');
    background-size: contain;
}

@keyframes shrn-zaves {
    12% {
        -webkit-clip-path: polygon(0 0, 1780px 0, 1900px 650px, 0 650px);
    }
    31% {
        -webkit-clip-path: polygon(0 0, 1520px 0, 1640px 650px, 0 650px);
    }
    70% {
        -webkit-clip-path: polygon(0 0, 1000px 0, 940px 650px, 0 650px);
    }
    80% {
        -webkit-clip-path: polygon(0 0, 1000px 0, 1040px 650px, 0 650px);
    }
    85% {
        -webkit-clip-path: polygon(0 0, 1000px 0, 970px 650px, 0 650px);
    }
    90% {
        -webkit-clip-path: polygon(0 0, 1000px 0, 1020px 650px, 0 650px);
    }
    100% {
        -webkit-clip-path: polygon(0 0, 1000px 0, 1000px 650px, 0 650px);
    }
}

html:
Kód: Vybrat vše
<div class="zaves">
   
</div>

animace divu proběhne, ale pozadí toho divu (image opona_1.png) zůstane v původní velikosti.
já bych potřeboval, aby pozadí při animaci měnilo velikost zároveň s divem class="zaves".
nevíte někdo, jak toho dosáhnout ??

a druhá věc je, že neproběhne animation-duration. animace se spustí hned po načtení.
díky za reakce.
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod Emil Pastelka 10. 7. 2020 20:46

Animujte i pozici pozadí viz příklad.

animation-duration je délka animace, to, co hledáte je animation-delay: 2s;
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 11. 7. 2020 07:42

díky za rychlou odpověď,
delay, jasně .. (sem ale hňup).
s animací taky dík, místo background-position měním background-size protože potřebuju, aby se závěs zhrnoval, ne posouval, ale problém je, že mám na té oponě vzor, respective fotky sportujících dětí a potřeboval bych, aby se to pozadí při animaci přesně přizpůsobilo momentálnímu tvaru závěsu.
tady je zhruba náčrt, jak by mohla ta opona ve finále vypadat ( je to jen pro představu, že ta opona není jednobarevná)
opona_2.png

nevím jestli to jde udělat jen pomocí css,
možná by to bylo lepší v jquery.
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod Emil Pastelka 11. 7. 2020 18:37

Tady je příklad, který by na to šel aplikovat. Váš obrázek by bylo třeba napozicovat (případně rozřezat) na jednotlivé bloky závěsu. Závěs nastavit ne červený, ale jako přechod v odstínech šedé a použít css background-blend-mode (prolne více definovaných pozadí jednoho objektu) v režimu multiply (násobení, bílá nedělá nic, černá obrázek ztmaví) - tím nasimulujete ty ohyby. Obrázek s dětmi pak bude "rovný" bez těch záhybů.

A taky se na to můžete vybodnout a udělat to jako video s průhledným pozadím, které pak jen posunete požadovaným směrem. :)
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 12. 7. 2020 06:39

děkuji,
moc si vážím toho, co děláte,
neměl jsem zatím čas to pořádně prohlídnout, za chvíli mizím na chalupu na narozeniny, ale myslím, že tohle taky není úplně ono.
aby jste tomu rozuměl, vytvořím si v Photoshopu oponu ve velkym rozlišení, kterou v práci v Rhinu navinu na zvlněnou plochu, kteou jsem udělal aby vypadala jak shrnutej závěs a na mé oponě se tak vytvořily reálný stíny.
není potřeba je tam přidávat.
teoreticky mi stačí, když se ten závěs stáhne jen jednoduše z prava do leva nastavením width, ale chtěl jsem to trochu oživit nějakou animací.
netušil jsem, že nepůjde roztahovat pozadí zároveň s elementem.
z narozek se vracím v úterý, tak se na to podívám pořádně.
zatím děkuji, přeji krásnou neděli.
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod Emil Pastelka 13. 7. 2020 09:25

Pokud byste to nechtěl vytvořit ve WebGL (3D), budou řešení v CSS vždy nějaké varianty připodobnění, ne naprosto věrného provedení. 3D deformace látky se pomocí pseudo 2,5D v CSS věrně udělat nedá.
To automatické prolnutí s přechodem v pozadí jsem myslel právě tak, abyste se vyhnul dalšímu kroku přípravy v 3D.
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 15. 7. 2020 13:43

hmmm, děkuji, tak trošku jsem to čekal.
TADY je youtube návod, jak vytvořit pěkny videjko shrnutí závěsu v Adobe After Effect CC, ktery bohužel nemám.
i tak by byl asi problém navinout misto jedné barvy moji grafiku.
bohužel je ten soft tak drahej, že to asi ani nebudu zkoušet v trialu.
videjko shrnutí a potom lehky vlnění závěsu ve smyčce by asi nebylo špatný, ale vůbec nevím jak na to. Photoshop, Corel, Rhino ani Adobe Ilustrátor, programy, ktery mohu použít bud doma, nebo v práci to podle mě neumí.
Asi nejlepší by bylo to WebGl, ale na to jsem koukal a to je na mě moc složitý.
pročetl jsem nějaky tutoriály a než bych se dostal k tomu, co potřebuji, by trvalo roky. :-D

takže jsem dost v pr... a budu to muset udělat jen pomocí css změnou width, bez vlnění :-S

našel jsem ještě knihovnu curtain.js, která používá právě WebGl, ale jako v tomhle úplná lama, nejsem schopnej napsat vertex shader, ani fragment shader, takže taky smutek :'(

nic no, každopádně děkuji za ochotu a osvětu .. :-) :oboze
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod Emil Pastelka 15. 7. 2020 17:39

Ten návod pro AE můžete praktici první 4 minuty ignorovat. To je o vytvoření motivu závěsu. To zásadní je až potom, kdy jde vlastně o deformaci animované bitmapy.
Pokud pracujete v Rhinu, pak můžete deformaci i render animace udělat v tom. Nicméně celou ideu animace jsem bral spíše jako vtipné řešení, ne jako doporučený postup. Přeci jen, bylo by to datově náročnější.
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 19. 7. 2020 10:50

tak jsem začal experimentovat s curtains.js a je to opravdu výborná knihovna.
podařilo se mi ji přizpůsobit k tomu, co potřebuji a to je realisticky vlnění závěsu.
html:
Kód: Vybrat vše
<div class="banner">
    <div id="opona" class="opona">
        <div id="canvas"></div>
            <div class="zaves" data-vs-id="vlneni-vs" data-fs-id="vlneni-fs">
                <img data-sampler="curtainSampler" src="~/images/banner/opona-nezvlnena.png" />
            </div>
    </div>
</div>
<script id="vlneni-vs" type="x-shader/x-vertex">
    precision mediump float;

    // default mandatory variables
    attribute vec3 aVertexPosition;
    attribute vec2 aTextureCoord;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    // custom variables
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    uniform float uMouseTime;
    uniform vec2 uMousePosition;
    uniform float uMouseMoveStrength;


    void main() {

    vec3 vertexPosition = aVertexPosition;

    // fix the curtain on top (y coord ranges from top : 1.0 to bottom : -1.0)
    float yCoordRatio = vertexPosition.y - 1.0;


    float distanceFromMouse = distance(vec2(uMousePosition.x, 0.0), vec2(vertexPosition.x, 0.0));

    float waveSinusoid = cos(10.0 * 1.5 * ((1.0 / (distanceFromMouse - 2.0)) - (uMouseTime / 500.0)));

    float xAttenuation = ((2.0 - abs(uMousePosition.x - vertexPosition.x)) / 2.0);
    float yAttenuation = ((-1.0 * uMousePosition.y) + 1.0) / 2.0;
    if(uMousePosition.y <= -1.0) {
    yAttenuation = yAttenuation + (uMousePosition.y + 1.0) * 1.5;
    }
    yAttenuation = clamp(yAttenuation, 0.0, 1.0);

    float curtainEffect = yCoordRatio  * waveSinusoid * uMouseMoveStrength * xAttenuation * yAttenuation;

    float xDisplacement = abs(yCoordRatio) * sign(vertexPosition.x);

    vertexPosition.z +=  curtainEffect / 30.0;
    vertexPosition.x +=  curtainEffect * 1.5 * xDisplacement / 240.0;

    gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);

    // varyings
    vTextureCoord = aTextureCoord;
    vVertexPosition = vertexPosition;
    }
</script>
<script id="vlneni-fs" type="x-shader/x-fragment">
    precision mediump float;

    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    uniform sampler2D curtainSampler;
    uniform sampler2D titleSampler;


    void main() {

    vec2 textureCoords = vec2(vTextureCoord.x, vTextureCoord.y);

    // slides transitions
    vec4 finalColor = texture2D(curtainSampler, textureCoords);
    vec4 title = texture2D(titleSampler, textureCoords);

    finalColor = mix(finalColor, title, title.a);

    finalColor.rgb -= clamp(-vVertexPosition.z / 5.0, 0.0, 1.0);
    finalColor.rgb += clamp(vVertexPosition.z / 5.0, 0.0, 1.0);

    // handling premultiplied alpha
    finalColor = vec4(finalColor.rgb * finalColor.a, finalColor.a);

    gl_FragColor = finalColor;
    }
</script>

css:
Kód: Vybrat vše
.banner {
    position: relative;
    flex-shrink: 0;
    background-color: #f8f8f8;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/banner/stena.webp');
    background-size: contain;
    opacity: 0;

    .opona {
        position: absolute;
        width: 99%;
        height: 81%;
        left: 0;
        top: .5%;
        text-shadow: 10px 10px 15px;
        -webkit-filter: drop-shadow(25px 5px 25px rgba(0, 0, 0, 0.6));
        filter: drop-shadow(25px 5px 25px #222);
        z-index: 51;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

#canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 55;
}

.zaves {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation: shrn-zaves 1.4s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

.zaves > img {
    display: none;
}

@keyframes shrn-zaves {
    0% {
        width: 100%;
    }

    70% {
        width: 60%;
    }

    100% {
        width: 62%;
    }
}

inicializace curtain.init.js - tady jsem vycházel ze šablony a promazal, co se dalo
Kód: Vybrat vše
function displayCurtains() {

    function lerp(start, end, amt) {
        return (1 - amt) * start + amt * end;
       
    }

    var mousePosition = {
        x: 0,
        y: 0,
    };
    var mouseLastPosition = {
        x: 0,
        y: 0,
    };
    var deltas = {
        max: 0,
        applied: 0,
    };

    function handleMovement(e, plane) {

        if (mousePosition.x != -100000 && mousePosition.y != -100000) {

            mouseLastPosition.x = mousePosition.x;
            mouseLastPosition.y = mousePosition.y;
        }

        var mouse = {};

        if (e.targetTouches) {

            mouse.x = e.targetTouches[0].clientX;
            mouse.y = e.targetTouches[0].clientY;
        }
        else {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        }

        // lerp myší pozice trochu vyhladit celkový efekt
        mousePosition.x = lerp(mousePosition.x, mouse.x, 0.3);
        mousePosition.y = lerp(mousePosition.y, mouse.y, 0.3);

        if (plane) { // myš na závěsu
            var mouseCoords = plane.mouseToPlaneCoords(mousePosition.x, mousePosition.y);
           
            // myš nesmí být příliš daleko pod záclonami, aby mohla aktualizovat uniformy
            if (mouseCoords.y > -1.25) {
                plane.uniforms.mousePosition.value = [mouseCoords.x, mouseCoords.y];

                if (mouseLastPosition.x && mouseLastPosition.y) {
                    var delta = Math.sqrt(Math.pow(mousePosition.x - mouseLastPosition.x, 2) + Math.pow(mousePosition.y - mouseLastPosition.y, 2)) / 30;
                    delta = Math.min(4, delta);
                    if (delta >= deltas.max) {
                        deltas.max = delta;
                    }
                }
            }
        }
    }

    var webGLCurtain = new Curtains({
        container: "canvas",
        premultipliedAlpha: true,
    });

    // zpracování chyb
    webGLCurtain.onError(function () {
        // přidáme třídu do těla dokumentu pro zobrazení původních obrázků
        document.body.classList.add("no-curtains");
    });

    var planeElements = document.getElementsByClassName("zaves");

    if (planeElements.length > 0) {

        var curtainPlaneParams = {
            widthSegments: 50,
            heightSegments: 37,
            watchScroll: false, // při scrolování zakáže vytahování závěsu.
            drawCheckMargins: {
                top: 0,
                right: 0,
                bottom: 100,
                left: 0,
            },
            uniforms: {
                mouseTime: {
                    name: "uMouseTime",
                    type: "1f",
                    value: 0,
                },
                mousePosition: {
                    name: "uMousePosition",
                    type: "2f",
                    value: [mousePosition.x, mousePosition.y],
                },
                mouseMoveStrength: {
                    name: "uMouseMoveStrength",
                    type: "1f",
                    value: 0,
                },
            },
        };

        var curtainPlane = webGLCurtain.addPlane(planeElements[0], curtainPlaneParams);

        // Pokud došlo k chybě během init, curtainPlane bude null
        if (curtainPlane) {
            var canvas = document.createElement("canvas");

            canvas.setAttribute("data-sampler", "titleSampler");
            canvas.style.display = "none";

            curtainPlane.loadCanvas(canvas);

            curtainPlane.onReady(function () {
                var wrapper = document.getElementById("opona");

                wrapper.addEventListener("mousemove", function (e) {
                    handleMovement(e, curtainPlane);
                });

                wrapper.addEventListener("touchmove", function (e) {
                    handleMovement(e, curtainPlane);
                }, { passive: true });

            }).onLoading(function (texture) {
                //texture.shouldUpdate = false;
                //if (curtainPlane.canvases && curtainPlane.canvases.length > 0) {
                //    // title
                //    //if (document.fonts) {
                //    //    document.fonts.ready.then(function () {
                //    //        //writeTitle(curtainPlane, canvas);
                //    //    });
                //    //}
                //    //else {
                //    //    setTimeout(function () {
                //    //        //writeTitle(curtainPlane, canvas);
                //    //    }, 750);
                //    //}
                //}

                if (curtainPlane.textures.length === 2) {
                    setTimeout(function () {
                        document.body.classList.add("curtain-ready");
                        deltas.max = 4;
                    }, 200);
                }
            }).onRender(function () {
                curtainPlane.uniforms.mouseTime.value++;

                // snížit pohyb myši s tlumením : pokud uživatel nepohybuje myší, efekt zmizí
                deltas.applied += (deltas.max - deltas.applied) * 0.02;
                deltas.max += (0 - deltas.max) * 0.01;

                // poslat novou hodnotu síly pohybu myši
                curtainPlane.uniforms.mouseMoveStrength.value = deltas.applied;

            }).onReEnterView(function () {
                // vynutit kreslení nadpisu, pokud byl při načítání stránky skrytý
                //curtainPlane.textures[1].needUpdate();
            }).onAfterResize(function () {
                //writeTitle(curtainPlane, canvas);
            });
        }
    }
}

window.addEventListener("load", function () {
    displayCurtains();
});

no a ještě je potřeba knihovna curtains.js, která je ke stažení v jednom z minulých příspěvků.

závěs se při načtení rozvlní, to samé při přejezdu myší, ale mám pořád problém, že se neshrnuje v animaci shrn-zaves.
fyzycky se ale stáhne, protože když změním velikost obrazu, třeba pravým myšítkem a prozkoumat v chrome, tak se vykreslí ve staženy velikosti. veškerá animace zvlnění pořád funguje.

už do toho čumím hrozně dlouho a pořád nemůžu přijít na to, jak docílit toho, aby proběhla viditelně ta animace shrnutí.
byl by někdo prosím tak laskav a prohlídl to, věřím, že zkušené oko odhalí problém snadněji.
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 19. 7. 2020 13:46

tak jsem to nakonec zkoušel v jquery a tohle stačí.
Kód: Vybrat vše
$(document).ready(function () {
    setTimeout(function () {
        $("canvas").animate({
            width: '60%',
        }, 2000, function () {
// další věci
            });
    }, 1000);
});

v css by to mělo fungovat taky,.. problém je, že se musí animace použít na element canvas, kterej generuje curtains.init.
teď je to nádhera ..
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod Emil Pastelka 19. 7. 2020 22:49

Máte nějakou ukázku online?
Emil Pastelka
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 20. 7. 2020 12:38

bohužel nee, až budu mít stránky hotové, pošlu soukromou zprávou odkaz na web.
teď už to tam mám, ale budu ještě měnit grafiku té opony, a stránky jsou rozpracované, to ukazovat nechci.
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků