4
respostas

True Parallax não deu certo...

Quando coloquei o transform: translateZ(-1px); no CSS da classe produto__foto, a imagem mudou de lugar, mas não ficou pequena, continuou grande... não sei se é a imagem que veio, mas simplesmente não deu certo o true parallax... :(

Só não deu certo pra mim?

4 respostas

Fala Daniela, tudo bem?

O correto seria colocar também as propriedades translate e scale para que isso ocorra! Ficando assim:

.produto__foto {
    transform: translateZ(-1px) translate(-75%,  25%) scale(2.6);
}

Caso ainda não funcione, poderia por favor enviar o seu código Html e Css, completos por favor?

Aguardo sua resposta :D

Oi, Mateus!

Então, como a minha imagem está grande, usar o translate e o scale desse tamanho só deixou minha imagem mais estranha ainda, gigante!

O arquivo que veio no .rar (que gostaria muito que fosse .zip, pelo menos, diga-se de passagem) tinha 901 x 901 pixels... O da aula parecia menor no video!

Segue meu código, caso ajude:

HTML, parte do efeito true parallax:

<section class="produto">
            <div class="produto__foto"></div>
            <article class="produto__descricao container">
                <h2 class="produto__marca">
                    GATITO
                </h2>
                <div class="produto__divisao">
                    <p class="produto__preco">
                        R$ 128,90
                    </p>
                    <h3 class="produto__nome">
                        GATITO PRO PLAN SENSITIVE SKIN & STOMACH CAT FOOD
                    </h3> 
                    <p class="produto__texto">
                        The food you choose for your cat will help keep them happy, healthy, and feeling extraordinary. Help your cat be their best – inside and out – with the advanced nutrition of Gatito Pro Plan Sensitive Skin & Stomach formulas.
                    </p>
                    <p class="produto__texto">
                        When a cat has a sensitive stomach or irritable skin, it not only impacts which food they can eat, it can also affect their quality of life. Pro Plan Sensitive Skin & Stomach formulas are developed with specialized nutrition that promotes digestive health, healthy skin and a shiny coat.
                    </p>
                    <p class="produto__texto">
                        And because every cat is unique, we offer choices suited to their needs and preferences, such as options with salmon or lamb as the first ingredient, as well as lifestage and breed size-specific formulas.
                    </p>
                    <button class="produto__comprar">
                        COMPRAR
                    </button>
                </div>
            </article>
        </section>

CSS das partes envolvidas na aula:

.produto {
    display: flex;

    height: calc(100vh - 4.25rem);
}

.produto__foto {
    width: 40%;
    height: 100%;

    background-image: url(../img/produto-capa.png);
    /* background-attachment: fixed;
    background-size: 49rem;
    background-position: -22% top; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    transform: translateZ(-100px);

    z-index: -1;
}

.produto__descricao {
    width: 60%;

    padding-top: 3rem;

    box-sizing: border-box;

    color: var(--color-gray);

    background-image: var(--color-white);
}
@import url(_reset.css);
@import url(_variaveis.css);

html {
    height: 100vh;

    overflow: hidden;
}

body {
    font-family: 'Overpass', sans-serif;

    perspective: 100px;

    height: 100%;

    overflow-x: hidden;
    overflow-y: scroll;
}

.container {
    padding-right: 2rem;
    padding-left: 2rem;
} 

Ok Daniela! Mas como dito, eu preciso do código html e css por completo para que eu possa testar, pois pode ser que o erro esteja em algum outro lugar do código entende?

Porém pelo que eu observei no código até o momento você utiliza o valor de -100px para o translateZ, tente alterar para -1px também.

Oiee! Desculpa a demora!

Coloquei o repositório no Github pra dar pra ver o código completo: https://github.com/danicaus/gatito-store :)