Let’s create Parallax Depth Cards using HTML, CSS, and JavaScript. This project will feature cards that create a 3D parallax effect as the user hovers over them, providing a sense of depth and interactivity.
We’ll use HTML to structure the cards, CSS for styling and basic animations, and JavaScript to handle the parallax effect on hover.
Let’s get started on building the Parallax Depth Cards. Whether you’re a beginner or an experienced developer, this project offers a fun way to practice your web development skills and create a visually engaging experience. Let’s bring some depth to our designs!
HTML :
This HTML code creates a webpage with a responsive design, featuring a title and a set of image cards with a parallax hover effect. It includes external CSS for resetting styles and custom styles, as well as Vue.js for adding interactive functionality. Each card displays an image and text, and the entire page is structured to be visually appealing and interactive when users hover over the cards.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<title>Parallax depth cards</title>
</head>
<body>
<h1 class="title">Hover over the cards</h1>
<div id="app" class="container">
<card data-image="/image/bg1.png">
<h1 slot="header">Canyons</h1>
<p slot="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</card>
<card data-image="/image/bg2.png">
<h1 slot="header">Beaches</h1>
<p slot="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</card>
<card data-image="/image/bg3.png">
<h1 slot="header">Trees</h1>
<p slot="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</card>
<card data-image="/image/bg4.png">
<h1 slot="header">Lakes</h1>
<p slot="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</card>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS code styles a webpage with a parallax effect on cards, using custom fonts from Google. It sets a background color, font properties, and smooths text rendering for the body. The title is centered and styled with a specific font and color. The container holding the cards is flexibly arranged for responsiveness.
Each card has a 3D perspective, with hover effects that animate the background and card information. The card-info section is initially hidden and slides up with a fade-in effect when hovered. The cards themselves have a shadow and rounded corners, giving them a polished, modern look. The text within the cards uses distinct font families, sizes, and shadows for visual depth.
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700|Raleway:500,700');
body {
margin: 40px 0;
font-family: "Raleway";
font-size: 14px;
font-weight: 500;
background-color: #BCAAA4;
-webkit-font-smoothing: antialiased;
}
.title {
font-family: "Raleway";
font-size: 24px;
font-weight: 700;
color: #5D4037;
text-align: center;
}
p {
line-height: 1.5em;
}
h1 + p, p + p {
margin-top: 10px;
}
.container {
padding: 40px 80px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card-wrap {
margin: 10px;
transform: perspective(800px);
transform-style: preserve-3d;
cursor: pointer;
}
.card-wrap:hover .card-info {
transform: translateY(0);
}
.card-wrap:hover .card-info p {
opacity: 1;
}
.card-wrap:hover .card-info, .card-wrap:hover .card-info p {
transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-wrap:hover .card-info:after {
transition: 5s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 1;
transform: translateY(0);
}
.card-wrap:hover .card-bg {
transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0.8;
}
.card-wrap:hover .card {
transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;
}
.card {
position: relative;
flex: 0 0 240px;
width: 240px;
height: 320px;
background-color: #333;
overflow: hidden;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.card-bg {
opacity: 0.5;
position: absolute;
top: -20px;
left: -20px;
width: 100%;
height: 100%;
padding: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
pointer-events: none;
}
.card-info {
padding: 20px;
position: absolute;
bottom: 0;
color: #fff;
transform: translateY(40%);
transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-info p {
opacity: 0;
text-shadow: black 0 2px 3px;
transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-info * {
position: relative;
z-index: 1;
}
.card-info:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
background-blend-mode: overlay;
opacity: 0;
transform: translateY(100%);
transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.card-info h1 {
font-family: "Playfair Display";
font-size: 36px;
font-weight: 700;
text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
}
JavaScript :
This Vue.js code defines a card component that creates a 3D parallax effect on hover. The card tilts based on the mouse’s position, and the background image moves to enhance the effect. The component calculates the mouse position relative to the card and updates the transform styles accordingly. It also handles mouse events to reset the effect when the cursor leaves the card.
Vue.config.devtools = true;
Vue.component('card', {
template: `
<div class="card-wrap"
@mousemove="handleMouseMove"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
ref="card">
<div class="card"
:style="cardStyle">
<div class="card-bg" :style="[cardBgTransform, cardBgImage]"></div>
<div class="card-info">
<slot name="header"></slot>
<slot name="content"></slot>
</div>
</div>
</div>`,
mounted() {
this.width = this.$refs.card.offsetWidth;
this.height = this.$refs.card.offsetHeight;
},
props: ['dataImage'],
data: () => ({
width: 0,
height: 0,
mouseX: 0,
mouseY: 0,
mouseLeaveDelay: null }),
computed: {
mousePX() {
return this.mouseX / this.width;
},
mousePY() {
return this.mouseY / this.height;
},
cardStyle() {
const rX = this.mousePX * 30;
const rY = this.mousePY * -30;
return {
transform: `rotateY(${rX}deg) rotateX(${rY}deg)` };
},
cardBgTransform() {
const tX = this.mousePX * -40;
const tY = this.mousePY * -40;
return {
transform: `translateX(${tX}px) translateY(${tY}px)` };
},
cardBgImage() {
return {
backgroundImage: `url(${this.dataImage})` };
} },
methods: {
handleMouseMove(e) {
this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.width / 2;
this.mouseY = e.pageY - this.$refs.card.offsetTop - this.height / 2;
},
handleMouseEnter() {
clearTimeout(this.mouseLeaveDelay);
},
handleMouseLeave() {
this.mouseLeaveDelay = setTimeout(() => {
this.mouseX = 0;
this.mouseY = 0;
}, 1000);
} } });
const app = new Vue({
el: '#app' });
In conclusion, creating Parallax Depth Cards using HTML, CSS, and JavaScript has been an exciting and educational project. By combining HTML for structure, CSS for styling, and JavaScript for the interactive parallax effect, we’ve crafted a dynamic and visually engaging user experience. This project is perfect for adding depth and interactivity to your web designs.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
