Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Efeito parallax e carousel não funcionam

Fiz os mesmos passos indicados ppara construir o carousel e o parallax, mas não estão funcionando no meu computador. Já tentei ver o arquivo em dois navegadores, mas até o momento não está funcionando, inclusive, já baixei os arquivos para tentar copiar e colar para ver se funciona, mas ainda continua sem dar resultado. Os arquivos vou deixar no link abaixo: https://drive.google.com/file/d/1iM081xxbFCVBj_aXD1ypwBKZuQ54xbz5/view?usp=sharing

2 respostas

Boa tarde Lucas, Tudo bem ? Sobre o parallax você esqueceu de adicionar no css no Produto__foto a propriedade :

background-attachment: fixed;

adicionando essa propriedade a imagem pode ficar um pouco distorcida, devido ao :

    background-size: cover;
    background-position: center;

que você adicionou com os valores "errados", então de forma resumida, adicione o background-attachment e altere os valores do background-size e background-position, o código deve ficar assim:

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

    background-image: url(../img/produto-capa.png);
    background-attachment: fixed;

    background-size: 45rem;
    background-size: cover;
    background-position: -22% top;
    background-repeat: no-repeat;


}

Sobre o carrousel, é um erro de JavaScript, se você apertar f12 no navegador e olhar a aba console, provavelmente seu script está sendo bloqueado pelo CORs, sobre isso não consigo te ajudar, mas um rapaz deixou uma dica no forum, segue ela abaixo:

"Tenta utilizar uma abordagem cliente/servidor, pode ser utilizando um servidor Apache/Nginx

Pelo endereço do arquivo percebo que você deve estar usando o Windows, instala o XAMPP... nele vem um pacote com vários serviços, MySQL, PHP, etc... mas quando iniciar o aplicativo, inicie apenas o serviço do Apache.

Após isso basta você colocar seu index.html e script.js dentro da pasta htdocs (que fica na dentro da pasta onde você escolheu para instalar, geralmente C:/xampp/htdocs) que irá funcionar. Ai no navegador você irá acessar apenas digitando http://localhost"

Espero ter te ajudado ;D abraços !

solução!

Segui o passo a passo que você explicou acima e funcionou. Muito Obrigado

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software