Un sitio web de paralaje incluye imágenes fijas en el fondo que se mantienen en su lugar y el usuario puede desplazarse hacia abajo en la página para ver diferentes partes de la imagen. En este artículo, estamos creando una página web de paralaje usando HTML y CSS. Usaremos etiquetas básicas de HTML como div, párrafo y encabezado para escribir nuestro contenido y usaremos CSS para alinear y embellecer nuestro diseño HTML básico.
Acercarse:
- Hemos utilizado un elemento de contenedor y agregamos una imagen de fondo al contenedor. Luego hemos usado el archivo adjunto de fondo: fijo para crear el efecto de paralaje real.
- Para cada sección HTML le hemos dado una clase para que pueda ser objetivo en el CSS.
- En la página HTML tenemos divisiones y en cada división hay un encabezado y un pequeño párrafo. En el archivo CSS, hemos decorado nuestro texto y colocado el encabezado en una posición fija.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Styling the body */
* {
margin: 0px;
padding: 0px;
}
/* Styling the first parallax's
height, width and background color */
.parallax-1 {
width: 100%;
height: 600px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210402175040/back22.jpg');
background-size: 100% 100%;
background-attachment: fixed;
}
/* Styling the title of first parallax */
.parallax-1 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: 32px;
padding: 10px;
background-color: black;
color: white;
text-align: center;
}
/* Styling the second parallax's
height, width and background color */
.parallax-2 {
width: 100%;
height: 600px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210402175040/back22.jpg');
background-size: 100% 100%;
background-attachment: fixed;
}
/* Styling the title of second parallax */
.parallax-2 h2 {
margin: auto;
position: relative;
left: 500x;
top: 300px;
width: 250px;
height: 37px;
padding: 10px;
background-color: white;
color: black;
text-align: center;
font-size: 30px;
font-family: Verdana;
}
/* Styling the content or paragraph */
.para-1 {
padding: 50px;
background-color: black;
color: white;
font-size: 17px;
}
/* Styling the content or paragraph */
.para-2 {
text-align: center;
padding: 25px;
font-size: 17px;
font-family: Verdana;
background-color: black;
color: white;
}
</style>
</head>
<body>
<!-- Giving title of the first parallax -->
<div class="parallax-1">
<h2>SUSHANT GAURAV</h2>
</div>
<!--Content of first parallax -->
<div class="para-1">
<p>
Thankyou for showing interest,
here is a quick story of me and
this website. My programming
journey started back in 2019,
few months before I started
studying CSE in LNCT Bhopal.
I am currently in my second
year and doing Technical
Content Writing Internship
at GeeksForGeeks. I like
coding all kind of problems
from the very basic like adding
numbers to the complex ones like
competitive programming problems.
I love making projects and games.
Infact this website is one of my
Web Development Projects which
is built using HTML and CSS.<br>
<br>Languages known : C Language,
C++, JAVA, Python, JavaScript,
MySQL.<br> IT Constructs : Data
Structures and Algorithm, OOP,
HTML, CSS, LINUX, and Git & GitHub.
</p>
</div>
<!-- Giving title of the first parallax -->
<div class="parallax-2">
<h2>PROJECTS</h2>
</div>
<!--Content of first parallax -->
<div class="para-2">
<p>
Calendar ☀
Tic-Tac-Toe ☀
Quiz Game ☀
Survey Form ☀
Chat Bot in C ☀
Tribute Webpage ☀
Portfolio Website ☀
Guess the Number ☀
Rock Paper Scissor ☀
To-Do List using JS ☀
Notes Taker using JS ☀
BMI Calculator using JS ☀
Loan Calculator using JS ☀
Travel Management System ☀
Random Password Generator ☀
Different Management Systems
</p>
</div>
<!--This will be same as first parallax-->
<div class="parallax-1">
<h2>ACHIEVEMENTS</h2>
</div>
<div class="para-2">
<p>
Technical Content Writer
Intern at GeeksForGeeks ☀
Microsoft Learn Student
Ambassador - Beta ☀
Participant in GirlScript Summer
of Code 2021 ☀
Mentored HackTX Hackathon
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por imsushant12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA