[HELP] Changement de taille du centre de l'image

19 avril 2018 à 11:03:40

Bonjour,

Je développe actuellement un compteur de vote pour un événement et j'ai un petit soucis.

J'ai donc les images des trois candidats avec un compteur qui s'incrémente à chaque clique et qui les compares pour leur appliquer une classe (premier deuxieme troisieme). Chaque classe applique à l'image un background et une taille différente. Le soucis c'est que cette transformation se fait via le coin supérieur gauche de l'image (0 0 du coup) ce qui leur donne un effet de déplacement pas top.

J'ai beau avoir cherché un peu partout je n'ai pas trouvé de solution pour faire en sorte que le changement se fasse du centre, auriez vous une idée?

Voici un gif d'illustration du problème:

http://www.image-heberg.fr/files/1524128480996226500.gif

EDIT: la gif ne marche pas voici une vidéo

https://vimeo.com/265531234

Voici mon code html:

 <div class="candidat">

        <div class="fix" id="fix1">
            <img src="photo1.jpg" height="200" id="imgvote1" class="picture" />
            <p class="R" id="R1"></p>
        </div>
        <div class="fix" id="fix2">
            <img src="photo2.jpg" height="200" id="imgvote2" class="picture" />
            <p class="R" id="R2"></p>
        </div>
        <div class="fix" id="fix3">
            <img src="photo3.jpg" height="200" id="imgvote3" class="picture" />
            <p class="R" id="R3"></p>
        </div>

    </div>

et le css

.fix {
    display: inline-block;
    text-align: center;
    line-height: 100%;
}

#fix1 {
    top:30%;
   left: 8%;
    position: absolute;
    text-align: center;
    transform: translateX(-25%) translateY(-25%);
    
}

#fix2 {
    top:30%;
    left:43%;
    position: absolute;
    text-align: center;
    transform: translateX(-25%) translateY(-25%);
   
}

#fix3 {
    top:30%;
    left:76%;
    position: absolute;
    text-align: center;
    transform: translateX(-25%) translateY(-25%);
   
}

.premier {
    height: 300px;
    width: 300px;

    padding: 100px;

    background: url(medaille1.png) no-repeat center;
    background-size: 100%;
    position: relative;
    align-content: center;
    box-shadow: 0px 0px 50px 10px #fab40a;
    text-align: center;
    transform-origin: 50% 50%;

}



.deuxieme {
    padding: 60px;
    height: 250px;
    width: 250px;
    background: url(medaille2.png) no-repeat center;
    background-size: 100%;
    position: relative;
    box-shadow: 0px 0px 50px 10px white;
    align-content: center;
    text-align: center;
    transform-origin: 50% 50%;
}

.troisieme {
    height: 180px;
    width: 180px;
    padding: 40px;

    background: url(medaille3.png) no-repeat center;
    background-size: 100%;
    position: relative;
    box-shadow: 0px 0px 50px 10px darkorange;
    align-content: center;
    text-align: center;
    transform-origin: 50% 50%;

}
.picture {
    padding: 100px;
    height: 200px;
    width: 200px;
}


#imgvote1 {

    border-radius: 50%;



    position: static;


}

#imgvote2 {
    position: static;


    border-radius: 50%;
    transform-origin: 50% 50%;
}

#imgvote3 {
    border-radius: 50%;
    transform-origin: 50% 50%;
    position: static;

}

Je pense pas que le code JS soit le problème du coup je ne le met pas sauf si vous pensez qu'il le faille.

-
Edité par GHANES OUTOUDERT 19 avril 2018 à 12:14:02

GHANES OUTOUDERT

20 avril 2018 à 11:21:02

Vous voulez pas répondre car j'ai pas bien formulé ou vous ne savez pas? C'est assez frustrant de voir le nombre de réponses sur les autre topics

philiga

20 avril 2018 à 11:42:21

Bonjour,

En fait, c'est parce qu'on ne savait pas si tu avais bien formulé...

Blague à part, avec un simple:

transform: scale(0.5);

tu ne devrais pas avoir de souci.

PS: Sinon, ton transform-origin: 50% 50%; (ou center) devrait fonctionner sauf qu'il est sur des classes inexistantes dans ton html...

-
Edité par philiga 20 avril 2018 à 11:52:31

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

GHANES OUTOUDERT

20 avril 2018 à 14:01:02

Ah bah c'est des classes qui sont implantées en Jquery en fait, donc elles sont pas directement sur le html. j'utilise pas un scale mais l'image et le padding de chaque classe est différent

