Introdução
Neste projeto, você aprenderá como criar um aplicativo web de carrossel Swiper que apresenta um layout de carrossel visualmente atraente com conteúdo temático cósmico. O aplicativo permitirá que os usuários naveguem por diferentes slides e visualizem cartões com fatos interessantes sobre o universo.
Aqui está uma prévia do carrossel Swiper:
🎯 Tarefas
Neste projeto, você aprenderá:
- Como construir o esqueleto HTML para o aplicativo web
- Como incorporar o carrossel Swiper na estrutura HTML
- Como adicionar círculos e círculos flutuantes animados ao fundo do aplicativo
- Como implementar resets CSS fundamentais para garantir uma estilização consistente em todos os navegadores
- Como estilizar a seção principal e o content holder do aplicativo
- Como projetar e animar círculos flutuantes no fundo
- Como estilizar o carrossel Swiper e seus componentes
- Como inicializar o carrossel Swiper usando JavaScript
🏆 Conquistas
Após concluir este projeto, você será capaz de:
- Criar um aplicativo web de carrossel Swiper visualmente atraente com conteúdo temático cósmico
- Implementar a estrutura e o layout HTML para o aplicativo web
- Aplicar estilização CSS e animações para aprimorar a interface do usuário
- Utilizar JavaScript para inicializar e configurar o carrossel Swiper
Construa o Esqueleto HTML
Requisitos:
- Incorporar as meta tags essenciais para definir o conjunto de caracteres e as configurações da viewport.
- Linkar folhas de estilo e scripts externos.
Funcionalidade:
- Gerar um layout HTML fundamental para construir sobre ele.
Passos:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Swiper Carousel</title>
<link rel="stylesheet" href="./style.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
</head>
<body>
<!-- partial -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
<!-- We'll slot in our Swiper carousel structure next -->
<!-- Scripts: Swiper library and our custom logic -->
<script src="./script.js"></script>
</body>
</html>
Incorpore o Carousel Swiper no HTML
Requisitos:
- Um local estrutural dentro do HTML para abrigar o conteúdo do nosso carrossel.
- Elementos de paginação para navegação.
Funcionalidade:
- Incorporar um layout de carrossel que pode ser estilizado e tornado interativo.
Passos:
Anexe isto dentro da tag <body> em index.html:
<section>
<div class="content">
<div class="swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card">
<h1>Cosmic Ballet</h1>
<p>
The universe is not just a vast expanse of darkness; it's a
dynamic stage of cosmic ballet. Galaxies dance, stars are born
and die, and black holes roam, all governed by the timeless
rhythm of gravitational forces.
</p>
<button class="read-more">Read More</button>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<h1>Dark Secrets</h1>
<p>
For all its luminous stars and galaxies, the universe hides more
than it reveals. Dark matter and dark energy, invisible and
mysterious, make up 95% of the universe, holding the cosmos
together and driving its expansion.
</p>
<button class="read-more">Read More</button>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<h1>Time's Relativity</h1>
<p>
In the vast cosmos, time is relative. Near massive objects like
black holes, time seems to slow down. What feels like minutes
there could equate to years elsewhere, making the universe a
theater of time's elasticity.
</p>
<button class="read-more">Read More</button>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</section>
Incorpore os Círculos no HTML
Requisitos:
- Para obter muitas bolhas redondas, adicione
<ul>e<li>.
Funcionalidade:
- Muitas bolhas de tamanhos diferentes são animadas no fundo da página.
Passos:
<section>
<!--swiper content...-->
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
Implementando os Resets CSS Fundamentais
Requisitos:
- Obter uma aparência consistente em diferentes navegadores.
- Resetar as margens, preenchimentos (padding) e dimensões de caixa padrão do navegador.
Funcionalidade:
- Anular quaisquer estilos padrão do navegador para garantir que nossa estilização permaneça consistente em vários navegadores.
Passos:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Estilizando a Seção Principal e o Content Holder
Requisitos:
- Uma seção principal que ocupe toda a viewport (área de visualização).
- Um content holder visualmente atraente com dimensões e estilização específicas.
Funcionalidade:
- Estilizar a seção principal e o content holder para que ambos fiquem centralizados e dar a eles uma aparência com tema cósmico.
Passos:
section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: #7883a1;
min-height: 100vh;
overflow: hidden;
}
.content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0) 100%
);
backdrop-filter: blur(30px);
border-radius: 20px;
width: min(900px, 100%);
z-index: 10;
}
Design de Círculos Flutuantes Animados
Requisitos:
- Um fundo dinâmico para a seção principal.
- Círculos flutuantes que se movem e mudam de aparência ao longo do tempo.
Funcionalidade:
- Enriquecer o fundo com círculos gradientes animados que levitam, giram e mudam a opacidade para aprimorar o engajamento do usuário.
Passos:
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background-color: #0f75c3;
background-image: linear-gradient(
225deg,
#67d0f6 0%,
#a7ec67 50%,
#c27ee4 100%
);
animation: animate 10s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 50px;
height: 50px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 10s;
}
.circles li:nth-child(3) {
left: 70%;
width: 30px;
height: 30px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 15s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 25px;
height: 25px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 80px;
height: 80px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 35s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 40px;
height: 40px;
animation-delay: 0s;
animation-duration: 10s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 100%;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 100%;
}
}
Estilizando o Carrossel Swiper
Requisitos:
- Uma estrutura de carousel (carrossel) amigável ao usuário.
- Slides e cartões de conteúdo estilosos e fáceis de navegar.
Funcionalidade:
- Embelezar o carousel Swiper e seus componentes para garantir que sejam responsivos, intuitivos e esteticamente agradáveis.
Passos:
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper {
width: 100%;
/* Ajustado para ocupar a largura total do seu container */
height: 600px;
/* Altura ajustada */
padding: 50px 0;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-container {
width: 90%;
/* Ajustado para ocupar a maior parte da largura do seu container */
height: 80%;
/* Ajustado para ocupar a maior parte da altura do seu container */
}
.card {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
text-align: center;
width: 100%;
/* Ajustado para ocupar a largura total */
height: 100%;
/* Ajustado para ocupar a altura total */
display: flex;
flex-direction: column;
justify-content: center;
/* Centraliza o conteúdo do cartão verticalmente */
}
.card h1 {
margin-bottom: 20px;
font-size: 1.5em;
color: #fff;
}
.card p {
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.8);
}
.read-more {
background-color: #6bd6ee;
font-size: 20px;
border: none;
border-radius: 5px;
color: #fff;
padding: 15px 15px;
cursor: pointer;
transition: background-color 0.3s;
}
.read-more:hover {
background-color: #9bd92f;
}
Inicializando o Carrossel Swiper
Requisitos:
- Um carousel que responde à entrada do usuário.
- Transições suaves entre os slides.
- Paginação funcional para navegação.
Funcionalidade:
- Utilizar JavaScript para dar vida ao carousel Swiper, permitindo transições dinâmicas e navegação entre os cartões de conteúdo.
Passos:
const swiper = new Swiper(".swiper-container", {
speed: 400,
spaceBetween: 100,
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
Executando o Aplicativo
- Abra
index.htmlem um navegador web.
- Teste a aplicação adicionando despesas e verificando se a lista de despesas e o resumo são atualizados corretamente.
- O efeito da página é o seguinte:
Resumo
Parabéns! Você agora forjou um esplêndido carousel Swiper do zero. Este projeto guiou você pelos passos de configuração de arquivos essenciais, esculpindo uma estrutura HTML, tecendo estilos CSS detalhados, salpicando magia JavaScript e, finalmente, lançando o projeto. Sinta-se à vontade para expandir esta base incorporando mais slides, personalizando o design ou infundindo recursos Swiper adicionais. Continue brilhando e feliz codificação!
