/* =========================
WRAPPER
========================= */
.pw-carousel-wrapper {
position: relative;
width: 100%;
max-width: 2200px;
height: 700px;
margin: 0 auto;
overflow: hidden;
}
/* =========================
TRACK
========================= */
.pw-carousel-track {
display: flex;
height: 100%;
transition: transform 0.6s ease;
}
/* =========================
SLIDES
========================= */
.pw-slide {
min-width: 100%;
height: 100%;
position: relative;
}
/* =========================
VIDEO
========================= */
.pw-video,
.pw-video iframe {
width: 100%;
height: 100%;
border: none;
}
/* =========================
PARALLAX
========================= */
.pw-parallax {
position: relative;
width: 100%;
height: 700px;
overflow: hidden;
background: #000;
}
/* 🔥 APENAS AS CAMADAS DO PARALLAX */
.pw-parallax-layers img {
position: absolute;
top: 0;
left: 50%;
height: 700px;
width: auto;
max-width: none;
transform: translateX(-50%);
will-change: transform;
pointer-events: none;
z-index: 1;
}
/* =========================
CARD GLASS
========================= */
.pw-glass-card {
position: absolute;
top: 50%;
left: 85px;
transform: translateY(-50%);
width: 360px;
height: 385px;
padding: 28px;
border-radius: 18px;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center; /* 🔥 centraliza logo e botão */
text-align: center;
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 20px 40px rgba(0,0,0,.25);
color: #fff;
}
/* =========================
TEXTO
========================= */
.pw-glass-card h3 {
margin: 0 0 12px;
font-size: 24px;
color: #606060;
width: 100%;
text-align: left;
}
.pw-glass-card p {
font-size: 15px;
color: #606060;
line-height: 1.6;
margin-bottom: 18px;
width: 100%;
text-align: left;
}
/* =========================
LOGO
========================= */
.pw-glass-card img {
display: block;
width: 260px;
max-width: 100%;
height: auto;
margin: 0px auto 0 auto; /* 🔥 CENTRALIZADA */
position: static;
}
/* =========================
BOTÃO
========================= */
.pw-glass-card .pw-btn {
display: inline-block;
margin: 10px auto 25px auto; /* 🔥 afasta ~15px do fundo */
padding: 8px 20px; /* 🔥 diminui a altura do botão */
border-radius: 6px; /* opcional: visual mais leve */
background: #606060;
color: #ffffff;
font-weight: 600;
font-size: 14px; /* opcional: mais compacto */
line-height: 1; /* 🔥 evita “engordar” o botão */
text-decoration: none;
}
/* =========================
NAV
========================= */
.pw-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 30;
background: rgba(0,0,0,0.5);
color: #fff;
border: none;
font-size: 46px;
padding: 8px 16px;
cursor: pointer;
}
.pw-nav.left { left: 20px; }
.pw-nav.right { right: 20px; }
Saiba mais
/* =========================
CARROSSEL + CONTROLE DE VÍDEO
========================= */
const track = document.querySelector('.pw-carousel-track');
const slides = document.querySelectorAll('.pw-slide');
const iframe = document.querySelector('.pw-video iframe');
let index = 0;
document.querySelector('.pw-nav.right').onclick = () => move(1);
document.querySelector('.pw-nav.left').onclick = () => move(-1);
function pauseVideo() {
if (!iframe) return;
iframe.contentWindow.postMessage(
JSON.stringify({
event: 'command',
func: 'pauseVideo',
args: []
}),
'*'
);
}
function move(dir) {
// 👉 se estava no vídeo e vai sair
if (index === 0 && dir !== 0) {
pauseVideo();
}
index += dir;
if (index = slides.length) index = 0;
track.style.transform = `translateX(-${index * 100}%)`;
handleCardAnimation();
}
/* =========================
ANIMAÇÃO DO CARD
========================= */
const card = document.querySelector('.pw-glass-card');
function handleCardAnimation() {
if (!card) return;
if (index === 1) {
card.classList.add('pw-card-show');
} else {
card.classList.remove('pw-card-show');
}
}
/* =========================
PARALLAX POR MOUSE
========================= */
const scene = document.querySelector('.pw-parallax');
const layers = document.querySelectorAll('.pw-parallax-layers img');
scene.addEventListener('mousemove', e => {
const rect = scene.getBoundingClientRect();
const centerX = rect.width / 2;
const mouseX = e.clientX - rect.left;
layers.forEach(layer => {
const speed = layer.dataset.speed;
const offset = (centerX - mouseX) * (speed / 100);
layer.style.transform =
`translateX(calc(-50% + ${offset}px))`;
});
});
Cenário Projeto Nanismo
Cenário criado em diferentes camadas para a animação em "paralaxe" da Cartilha Escola para Todos - Nanismo
Saiba mais