(document).ready(function () {
    let x = 0;
    let y = 0;
    let z = 0;

    $('#imgvote1').click(function () {
        x++;
    });
    $('#imgvote2').click(function () {
        y++;
    });
    $('#imgvote3').click(function () {
        z++;
    });


    // Classement //

    $('#imgvote1, #imgvote2, #imgvote3').on('click', function () {
        $('#imgvote1,#imgvote2,#imgvote3').removeClass('picture');
        if (x > y && x > z) {
            if (y > z) {

                $("#mr1").html('Jafar premier');
                $('#imgvote1').addClass('premier');
                $('#imgvote1').removeClass('deuxieme');
                $('#imgvote1').removeClass('troisieme');

                $("#mr2").html('Hades deuxieme');
                $('#imgvote2').addClass('deuxieme');
                $('#imgvote2').removeClass('premier');
                $('#imgvote2').removeClass('troisieme');

                $("#mr3").html('Clayton troisieme');
                $('#imgvote3').addClass('troisieme');
                $('#imgvote3').removeClass('deuxieme');
                $('#imgvote3').removeClass('premier');
            } else {
                $("#mr1").html('Jafar premier');
                $('#imgvote1').addClass('premier');
                $('#imgvote1').removeClass('deuxieme');
                $('#imgvote1').removeClass('troisieme');

                $("#mr3").html('Clayton deuxieme');
                $('#imgvote3').addClass('deuxieme');
                $('#imgvote3').removeClass('premier');
                $('#imgvote3').removeClass('troisieme');

                $("#mr2").html('Hades troisieme');
                $('#imgvote2').addClass('troisieme');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('premier');
            }
        } else if (x > y || x > z) {
            if (x > y) {

                $("#mr1").html('Jafar deuxieme');
                $('#imgvote1').addClass('deuxieme');
                $('#imgvote1').removeClass('premier');
                $('#imgvote1').removeClass('troisieme');

                $("#mr3").html('Clayton premier');
                $('#imgvote3').addClass('premier');
                $('#imgvote3').removeClass('troisieme');
                $('#imgvote3').removeClass('deuxieme');


                $("#mr2").html('Hades troisieme');
                $('#imgvote2').addClass('troisieme');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('premier');

            } else if (x > z) {
                $("#mr1").html('Jafar deuxieme');
                $('#imgvote1').addClass('deuxieme');
                $('#imgvote1').removeClass('premier');
                $('#imgvote1').removeClass('troisieme');


                $("#mr3").html('Clayton troisieme');
                $('#imgvote3').addClass('troisieme');
                $('#imgvote3').removeClass('deuxieme');
                $('#imgvote3').removeClass('premier');

                $("#mr2").html('Hades premier');
                $('#imgvote2').addClass('premier');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('troisieme');
            }

        } else {
            if (y > z) {
                $("#mr1").html('Jafar troisieme');
                $('#imgvote1').addClass('troisieme');
                $('#imgvote1').removeClass('premier');
                $('#imgvote1').removeClass('deuxieme');


                $("#mr3").html('Clayton deuxieme');
                $('#imgvote3').addClass('deuxieme');
                $('#imgvote3').removeClass('troisieme');
                $('#imgvote3').removeClass('premier');

                $("#mr2").html('Hades premier');
                $('#imgvote2').addClass('premier');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('troisieme');
            } else {

                $("#mr1").html('Jafar troisieme');
                $('#imgvote1').addClass('troisieme');
                $('#imgvote1').removeClass('premier');
                $('#imgvote1').removeClass('deuxieme');
            }


            $("#mr3").html('Clayton premier');
            $('#imgvote3').addClass('premier');
            $('#imgvote3').removeClass('troisieme');
            $('#imgvote3').removeClass('deuxieme');

            $("#mr2").html('Hades deuxieme');
            $('#imgvote2').addClass('deuxieme');
            $('#imgvote2').removeClass('premier');
            $('#imgvote2').removeClass('troisieme');
        }


        if (y > z && y > x) {
            if (x > z) {
                $("#mr2").html('Hades premier');
                $('#imgvote2').addClass('premier');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('troisieme');

                $("#mr1").html('Jafar deuxieme');
                $('#imgvote1').addClass('deuxieme');
                $('#imgvote1').removeClass('premier');
                $('#imgvote1').removeClass('troisieme');


                $("#mr3").html('Clayton troisieme');
                $('#imgvote3').addClass('troisieme');
                $('#imgvote3').removeClass('deuxieme');
                $('#imgvote3').removeClass('premier');
            } else {


                $("#mr1").html('Jafar troisieme');
                $('#imgvote1').addClass('troisieme');
                $('#imgvote1').removeClass('premier');
                $('#imgvote1').removeClass('deuxieme');


                $("#mr3").html('Clayton deuxieme');
                $('#imgvote3').addClass('deuxieme');
                $('#imgvote3').removeClass('troisieme');
                $('#imgvote3').removeClass('premier');

                $("#mr2").html('Hades premier');
                $('#imgvote2').addClass('premier');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('troisieme');
            }
        }
// Egalités //

        if (x == y) {
            if (x, y > z) {
                $("#mr2").html('Hades premier');
                $('#imgvote2').addClass('premier');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('troisieme');

                $("#mr1").html('Jafar premier');
                $('#imgvote1').addClass('premier');
                $('#imgvote1').removeClass('deuxieme');
                $('#imgvote1').removeClass('troisieme');


                $("#mr3").html('Clayton deuxieme')
                $('#imgvote3').addClass('troisieme');
                $('#imgvote3').removeClass('deuxieme');
                $('#imgvote3').removeClass('premier');
            } else if (x, y < z) {

                $("#mr2").html('Hades deuxieme');
                $('#imgvote2').addClass('deuxieme');
                $('#imgvote2').removeClass('premier');
                $('#imgvote2').removeClass('troisieme');

                $("#mr1").html('Jafar deuxieme');
                $('#imgvote1').addClass('deuxieme');
                $('#imgvote1').removeClass('premier');
                $('#imgvote1').removeClass('troisieme');


                $("#mr3").html('Clayton deuxieme')
                $('#imgvote3').addClass('premier');
                $('#imgvote3').removeClass('deuxieme');
                $('#imgvote3').removeClass('troisieme');
            }

        } else if (x == z) {
            if (x, z > y) {
                $("#mr2").html('Hades troisieme');
                $('#imgvote2').addClass('troisieme');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('premier');

                $("#mr1").html('Jafar premier');
                $('#imgvote1').addClass('premier');
                $('#imgvote1').removeClass('deuxieme');
                $('#imgvote1').removeClass('troisieme');


                $("#mr3").html('Clayton premier')
                $('#imgvote3').addClass('premier');
                $('#imgvote3').removeClass('deuxieme');
                $('#imgvote3').removeClass('troisieme');
            } else if (x, z < y) {

                $("#mr2").html('Hades premier');
                $('#imgvote2').addClass('premier');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('troisieme');

                $("#mr1").html('Jafar deuxieme');
                $('#imgvote1').addClass('deuxieme');
                $('#imgvote1').removeClass('premier');
                $('#imgvote1').removeClass('troisieme');


                $("#mr3").html('Clayton deuxieme')
                $('#imgvote3').addClass('deuxieme');
                $('#imgvote3').removeClass('troisieme');
                $('#imgvote3').removeClass('premier');
            }

        } else if (y == z) {
            if (y, z > x) {
                $("#mr2").html('Hades premier');
                $('#imgvote2').addClass('premier');
                $('#imgvote2').removeClass('deuxieme');
                $('#imgvote2').removeClass('troisieme');

                $("#mr1").html('Jafar troisieme');
                $('#imgvote1').addClass('troisieme');
                $('#imgvote1').removeClass('deuxieme');
                $('#imgvote1').removeClass('premier');


                $("#mr3").html('Clayton premier')
                $('#imgvote3').addClass('premier');
                $('#imgvote3').removeClass('deuxieme');
                $('#imgvote3').removeClass('troisieme');
            } else if (y, z < x) {

                $("#mr2").html('Hades deuxieme');
                $('#imgvote2').addClass('deuxieme');
                $('#imgvote2').removeClass('troisieme');
                $('#imgvote2').removeClass('premier');

                $("#mr1").html('Jafar premier');
                $('#imgvote1').addClass('premier');
                $('#imgvote1').removeClass('troisieme');
                $('#imgvote1').removeClass('deuxieme');


                $("#mr3").html('Clayton deuxieme');
                $('#imgvote3').addClass('deuxieme');
                $('#imgvote3').removeClass('troisieme');
                $('#imgvote3').removeClass('premier');
            }

        }

        console.log(x, y, z);
    });

    // +1 pour img1//
    $('#imgvote1').on('click', function () {
        var $imgvote1 = $('#imgvote1');
        var offset = $imgvote1.offset();

        var t = offset.top;
        var l = offset.left;

        /*$('#R1').animate({
           'top': (t+200)+'px',
           'left': (l+200)+'px'
        }) */

        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        $('body').append('<div class="cinq"><img class="six" src="+13.png" height"30"/></div>');
        $('.cinq').css({
            'left': getRandomInt(-100, 1920),
            'top': 1000
        });


        $('.cinq').animate({
            'top': (t + 200) + 'px',
            'left': (l + 200) + 'px'
        }, 'slow', function () {

            $(this).fadeOut()
            $(this).remove();
            $('#imgvote1').addClass('scale');
            setTimeout(function () {
                $('#imgvote1').removeClass('scale');
            }, 100);

        });
    });




    //+1 pour img2// 
    $('#imgvote2').on('click', function () {
        var $imgvote2 = $('#imgvote2');
        var offset = $imgvote2.offset();
        var t2 = offset.top;
        var l2 = offset.left;

        /*var $R2 = $('#R2')

        $('.button').click(function(){
        if ( $imgvote2.hasClass('premier')){
           $R2.animate({
           'top': (t2+200)+'px',
           'left': (l2+200)+'px'});
        }
         else if( $imgvote2.hasClass('deuxieme')){
           $R2.animate({
           'top': (t2+200)+'px',
           'left': (l2+200)+'px'});
         }
        else if( $imgvote2.hasClass('troisieme')){
           $R2.animate({
           'top': (t2+30)+'px',
           'left': (l2+30)+'px'});
         }

        }); */


        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        $('body').append('<div class="cinq"><img class="six" src="+13.png" height"30"/></div>');
        $('.cinq').css({
            'left': getRandomInt(10, 1920),
            'top': 1000
        });


        $('.cinq').animate({
            'top': (t2 + 200) + 'px',
            'left': (l2 + 200) + 'px'
        }, 'slow', function () {

            $(this).fadeOut();
            $(this).remove();
            $('#imgvote2').addClass('scale');
            setTimeout(function () {
                $('#imgvote2').removeClass('scale');
            }, 100);
        });
    });

    //+1 pour img3// 
    $('#imgvote3').on('click', function () {
        var $imgvote3 = $('#imgvote3');
        var offset = $imgvote3.offset();

        var t3 = offset.top;
        var l3 = offset.left;

        /*$('#R3').animate({
           'top': (t3+300)+'px',
           'left': (l3+300)+'px'
        }) */

        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        $('body').append('<div class="cinq"><img class="six" src="+13.png" height"30"/></div>');
        $('.cinq').css({
            'left': getRandomInt(10, 1920),
            'top': 1000
        });


        $('.cinq').animate({
            'top': (t3 + 200) + 'px',
            'left': (l3 + 200) + 'px'
        }, 'slow', function () {

            $(this).fadeOut();
            $(this).remove();
            $('#imgvote3').addClass('scale');
            setTimeout(function () {
                $('#imgvote3').removeClass('scale');
            }, 100);
        });
    });


    $('.button').on('click', function () {
        $('#R1').html(x);
        $('#R2').html(y);
        $('#R3').html(z);
    });


});

