Parallax Depth Cards

Developer
Andy Merskin
Size
5,579 Kb
Views
89,056
  1. Parallax Depth Cards Previews
  2. Parallax Depth Cards HTML Codes
  3. Parallax Depth Cards CSS Codes
  4. Parallax Depth Cards JS Codes

How do I make an parallax depth cards?

After playing the Gwent Closed Beta from CD Projekt Red, I had to try this concept of parallaxed backgrounds and layers in cards. I'm thinking this could be really nice for my next portfolio site.. What is a parallax depth cards? How do you make a parallax depth cards? This script and codes were developed by Andy Merskin on 08 August 2022, Monday.

Parallax Depth Cards Previews
IQ Test

Parallax Depth Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Depth Cards</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Playfair+Display:700|Raleway:500.700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="title">Hover over the cards</h1>
<div id="app" class="container"> <card data-image="https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=2&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop="> <h1 slot="header">Canyons</h1> <p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </card> <card data-image="https://images.unsplash.com/photo-1479659929431-4342107adfc1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> <h1 slot="header">Beaches</h1> <p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </card> <card data-image="https://images.unsplash.com/photo-1479644025832-60dabb8be2a1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> <h1 slot="header">Trees</h1> <p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </card> <card data-image="https://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a?dpr=2&auto=compress,format&fit=crop&w=1199&h=811&q=80&cs=tinysrgb&crop="> <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="js/index.js"></script>
</body>
</html>

Parallax Depth Cards - Script Codes CSS Codes

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: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.card-wrap { margin: 10px; -webkit-transform: perspective(800px); transform: perspective(800px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; cursor: pointer;
}
.card-wrap:hover .card-info { -webkit-transform: translateY(0); transform: translateY(0);
}
.card-wrap:hover .card-info p { opacity: 1;
}
.card-wrap:hover .card-info, .card-wrap:hover .card-info p { -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-wrap:hover .card-info:after { -webkit-transition: 5s cubic-bezier(0.23, 1, 0.32, 1); transition: 5s cubic-bezier(0.23, 1, 0.32, 1); opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
.card-wrap:hover .card-bg { -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1); 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 { -webkit-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1); 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; -webkit-box-flex: 0; -ms-flex: 0 0 240px; 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; -webkit-transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95); 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; -webkit-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); 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; -webkit-transform: translateY(40%); transform: translateY(40%); -webkit-transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); 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; -webkit-transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); 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: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.6) 100%); background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%); background-blend-mode: overlay; opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95); 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;
}

Parallax Depth Cards - Script Codes JS Codes

'use strict';
Vue.config.devtools = true;
Vue.component('card', { template: '\n <div class="card-wrap"\n @mousemove="handleMouseMove"\n @mouseenter="handleMouseEnter"\n @mouseleave="handleMouseLeave"\n ref="card">\n <div class="card"\n :style="cardStyle">\n <div class="card-bg" :style="[cardBgTransform, cardBgImage]"></div>\n <div class="card-info">\n <slot name="header"></slot>\n <slot name="content"></slot>\n </div>\n </div>\n </div>', mounted: function mounted() { this.width = this.$refs.card.offsetWidth; this.height = this.$refs.card.offsetHeight; }, props: ['dataImage'], data: function data() { return { width: 0, height: 0, mouseX: 0, mouseY: 0, mouseLeaveDelay: null }; }, computed: { mousePX: function mousePX() { return this.mouseX / this.width; }, mousePY: function mousePY() { return this.mouseY / this.height; }, cardStyle: function cardStyle() { var rX = this.mousePX * 30; var rY = this.mousePY * -30; return { transform: 'rotateY(' + rX + 'deg) rotateX(' + rY + 'deg)' }; }, cardBgTransform: function cardBgTransform() { var tX = this.mousePX * -40; var tY = this.mousePY * -40; return { transform: 'translateX(' + tX + 'px) translateY(' + tY + 'px)' }; }, cardBgImage: function cardBgImage() { return { backgroundImage: 'url(' + this.dataImage + ')' }; } }, methods: { handleMouseMove: function 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: function handleMouseEnter() { clearTimeout(this.mouseLeaveDelay); }, handleMouseLeave: function handleMouseLeave() { var _this = this; this.mouseLeaveDelay = setTimeout(function () { _this.mouseX = 0; _this.mouseY = 0; }, 1000); } }
});
var app = new Vue({ el: '#app'
});
Parallax Depth Cards - Script Codes
Parallax Depth Cards - Script Codes
Home Page Home
Developer Andy Merskin
Username andymerskin
Uploaded August 08, 2022
Rating 4.5
Size 5,579 Kb
Views 89,056
Do you need developer help for Parallax Depth Cards?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Merskin (andymerskin) Script Codes
Name
Vue List Transitions - Bug Test
Wires Loading Animation
Vue.js Intro Demo
Table Row Peek
SVG Stroke Drawing Effect on Focus
Spotr - Basic Example
Vue.js Recipe - Slideout Menu
Vue.js Starter
Animated Dropdowns with scaleY
GSS Transitions
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!