Parallax 
Autor: Ronaldo Batista
Visitado 2148,
Seguidores 1,
Compartilhado 0
Alguem sabe como posso inserir este efeito parallax no X5
Publicado em
(Traduzido pelo Google) Excuse tradução e linguagem.
Para incorporar diretamente WebiteX5, o programa deve ser muito experiente e usar os painéis "Expert".
Mas, se desejado, seria possível conseguir isso de forma relativamente fácil, usando um DIV_CUSTOM + IFRAME.
Se você estiver interessado, faça esses pontos, caso contrário pode esquecer.
1) fazer um site simples para testar com pouco conteúdo, postagem, e colocar aqui o link: www.nomedosite/
2) perceber que paralaxe fundo em uma página separada, siga as instruções e enviar a página do site na rede com o cliente de FTP Filezilla tipo;
3) postar o link da página independente: www.nomedosite/nomedapágina.html
Então, vamos continuar com as minhas instruções, bastante simples.
Caso contrário, como eu disse, se você tiver problemas para executar os três pontos, para não considerar a minha mensagem.
Saudações.
(IT
) Scusa la traduzione ed il linguaggio.
Per incorporare direttamente in WebiteX5, occorre essere molto esperti del programma ed usare i pannelli "Esperto".
Ma, volendo, sarebbe possibile ottenere quell'effetto in modo relativamente semplice, usando un DIV_CUSTOM + IFRAME.
Se ti interessa, esegui questi punti, altrimenti come non detto.
1) realizzare un sito semplice per prova con pochi contenuti, pubblicare in rete, e mettere qui il LINK: www.nomesito/
2) realizzare quello sfondo parallasse in una pagina indipendente, seguendo le istruzioni, ed inviare la pagina nel sito in rete con client FTP tipo Filezilla;
3) postare il link della pagina indipendente: www.nomesito/nomepagina.html
Poi, continueremo con le mie istruzioni, abbastanza semplici.
Altrimenti, come già detto, se hai difficoltà ad eseguire i tre punti, non considerare il mio messaggio.
Saluti.
Autor
Boa tarde, enviei os arquivos para o servidor jquery-parallax.js e a pasta das imagens, inseri no site uma área HTML com o código abaixo, porem nada aparece, como posso fazer ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mouse Parallax Plugin Demo</title>
<style>
body {
padding: 0; margin: 0;
overflow: hidden;
}
.background {
position: absolute; top: -10%; left: -10%;
width: 120%; height: 120%;
z-index: 1;
font-family: Courier;
}
.cloud {
position: absolute; top: 0; left: 0;
width: auto; height: auto;
z-index: 2;
opacity: 0.8;
}
.header {
position: fixed; top: 0; left: 0;
width: 100%; height: auto;
padding: 12px 0;
text-align: center;
z-index: 100;
color: #fff;
font-family: Courier;
}
.header h1 {
font-size: 40px;
font-weight: lighter;
}
.header a {
font-size: 32px;
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid #fff;
color: #fff;
}
</style>
</head>
<body>
<header class="header">
<h1>jQuery Mouse Parallax Plugin Demo</h1>
<div class="jquery-script-ads" align="center"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
</header>
<img src="images/background.jpg" alt="New York" class="background">
<img src="images/1.png" alt="Clouds" class="cloud cloud1">
<img src="images/2.png" alt="Clouds" class="cloud cloud2">
<img src="images/3.png" alt="Clouds" class="cloud cloud3">
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="../jquery-parallax.js"></script>
<script>
$( document ).mousemove( function( e ) {
$( '.background' ).parallax( -30, e );
$( '.cloud1' ) .parallax( 10 , e );
$( '.cloud2' ) .parallax( 20 , e );
$( '.cloud3' ) .parallax( 30 , e );
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Autor
Consegui aqui inserindo o código na Boody, porem ao abrir o site ele perde a movimentação e proporção veja.
http://twcweb.com.br/projeto/teste.html
Como deveria ficar http://twcweb.com.br/projeto/example/index.html
<style>
#imContent {padding-top: 400px;}
</style>
<div ID="sfondofull" style="position:absolute; top:100px; left:0px; width:100%; height:400px">
<iframe src="http://twcweb.com.br/projeto/example/index.html" width="100%" height="450" ; scrolling="no" frameborder="no" allowtransparency="true"></iframe> </div>
Eu vi o tópico está bloqueado resolvido com a "correta".
Você realmente resolvido?
Se alguma coisa reabilita o tema, e saber se você ainda não resolvido. > exemplo clone
(IT - Ho visto l'Argomento chiuso, risolto con il "corretto".
Hai veramente risolto?
Casomai riabilita l'Argomento, e fare sapere se non hai ancora risolto. > esempio clone)
.
Autor
Bom dia amigo, ainda não consegui como você fez, pode me ensinar ?
... NO! IFRAME ...
<! - Painel de Especialistas - antes de fechar HEAD - Iniciar ->
<! - Painel de Especialistas - antes de fechar HEAD - END ->
Rigo 33-38 (Ctrl+U)
--------------------------------------------
<! - Painel de Especialistas - antes de fechar CORPO - Iniciar ->
<! - Painel de Especialistas - antes que o corpo de fechamento - END ->
Rigo 91-106 (Ctrl+U)
--------------------------------------------
fundo para todo o site, aqui:>> Passo 1 - Configurações > Avançado > Estatísticas, SEO e código > Opções na aba Avançadas | ▪Código personalizado | Antes de fechar a tag HEAD
--------------------------------------------
fundo para a casa, a página aqui: >> Passo 3 - Mapa > A janela Propriedades da Página > Opções na aba Avançadas | ▪Código personalizado | Antes de fechar a tag BODY
============================================
(IT) ... NO! IFRAME ...
<!-- pannello ESPERTO - prima della chiusura di HEAD - INIZIO -->
<!-- pannello ESPERTO - prima della chiusura di HEAD - FINE -->
Rigo 33 - 38 (Ctrl+U)
--------------------------------------------
<!-- pannello ESPERTO - prima della chiusura di BODY - INIZIO -->
<!-- pannello ESPERTO - prima della chiusura di BODY - FINE -->
Rigo 91 - 106 (Ctrl+U)
--------------------------------------------
sfondo per tutto il sito, qui: ***
--------------------------------------------
sfondo solo per la pagina home, qui: ***
.
ciao
Autor
Inseri o código nas áreas, porem ainda não está funcionando veja como fica estou te mandando o anexo.
não IFRAME
você tem que fazer como eu disse antes, diretamente no projeto.
no IFRAME
devi fare come ho detto prima, direttamente nel progetto.
.
Autor
voce pode me enviar o backup do x5 para eu abrir aqui e ver ?
manda no ***
Meu exemplo não é um projeto, mas é o clone de sua página online.
Cole o código que se segue nas respectivas seções indicadas.
O código pode ser visto com o Firefox ou o Chrome navegadores, operando os botões do teclado Ctrl+U
Il mio esempio non è un progetto, ma è il clone della tua pagina online.
Incollare il codice che segue nelle rispettive sezioni indicate.
Il codice si può vedere con il browser CHROME oppure FIREFOX, azionando i pulsanti della tastiera Ctrl+U
▪Código personalizado | Antes de fechar a tag HEAD
▪Código personalizado | Antes de fechar a tag BODY
.
ciao
Autor
Muito obrigado amigo deu certo, pelo que eu vi e entendi temos de compreender bem de código html, pois eu imaginava que era somente enviar os arquivos para o servidor e no arquivo index.html era só pegar seu código e inseri-lo na página, mais vi que você teve de criar outro código personalisado para poder inserir no projeto, isso sempre terá de ser feito até mesmo para inserir slides que sejam fora do sistema, muito obrigado pela ajuda aqui funcionou perfeitamente.