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?
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! :)