Olá pessoal,
Gostaria de saber o que é preciso fazer para que o efeito de Paralaxe tenha efeito no Mozilla Firefox. No meu FF aparece os textos das palavras do header com o mesmo tamanho e sem o efeito de paralaxe.
Alguma sugestão?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá pessoal,
Gostaria de saber o que é preciso fazer para que o efeito de Paralaxe tenha efeito no Mozilla Firefox. No meu FF aparece os textos das palavras do header com o mesmo tamanho e sem o efeito de paralaxe.
Alguma sugestão?
Olá Hilton,
Para que o efeito Paralaxe tenha efeito no Mozilla Firefox, o mesmo desenvolveu o -moz-, que tem o objetivo de renderizar as páginas.
Olá Alison,
Já está com o prefixo -moz- mas não consigo o efeito no Firefox.
Então Hilton, coloca o código aqui, para nós tentarmos encontrar o problema.
Desculpe a demora. Segue o meu código. Obrigado pela ajuda Alison. Nesse código é pra rolar um efeito de paralaxe entre as "li". Talvez seja preciso redimensionar o browser(diminuir a altura da janela) para ver o efeito.
Desenvolvedor web
h1 { text-transform: uppercase; font-size: 3em; text-shadow: 5px 5px #000; }
.titulo { text-align: center; background-color: #851944; color: #FFF; padding: 2rem; border-bottom: .5rem solid #000; }
html,body { overflow-x: hidden; height: 100%; }
body { perspective: 6px; -webkit-perspective: 6px; -moz-perspective: 6px; perspective-origin: 50% 160px; -webkit-perspective-origin: 50% 160px; -moz-perspective-origin: 50% 160px;}
.foto-home { height: 200px; border-radius: 50%; box-shadow: 0 0 1em #000; }
.palavras-home { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; position: absolute; bottom: 0; right: 0; top: 0; left: 0; }
.palavra-home { font-family: "Shadows Into Light", cursive; font-weight: bold; color: #D5447E; position: absolute; }
.palavras-home li { font-size: 400%; }
.eficiencia { top: 50%; left: 60%; transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px) scale(0.25); -moz-transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px) scale(0.25); } .boas-praticas { top: 70%; left: 20%; transform: translate(-50%, -50%) rotate(10deg) translateZ(1px) scale(0.25); } .codigo-limpo { top: 45%; left: 25%; transform: translate(-50%, -50%) rotate(-10deg) translateZ(2px) scale(0.25); } .css3 { top: 55%; left: 35%; transform: translate(-50%, -50%) rotate(5deg) translateZ(2px) scale(0.25); } .html5 { top: 30%; left: 65%; transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25); } .javascript { top: 15%; left: 60%; transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px) scale(0.25); opacity: .3; } .acessibilidade { top: 30%; left: 35%; transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px) scale(0.25); opacity: .8; } .responsivo { top: 40%; left: 40%; transform: translate(-50%, -50%) rotate(10deg) translateZ(3px) scale(0.25); } .otimizacoes { top: 70%; left: 65%; transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px) scale(0.25); } .agilidade { top: 75%; left: 35%; transform: translate(-50%, -50%) rotate(5deg) translateZ(1px) scale(0.25); } .design { top: 40%; left: 60%; transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25); }
.titulo { position: relative; }
Alison, aqui você pode baixar o projeto completo até o final da aula do instrutor.
Olá Hilton,
Não é possivel visualizar o código do index que você postou, porque você não utilizou a crase(```). Então favor colocar novamente o código do index dentro da crase, para que assim eu possa tentar ajuda-lo.
Segue o exemplo abaixo:
Código aquiConforme o exemplo acima, com a utilização da crase antes e depois do código, percebe-se que o mesmo fica indentado.
Segue o código html Alison.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Representando o Paralaxe Aula</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/paralaxe-aula.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
</head>
<body>
<header class="titulo">
<img class="foto-home" src="../img/eu.jpg" alt="Foto de João da Silva">
<h1>João da Silva</h1>
<p class="subtitulo-principal">Desenvolvedor web</p>
<ul class="palavras-home">
<li class="palavra-home eficiencia">Eficiência</li>
<li class="palavra-home boas-praticas">Boas práticas</li>
<li class="palavra-home codigo-limpo">Código limpo</li>
<li class="palavra-home css3">CSS3</li>
<li class="palavra-home html5">HTML5</li>
<li class="palavra-home javascript">JavaScript</li>
<li class="palavra-home acessibilidade">Acessibilidade</li>
<li class="palavra-home responsivo">Responsivo</li>
<li class="palavra-home otimizacoes">Otimizações</li>
<li class="palavra-home agilidade">Agilidade</li>
<li class="palavra-home design">Design</li>
</ul>
</header>
<main>
</main>
</body>
</html>Olá Hilton,
Desculpe a demora, estou em semana de provas e está sendo muito corrido. Então voltando ao assunto, você esqueceu de colocar o atributo transform-style no seu titulo, implemente no seu CSS o código abaixo:
.titulo {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}Espero ter ajudado.
Obrigado pela ajuda Alison! Agora funcionou! Valeu! Muito obrigado! :)