Untitled
unknown
plain_text
2 years ago
23 kB
4
Indexable
Preciso de ajuda. Preciso fazer os componentes que tenham a classe "reveal" aparecerem se tornarem visíveis dentro dos limites da página durante o scroll. então quando um objeto entrar na tela, ele deve receber a classe "active" para ativar a transição. Pode me ajudar?
<template>
<!-- <div class="MarcaAgua">
<v-img :width="200" aspect-ratio="1/1" src="../assets/Logo.png"/>
</div> -->
<div class="NavBar">
<v-layout>
<div class="verticalCenter logo">
<v-img :width="70" aspect-ratio="1/1" src="../assets/Logo.png"/>
</div>
<div class="verticalCenter logoNames">
<v-img :width="250" aspect-ratio="1/1" src="../assets/LogoName.png"/>
</div>
<v-flex class="verticalCenter Buttons" v-if="extended">
<v-btn class="NavBarItems" @click="scrollToElement('AreasAtuacao')">
<span class="NavBarItems">Áreas de Atuação</span>
</v-btn>
<v-btn class="NavBarItems" @click="scrollToElement('SobreNos')">
<span class="NavBarItems">Sobre Nós</span>
</v-btn>
<!-- <v-btn class="NavBarItems" @click="scrollToElement('Avaliacoes')">
<span class="NavBarItems">Avaliações</span>
</v-btn> -->
<v-btn class="NavBarItems" @click="scrollToElement('contact')">
<span class="NavBarItems">Contato</span>
</v-btn>
<v-btn class="NavBarItems" @click="scrollToElement('Localizacao')">
<span class="NavBarItems">Localização</span>
</v-btn>
</v-flex>
<v-flex v-else class="verticalCenterGrid">
<v-btn class="collapsedButton verticalCenter" @click="OpnClsSidebar()">
<i class="fa-solid fa-bars collapsedButtonIcon"></i>
</v-btn>
</v-flex>
</v-layout>
</div>
<div class="sidebar" v-if="extendedSide">
<v-btn class="collapsedButton verticalCenter" @click="OpnClsSidebar()">
<i class="fa-solid fa-bars collapsedButtonIcon"></i>
</v-btn>
<v-layout>
<v-btn class="SidebarItems" @click="scrollToElement('AreasAtuacao')">
<span class="SidebarItems">Áreas de Atuação</span>
</v-btn>
</v-layout>
<v-layout>
<v-btn class="SidebarItems" @click="scrollToElement('SobreNos')">
<span class="SidebarItems">Sobre Nós</span>
</v-btn>
</v-layout>
<!-- <v-layout>
<v-btn class="SidebarItems" @click="scrollToElement('Avaliacoes')">
<span class="SidebarItems">Avaliações</span>
</v-btn>
</v-layout> -->
<v-layout>
<v-btn class="SidebarItems" @click="scrollToElement('contact')">
<span class="SidebarItems">Contato</span>
</v-btn>
</v-layout>
<v-layout>
<v-btn class="SidebarItems" @click="scrollToElement('Localizacao')">
<span class="SidebarItems">Localização</span>
</v-btn>
</v-layout>
</div>
<!-- início do conteúdo da página -->
<!-- slideshow component -->
<div v-if="contactExtended" class="slideshow">
<div class="image-container center">
<v-img :width="1100" aspect-ratio="1/1" id="ImageSlide" :src="require(`../assets/banners/${currentImageShown.name}`)" :class="{ 'fade-in': fadeIn, 'fade-out': fadeOut }"/>
<div class="overlay" ref="overlay">
<p class="FadeFromLeftTopText">{{ currentImageShown.text }}</p>
<div class="controls">
<!-- <button class="prev" @click="prevImage"><</button> -->
<i class="fa-solid fa-backward prev" @click="prevImage"></i>
<i class="fa-solid fa-forward next" @click="nextImage"></i>
<!-- <button class="next" @click="nextImage">></button> -->
</div>
</div>
</div>
</div>
<div v-else class="slideshow">
<div class="image-container center">
<v-img :width="1100" aspect-ratio="1/1" id="ImageSlide" :src="require(`../assets/banners/${currentImageShown.name}`)" :class="{ 'fade-in': fadeIn, 'fade-out': fadeOut }"/>
<div class="overlay" ref="overlay">
<p class="FadeFromLeftTopText">{{ currentImageShown.text }}</p>
<div class="controls">
<!-- <button class="prev" @click="prevImage"><</button> -->
<i class="fa-solid fa-backward prev" @click="prevImage"></i>
<i class="fa-solid fa-forward next" @click="nextImage"></i>
<!-- <button class="next" @click="nextImage">></button> -->
</div>
</div>
</div>
</div>
<!-- Areas de Atuação -->
<div class="BackgroundGradientBP">
<!-- Cards das Atuações -->
<h1 id="AreasAtuacao" class="Titulo">Áreas de Atuação</h1>
<div class="cardsflex center">
<v-card class="cardAtuacoes reveal">
<v-img id="cardImage" src="../assets/trabalhista.png"/>
<h3 class="TituloCards">Direito Trabalhista</h3>
<p class="textCards">Trabalho sem carteira assinada, Verbas Rescisórias, Férias Vencidas, Horas Extras, Adicional de Insalubridade e Periculosidade, Acúmulo de Função, Assédio Moral ou Sexual, Justa Causa Indevida e Rescisão Indireta.</p>
</v-card>
<v-card class="cardAtuacoes reveal">
<v-img id="cardImage" src="../assets/criminal.png"/>
<h3 class="TituloCards">Direito Criminal</h3>
<p class="textCards">Representação Criminal, Diligência em Sede Policial, Defesa em Processos Criminais e Recursos em Geral.</p>
</v-card>
<v-card class="cardAtuacoes reveal">
<v-img id="cardImage" src="../assets/previdenciario.png"/>
<h3 class="TituloCards">Previdenciário</h3>
<p class="textCards">Saiba qual a melhor aposentadoria para o seu caso!<br>Aposentadoria por Idade; Tempo de Contribuição; Aposentadoria Especial; Pensão por Morte; Auxílio Acidente; Auxílio Doença; Revisão da Vida Toda; entre outros. <br>Fale agora com um especialista no assunto.</p>
</v-card>
<v-card class="cardAtuacoes">
<v-img id="cardImage" src="../assets/familia.png"/>
<h3 class="TituloCards">Direito de Família</h3>
<p class="textCards">Fixação de Alimentos, Guarda e Regulamentação de Visitas. Revisão ou Exoneração de Alimentos, Alienação Parental.</p>
</v-card>
<v-card class="cardAtuacoes FadeFromLeft">
<v-img id="cardImage" src="../assets/inventario.png"/>
<h3 class="TituloCards">Inventário e Partilha</h3>
<p class="textCards">Elaboração de Inventário Extrajudicial em Cartório ou Judicialmente.</p>
</v-card>
<v-card class="cardAtuacoes FadeFromLeft">
<v-img id="cardImage" src="../assets/imobiliario.png"/>
<h3 class="TituloCards">Direito Imobiliário</h3>
<p class="textCards">Regularize seu imóvel extrajudicialmente em cartório ou através de ação de usucapião e tenha em mãos a escritura pública do seu bem, venha fazer uma consultoria.</p>
</v-card>
<v-card class="cardAtuacoes FadeFromLeft">
<v-img id="cardImage" src="../assets/contratos.png"/>
<h3 class="TituloCards">Contratos e Certidões Imobiliárias</h3>
<p class="textCards">Elaboramos seu Contrato de Venda e Compra, Locação, Direitos Possessórios e Cessão de Direitos Imobiliários, fale com um especialista.</p>
</v-card>
<v-card class="cardAtuacoes FadeFromLeft">
<v-img id="cardImage" src="../assets/consumidor.png"/>
<h3 class="TituloCards">Direito do Consumidor</h3>
<p class="textCards">Notificação Extrajudicial, Fraude contra Consumidores, Dano material e Dano Moral.</p>
</v-card>
<v-card class="cardAtuacoes FadeFromLeft">
<v-img id="cardImage" src="../assets/acessoria.png"/>
<h3 class="TituloCards">Assessoria Jurídica para Empresas</h3>
<p class="textCards">Elaboração de Contratos com colaboradores, consumidores, fornecedores, Notificações e Emissão de Termos e Certidões.</p>
</v-card>
<v-card class="AtuacoesButtonCard FadeFromLeft">
<p class="textoCardAtuacoes">Atuamos em diversas áreas e resolvemos todo tipo de problemas. Profissionais de qualidade consolidados no mercado!</p>
<v-btn class="buttonAtuacoes">Clique aqui para entrar em contato!</v-btn>
</v-card>
</div>
</div>
<!-- Sobre nós Extended-->
<div v-if="contactExtended" class="BackgroundPessoal">
<v-layout class="SobreNosItem" id="SobreNos">
<v-img :width="300" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
<div class="SobreNosTextDiv">
<h1 class="SobreNosTitulo">Sobre Nós</h1>
<p class="SobreNosText verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</v-layout>
<v-layout class="SobreNosItem">
<v-img :width="300" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
<div class="SobreNosTextDiv">
<h1 class="SobreNosTitulo">Sobre Nós</h1>
<p class="SobreNosText verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</v-layout>
<v-layout class="SobreNosItem">
<v-img :width="300" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
<div class="SobreNosTextDiv">
<h1 class="SobreNosTitulo">Sobre Nós</h1>
<p class="SobreNosText verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</v-layout>
</div>
<!-- Sobre nós Collapsed -->
<div v-else class="BackgroundPessoal">
<v-layout class="SobreNosItemColl" id="SobreNos">
<v-img :width="200" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
<div class="SobreNosTextDivColl">
<h1 class="SobreNosTituloColl">Sobre Nós</h1>
<p class="SobreNosTextColl verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</v-layout>
<v-layout class="SobreNosItemColl">
<v-img :width="200" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
<div class="SobreNosTextDivColl">
<h1 class="SobreNosTituloColl">Sobre Nós</h1>
<p class="SobreNosTextColl verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</v-layout>
<v-layout class="SobreNosItemColl">
<v-img :width="200" aspect-ratio="1/1" id="ImageSobreNos" src="../assets/Logo.png"/>
<div class="SobreNosTextDivColl">
<h1 class="SobreNosTituloColl">Sobre Nós</h1>
<p class="SobreNosTextColl verticalCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</v-layout>
</div>
<!-- Contato extended -->
<div class="orangeDivider"></div>
<div v-if="contactExtended" id="contact" class="contactsDiv">
<v-layout>
<div class="situacoesDiv">
<p class="TituloContact">ESTAMOS PREPARADOS PARA TE ATENDER NOS MAIS DIVERSOS CENÁRIOS!</p>
<div class="cenarioBundle">
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Trabalhista</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Criminal</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Previdenciário</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito de Família</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Inventário e Partilha</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Imobiliário</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Contratos e Certidões Imobiliárias</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito do Consumidor</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Assessoria Jurídica para Empresas</p>
</div>
</div>
<!-- <div class="midDivider"></div> -->
<div class="formsDiv">
<p class="TituloContact">ENTRE EM CONTATO!</p>
<v-layout class="fullwidth">
<input class="formInputs" v-model="infoEmail.name" type="text" name="nameInput" placeholder="Nome" id="nameInput">
</v-layout>
<v-layout class="fullwidth">
<input class="formInputs" v-model="infoEmail.mail" type="text" name="mailInput" placeholder="E-mail" id="mailInput">
</v-layout>
<v-layout class="fullwidth">
<input class="formInputs" v-model="infoEmail.phone" type="text" name="phoneInput" placeholder="Telefone / Celular" id="phoneInput">
</v-layout>
<v-layout class="fullwidth">
<input class="formInputs" v-model="infoEmail.subject" type="text" name="subjectInput" placeholder="Assunto" id="subjectInput">
</v-layout>
<v-layout class="fullwidth">
<textarea class="duvidaInput" v-model="infoEmail.body" name="bodyInput" placeholder="Descreva sua Dúvida" id="bodyInput"></textarea>
</v-layout>
<v-layout class="fullwidth">
<v-btn class="buttonContact" @click="enviarEmail(infoEmail)">SOLICITAR CONTATO</v-btn>
</v-layout>
</div>
</v-layout>
</div>
<!-- contato collapsed -->
<div v-else id="contact" class="contactsDivColl">
<div class="situacoesDivColl">
<p class="TituloContact">Estamos preparados para te atender em qualquer cenário!</p>
<div class="cenarioBundle">
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Trabalhista</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Criminal</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Previdenciário</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito de Família</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Inventário e Partilha</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito Imobiliário</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Contratos e Certidões Imobiliárias</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Direito do Consumidor</p>
<p class="cenario"><i class="fa-sharp fa-solid fa-caret-right"></i> Assessoria Jurídica para Empresas</p>
</div>
</div>
<!-- <div class="midDivider"></div> -->
<div class="formsDivColl">
<p class="TituloContact">Entre em contato!</p>
<v-layout class="fullwidth">
<input class="formInputs" v-model="infoEmail.name" type="text" name="nameInput" placeholder="Nome" id="nameInput">
</v-layout>
<v-layout class="fullwidth">
<input class="formInputs" v-model="infoEmail.mail" type="text" name="mailInput" placeholder="E-mail" id="mailInput">
</v-layout>
<v-layout class="fullwidth">
<input class="formInputs" v-model="infoEmail.phone" type="text" name="phoneInput" placeholder="Telefone / Celular" id="phoneInput">
</v-layout>
<v-layout class="fullwidth">
<input class="formInputs" v-model="infoEmail.subject" type="text" name="subjectInput" placeholder="Assunto" id="subjectInput">
</v-layout>
<v-layout class="fullwidth">
<textarea class="duvidaInput" v-model="infoEmail.body" name="bodyInput" placeholder="Descreva sua Dúvida" id="bodyInput"></textarea>
</v-layout>
<v-layout class="fullwidth">
<v-btn class="buttonAtuacoes" @click="enviarEmail(infoEmail)">Clique aqui para enviar</v-btn>
</v-layout>
</div>
</div>
<div class="orangeDivider"></div>
<!-- Mapa -->
<div class="BackgroundMap">
<div class="MapEnderecoDiv" id="Localizacao">
<h1 class="SobreNosTituloColl">Nossa Localização</h1>
<p class="EnderecoText verticalCenter">Av. Maria José de Siqueira Melo, 810C, Jd. Pamela, Biritiba-Mirim 08940-000</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3029.1210242820457!2d-46.04246548459155!3d-23.581274645862663!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cdc2c3bea9efa3%3A0x49e1e2c423b5bc3!2sAv.%20Maria%20Jos%C3%A9%20de%20Siqueira%20Melo%2C%20810%2C%20Biritiba%20Mirim%20-%20SP%2C%2008940-000!5e0!3m2!1spt-PT!2sbr!4v1680641291686!5m2!1spt-PT!2sbr"
class="MapObject"
width="600"
height="450"
style="border:0;"
allowfullscreen="false"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</template>
<script>
export default {
name: 'HomePage',
data(){
return{
extended: true,
extendedSide: false,
contactExtended: true,
fadeIn: true,
fadeOut: false,
linkMailTo: '',
mailTo: 'asmugho@gmail.com',
infoEmail: {
name: '',
mail: '',
phone: '',
subject: '',
body: '',
},
currentImageShown: {
name: 'banner1.png',
text: 'Acessoria Jurídica para Empresas',
},
images: [
{name: 'banner1.png', text: 'Acessoria Jurídica para Empresas'},
{name: 'banner2.png', text: 'Direito Trabalhista'},
// {url: '../assets/banners/banner1.png', description: 'Acessoria Jurídica para Empresas'},
// {url: '../assets/banners/banner1.png', description: 'Acessoria Jurídica para Empresas'},
],
currentIndex: 0,
intervalId: null,
delay: 10000,
}
},
// computed: {
// currentImage(){
// return {
// name: this.images[this.currentIndex].url,
// text: this.images[this.currentIndex].description
// }
// }
// },
mounted() {
this.currentImageShown = this.images[0]
this.intervalId = setInterval(this.nextImage, this.delay)
setTimeout(()=>{
document.querySelector('.FadeFromLeftTopText').classList.add('active')
}, 1000)
// window.addEventListener('scroll', this.checkFadeFromLeftElements())
},
beforeUnmount() {
clearInterval(this.intervalId)
},
created(){
// this.currentImageShown.path = this.images[this.currentIndex].url
// this.currentImageShown.text = this.images[this.currentIndex].description
this.logHeight()
this.collapseMenu()
this.collapseContact()
},
methods: {
// currentImage(){
// this.currentImageShown = this.images[this.currentIndex]
// },
collapseMenu() {
if (window.innerWidth <= 1200){
this.extended = false
}
else{
this.extended = true
this.extendedSide = false
}
},
collapseContact() {
if (window.innerWidth <= 900){
this.contactExtended = false
}
else{
this.contactExtended = true
}
},
logHeight(){
window.onresize = () => {
this.collapseMenu()
this.collapseContact()
}
},
OpnClsSidebar(){
this.extendedSide = !this.extendedSide
},
scrollToElement(elementId){
let elem = document.getElementById(elementId)
let y = elem.getBoundingClientRect().top + window.pageYOffset + -30
window.scrollTo({top: y, behavior: 'smooth'});
// document.getElementById(elementId).scrollIntoView({ behavior: 'auto', block: 'end' })
},
enviarEmail(info) {
const destinatario = "asmugho@gmail.com";
const assunto = info.subject
const corpo = `Olá, sou ${info.name}!\nMeu telefone para contato: ${info.phone}\n\n${info.body}`;
const linkEmail = "mailto:" + destinatario + "?subject=" + encodeURI(assunto) + "&body=" + encodeURI(corpo);
const link = document.createElement("a");
link.setAttribute("href", linkEmail);
link.click();
},
changeImage(){
this.currentImageShown = {
name: this.images[this.currentIndex].name,
text: this.images[this.currentIndex].text
}
},
nextImage() {
document.querySelector('.FadeFromLeftTopText').classList.remove('active')
this.fadeIn = false;
this.fadeOut = true;
setTimeout(() => {
this.currentIndex = (this.currentIndex + 1) % this.images.length;
this.fadeIn = true;
this.fadeOut = false;
this.changeImage()
document.querySelector('.FadeFromLeftTopText').classList.add('active')
}, 500);
},
prevImage() {
this.fadeIn = false;
this.fadeOut = true;
document.querySelector('.FadeFromLeftTopText').classList.remove('active')
setTimeout(() => {
this.currentIndex =
this.currentIndex === 0 ? this.images.length - 1 : this.currentIndex - 1;
this.fadeIn = true;
this.fadeOut = false;
this.changeImage()
document.querySelector('.FadeFromLeftTopText').classList.add('active')
}, 500);
},
reveal() {
const elements = document.querySelectorAll('.reveal')
console.log('olá')
elements.forEach((element) => {
// if element.getBoundingClientRect().top
element.checkVisibility()
console.log(element.getBoundingClientRect().top)
console.log(element.getBoundingClientRect().left)
})
},
}
}
</script>
<style scoped>
</style>Editor is loading...