-
Edité par GHANES OUTOUDERT 20 avril 2018 à 14:03:09

philiga

20 avril 2018 à 14:40:00

Pff... quelle usine à gaz!

Je ne comprends pas cette phrase: "j'utilise pas un scale mais l'image et le padding de chaque classe est différent"

quels rapports entre tout ça?

Ce ne serait pas plus simple avec scale ?

Et pourquoi ces position:static; ?

Est-ce que ce ne sont pas eux qui perturberaient le transform-origin ?

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

GHANES OUTOUDERT

20 avril 2018 à 14:54:39

philiga a écrit:

Pff... quelle usine à gaz!

Je ne comprends pas cette phrase: "j'utilise pas un scale mais l'image et le padding de chaque classe est différent"

quels rapports entre tout ça?

Ce ne serait pas plus simple avec scale ?

Et pourquoi ces position:static; ?

Est-ce que ce ne sont pas eux qui perturberaient le transform-origin ?

Désolé je débute j'optimiserai mon code quand ce sera fini.

Et bien j'utilise une taille image différente pour chaque classe. Mais tu as raison. Je vais essayer avec le scale et le transform origin ça devrait marcher. (et pour le padding c'est pour que la médaille en arrière plan soit visible)

Pour ce qui est des incohérences dans le code genre les static c'est juste des test que j'ai fais pour essayer de bloquer mes div etc bref c'est un peu expérimental.

-
Edité par GHANES OUTOUDERT 20 avril 2018 à 14:55:30

philiga

20 avril 2018 à 15:07:19

Avec scale, tu n'as pas à te soucier de l'origine, ton image est agrandie depuis son centre.

C'est louche tes static en effet ; pourquoi dépositionner un élément au moment où on cherche à lui appliquer des transformations?

Il y a de quoi perturber le fonctionnement du navigateur surtout que tu l'appliques parfois avant, parfois après le transform-origin.

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)