5
I have the following problem:
I have some sections on the page separate in Ivs. Two of these Ivs get an image like background and background-position:fixed, so when scrolling the page the images should scroll together, making that simple Parallax effect.
But in Google Chrome, when scrolling the page, the image does not follow and breaks.
Firefox works, and amazingly, so does IE!
It happens on the page "about".
p, h3 {
font-family: "Open Sans",sans-serif;
font-weight: 200;
}
ul {
list-style: outside none none;
}
.social p, a:hover, a:active {
text-decoration: none;
}
h1, h2, .menu, .ver-mais {
text-align: center;
}
.ver-mais, .promo-title, .header-bkg, .slide, .separator {
background: none repeat scroll 0 0 #00011c;
}
.social img, nav li, .box-purple, .ver-mais, .gallery img, .ambiente img, .reside a {
transition: all 1s ease 0s;
}
.promocoes, .wrapper-sobre, footer, .social p, a:hover, a:active, .menu ul li a {
color: #fff;
}
.promo-title, .ambiente h1, .portfolio .ver-mais:hover {
color: #ed297b;
}
.box-purple, .promocoes a, .ver-mais {
display: block;
}
.ambiente h3 {
border-bottom: 1px solid black;
margin-bottom: 20px;
padding-bottom: 5px;
}
.header-bkg, .slide .item, .ambiente img, .separator {
width: 100%;
}
.box-purple, .promocoes a {
padding: 10px 20px;
}
.promocoes ul li, .portfolio-item img, .contato {
padding: 10px;
}
.promocoes ul li, .ambiente p {
text-align: justify;
}
.ambiente a, .promo-title {
font-weight: bold;
}
.ver-mais, .ambiente h1 {
margin: 0 auto;
}
.galeria, .ambiente img, .atendimento, .sala-vip, .localizacao {
padding: 20px;
}
.menu {
font-size: 7em;
margin-right: 5%;
margin-top: 4%;
}
.header-bkg {
height: 140px;
opacity: 0.8;
position: absolute;
z-index: -1;
}
.slide {
margin-top: -20%;
z-index: -5;
}
.slide .item {
max-height: 500px;
opacity: 0.6;
}
.promo-bkg-img {
background: url("../img/tattoo_2.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.promo-bkg-filter {
background: none repeat scroll 0 0 rgba(0, 1, 28, 0.38);
}
.box-purple {
background: none repeat scroll 0 0 #46132d;
}
.box-purple:hover {
background: none repeat scroll 0 0 #7c2f57;
}
.promo-title {
font-size: 62pt;
letter-spacing: 0.7em;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}
.promo-list {
margin-bottom: 50px;
}
.portfolio-item img {
width: 90%;
}
.ver-mais {
color: #000;
}
.ambiente {
padding-bottom: 20px;
text-align: center;
}
.ambiente a {
color: #37011d;
}
.ambiente h1 {
border-top: 1px solid black;
width: 50%;
}
.ambiente img {
height: 300px;
}
.ambiente ul li {
list-style-type: square;
text-align: left;
}
.gallery img:hover, .ambiente img:hover {
box-shadow: 0 0 50px #999;
}
.separator {
height: 10px;
}
.social {
background: none repeat scroll 0 0 #010240;
text-align: center;
}
.social img {
margin: 20px;
width: 30%;
}
.social img:hover {
}
.sobre, .atendimento, .sala-vip {
background: url("../img/texture-bkg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.sobre h1, .atendimento h1, .sala-vip h1, .sobre h2, .atendimento h2, .sala-vip h2, .sobre p, .atendimento p, .sala-vip p {
color: #000;
}
.sobre img, .atendimento img, .sala-vip img {
margin: 2% 10%;
width: 80%;
}
.atendimento p, .sala-vip p {
color: #fff !important;
}
html {
height: 100%;
min-height: 100%;
}
body {
min-height: 100%;
}
html, body {
}
@media not all {
.equips, .sala-vip {
background-attachment: scroll;
}
}
.equips, .sala-vip {
padding: 5% 0;
}
.equips h1, .sala-vip h1 {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.equips {
background: url("http://oi61.tinypic.com/2vs1en8.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
}
.sala-vip {
background: url("http://oi61.tinypic.com/dph8n6.jpg") repeat fixed 0 0 / 100% auto rgba(0, 0, 0, 0);
}
.contato {
background: none repeat scroll 0 0 #000149;
font-size: 15pt;
}
.contato span {
font-size: 10pt;
}
input:focus, input:hover, textarea:focus {
background: none repeat scroll 0 0 #010240;
transition: all 0.5s ease-in 0s;
}
.footer {
background: none repeat scroll 0 0 #232323;
padding: 10px;
}
.reside {
float: right;
}
.reside a {
color: #d81900;
}
.reside a:hover {
color: #fff;
}
.navbar-nav {
height: 140px;
}
.pagina-ativa, .nav li:hover, .nav li:focus {
background: none repeat scroll 0 0 #ed297b;
height: 140px;
margin-top: -47px;
padding-top: 47px;
}
.nav .active, .nav li a:hover, .nav li a:focus {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.form-control, .btn-send {
background: none repeat scroll 0 0 #822c58;
border: medium none;
border-radius: 0;
color: #fff !important;
font-family: "Playball",cursive;
font-size: 16pt !important;
padding: 4px !important;
}
.form-control:-moz-placeholder, .btn-send:-moz-placeholder {
color: #ecaacc;
}
.form-control::-moz-placeholder, .btn-send::-moz-placeholder {
color: #ecaacc;
}
.btn-send {
background: none repeat scroll 0 0 #dc64a1;
color: #ecaacc !important;
}
.shot {
display: none;
opacity: 1;
}
.navbar-toggle .icon-bar {
background: none repeat scroll 0 0 white;
}
@media screen and (min-width: 320px) and (max-width: 380px) {
#logo {
margin-top: -20px;
width: 50%;
}
.promo-title {
font-size: 30pt;
letter-spacing: 0.3em;
}
.promocoes a {
padding: 10px 20px;
}
.promocoes ul li {
padding-bottom: 1px;
}
.ambiente img {
height: 200px;
width: 80%;
}
}
@media screen and (max-width: 620px) {
.promocoes, .sobre, .galeria {
background: url("../img/texture-bkg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
}
@media screen and (min-width: 410px) and (max-width: 620px) {
#logo {
width: 40%;
}
.promo-title {
font-size: 30pt;
letter-spacing: 0.3em;
}
.promocoes ul li {
padding-bottom: 1px;
}
}
@media screen and (min-width: 600px) and (max-width: 800px) {
#logo {
width: 70%;
}
.navbar-nav {
margin-top: -33px;
}
.slide {
height: 420px;
margin-top: -28%;
}
.promo-title {
font-size: 40pt;
letter-spacing: 0.5em;
}
.promocoes a {
padding: 10px 20px;
}
.promocoes ul li {
padding-bottom: 1px;
}
.ambiente img {
height: 400px;
width: 80%;
}
}
@media screen and (max-width: 760px) {
.container > .navbar-collapse {
margin: 0 auto;
}
.navbar-collapse {
padding: 20px 15px !important;
width: 100%;
}
.navbar-nav {
height: auto;
margin: 0 auto;
}
.menu {
background: none repeat scroll 0 0 #333349;
font-family: Arial;
font-size: 18pt;
margin-top: 20% !important;
}
.menu li:hover {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
height: auto;
margin: 0;
padding: 0;
}
.pagina-ativa {
height: auto;
margin: 0;
padding: 0;
}
}
@media screen and (min-width: 1020px) {
.slide .item {
max-height: 500px;
width: 100%;
}
.ambiente img {
height: 200px;
width: 100%;
}
}
@media screen and (min-width: 1280px) {
.slide .item {
max-height: 600px;
}
.ambiente img {
height: 300px;
width: 100%;
}
}
@media screen and (min-width: 1920px) {
.slide .item {
max-height: 1000px;
}
}<div class="wrapper-sobre">
<div class="sobre">
<div class="container ">
<div class="row">
<div class="col-md-12">
<h1>Sobre</h1>
<p>Há 6 anos o Jhony Bigu atua no mercado da tatuagem na Zona Norte e atualmente nas regiões do Itaim Bibi, Vila Nova Conceição e Vila Olímpia.</p>
<p>O Jhony Bigu esta altamente qualificados e apresenta um novo conceito de tatuagens personalizadas que segue um alto padrão de qualidade.</p>
<p>O tatuador Jhony Bigu é um profissional experiente e qualificado que está apto a ajuda-lo a encontrar ou criar o melhor desenho para sua tatuagem, prestando um atendimento personalizado desde a seleção de ideias até a elaboração da arte final para a tatuagem escolhida.</p>
</div>
<div class="col-md-12">
<div class="col-md-6">
<h2>Studio</h2>
<p>O Studio JB Tattoo está constantemente renovando seus equipamentos e materiais em busca da melhor tecnologia e qualidade disponível no mercado. </p>
</div>
</div>
</div>
</div>
</div>
<div class="equips fixbg" id="equipamentos">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<h1>Equipamentos</h1>
</div>
<div class="col-md-6 box-purple">
<p>
Todos os matérias utilizados no Studio são totalmente descartáveis nas tatuagens, evitando-se o risco
de contaminação cruzada. O Studio conta com um ambiente aconchegante para que seus clientes sejam
atendidos de forma bastante à vontade, tendo o máximo de conforto durante a elaboração dos desenhos,
assim como na realização dos procedimentos de tatuagens.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="atendimento" id="atendimento">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<h1>Atendimento</h1>
</div>
<div class="col-md-6 box-purple">
<p>Política de atendimento:
<ul>
<li>Cada sessão de tatuagem tem duração de 1 hora</li>
<li>Acima de uma sessão de tatuagem ocorrera com duração media de 3 horas (podendo variar de acordo com a resistência e condições de cada cliente).</li>
<li>Necessário o preenchimento de Termo de responsabilidade para todos os clientes.</li>
<li>Tatuagens para menores de idade somente na presença de um dos responsáveis e mediante o preenchimento do termo de responsabilidade e documentos de identificação com foto.</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="sala-vip fixbg" id="sala-vip">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Sala Vip</h1>
</div>
<div class="col-md-6 box-purple">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>How it looks when you scroll the page:
Searching the net, I found this possible solution:
$(document).scroll(function(){
$(this).find('.fixbg').hide().show(0);
});
But with this code, when scrolling the page, Scroll does not go to the end, hangs on the images and does not go down more.
I edited your question by placing a "code snippet" that would be an html+css+js code executable with your codes there. but the example does not become functional because of the images that are not available, would you be able to upload the images and update their origin in the snippet? or if you don’t know, comment here the link of the images and after I add them you can delete the comment.
– Paulo Roberto Rosa
Thanks!!! I’ll put the images there :D
– William Oliveira
Are you sure you’ve added all the html and css you need? because it didn’t look like the image you demonstrated, it must be missing something, I believe it is CSS :D
– Paulo Roberto Rosa
Vish... I use Less... I will do the following: I will compile and put there to stay straight. : D
– William Oliveira
I use Version 38.0.2125.122 of Chrome and it works normal! I tested it in other browsers and it flowed. I tested your code without javascript - Dude! I tested by the link you sent (http://server.gruporeside.com.br/jhonybigutattoo/public/index.php?canal=sobre) and this is normal. Chrome shows nothing and abnormality.
– user18183
Opa, verifies by this link Eduardo: http://server.gruporeside.com.br/jhonybigutattoo/public/index.php?canal=sobre
– William Oliveira
Cara! I tested by the link you sent (http://server.gruporeside.com.br/jhonybigutattoo/public/index.php?canal=sobre) and here it is normal. Chrome shows nothing and abnormality.
– user18183
Sorry, I think it was my missing information... Access the page on and try to scroll to the end... It hangs before the footer form.
– William Oliveira
I don’t understand exactly where you’re bugging but here at least if you take the class fixbg the scroll goes to the end, but I think the effect you want doesn’t work.
– haykou
Hi @haykou! So the effect works on Firefox, IE and everything else... Only on Chrome that won’t...
– William Oliveira