Preparar o mesmo efeito que é feito no site do Enzo em https://www.en-zo.dev/ (efeito de água quando quando passa o cursor) sobre o vídeo que se encontra no meio da tela. Alternar o vídeo com a imagem disponível em https://marcelovicente.prof/img/capa_01.png
Browse files- index.html +4 -2
- style.css +17 -1
index.html
CHANGED
|
@@ -214,7 +214,8 @@
|
|
| 214 |
</style>
|
| 215 |
</head>
|
| 216 |
<body class="bg-gray-50">
|
| 217 |
-
|
|
|
|
| 218 |
<header class="profmarcelovicente-bg text-white shadow-lg sticky top-0 z-50 w-full">
|
| 219 |
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
| 220 |
<div class="text-2xl font-bold"><a href="https://marcelovicente.prof" class="text-white hover:text-white/90 transition">@profmarcelovicente</a></div>
|
|
@@ -271,12 +272,13 @@
|
|
| 271 |
<section class="container mx-auto px-4 py-12 max-w-6xl">
|
| 272 |
<!-- Video Section -->
|
| 273 |
<div id="form-section" class="bg-white rounded-xl shadow-lg p-8 card-hover mb-8 relative">
|
| 274 |
-
<div class="video-container" style="width: 50%; margin: 0 auto;">
|
| 275 |
<video class="w-full h-full object-cover" autoplay loop muted playsinline>
|
| 276 |
<source src="https://marcelovicente.prof/live1947/acesso/videos/aovivo.mp4" type="video/mp4">
|
| 277 |
Your browser does not support the video tag.
|
| 278 |
</video>
|
| 279 |
<img src="https://marcelovicente.prof/img/capa_01.png" alt="Prof. Marcelo Vicente" class="video-overlay">
|
|
|
|
| 280 |
</div>
|
| 281 |
<!-- Espaçamento de uma linha após o video -->
|
| 282 |
<div class="h-6"></div>
|
|
|
|
| 214 |
</style>
|
| 215 |
</head>
|
| 216 |
<body class="bg-gray-50">
|
| 217 |
+
<script src="script.js"></script>
|
| 218 |
+
<!-- Header -->
|
| 219 |
<header class="profmarcelovicente-bg text-white shadow-lg sticky top-0 z-50 w-full">
|
| 220 |
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
| 221 |
<div class="text-2xl font-bold"><a href="https://marcelovicente.prof" class="text-white hover:text-white/90 transition">@profmarcelovicente</a></div>
|
|
|
|
| 272 |
<section class="container mx-auto px-4 py-12 max-w-6xl">
|
| 273 |
<!-- Video Section -->
|
| 274 |
<div id="form-section" class="bg-white rounded-xl shadow-lg p-8 card-hover mb-8 relative">
|
| 275 |
+
<div class="video-container ripple-effect" style="width: 50%; margin: 0 auto;">
|
| 276 |
<video class="w-full h-full object-cover" autoplay loop muted playsinline>
|
| 277 |
<source src="https://marcelovicente.prof/live1947/acesso/videos/aovivo.mp4" type="video/mp4">
|
| 278 |
Your browser does not support the video tag.
|
| 279 |
</video>
|
| 280 |
<img src="https://marcelovicente.prof/img/capa_01.png" alt="Prof. Marcelo Vicente" class="video-overlay">
|
| 281 |
+
<canvas class="ripple-canvas absolute inset-0 w-full h-full pointer-events-none"></canvas>
|
| 282 |
</div>
|
| 283 |
<!-- Espaçamento de uma linha após o video -->
|
| 284 |
<div class="h-6"></div>
|
style.css
CHANGED
|
@@ -3,12 +3,12 @@ body {
|
|
| 3 |
padding: 2rem;
|
| 4 |
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
|
| 5 |
}
|
| 6 |
-
|
| 7 |
.video-container {
|
| 8 |
position: relative;
|
| 9 |
border-radius: 0.5rem;
|
| 10 |
overflow: hidden;
|
| 11 |
transition: all 0.3s ease;
|
|
|
|
| 12 |
}
|
| 13 |
|
| 14 |
.video-overlay {
|
|
@@ -20,6 +20,7 @@ body {
|
|
| 20 |
object-fit: cover;
|
| 21 |
opacity: 1;
|
| 22 |
transition: opacity 0.3s ease;
|
|
|
|
| 23 |
}
|
| 24 |
|
| 25 |
.video-container:hover .video-overlay {
|
|
@@ -28,6 +29,21 @@ body {
|
|
| 28 |
|
| 29 |
.video-container video {
|
| 30 |
display: block;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
}
|
| 32 |
h1 {
|
| 33 |
font-size: 16px;
|
|
|
|
| 3 |
padding: 2rem;
|
| 4 |
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
|
| 5 |
}
|
|
|
|
| 6 |
.video-container {
|
| 7 |
position: relative;
|
| 8 |
border-radius: 0.5rem;
|
| 9 |
overflow: hidden;
|
| 10 |
transition: all 0.3s ease;
|
| 11 |
+
transform: translateZ(0);
|
| 12 |
}
|
| 13 |
|
| 14 |
.video-overlay {
|
|
|
|
| 20 |
object-fit: cover;
|
| 21 |
opacity: 1;
|
| 22 |
transition: opacity 0.3s ease;
|
| 23 |
+
z-index: 2;
|
| 24 |
}
|
| 25 |
|
| 26 |
.video-container:hover .video-overlay {
|
|
|
|
| 29 |
|
| 30 |
.video-container video {
|
| 31 |
display: block;
|
| 32 |
+
position: relative;
|
| 33 |
+
z-index: 1;
|
| 34 |
+
}
|
| 35 |
+
|
| 36 |
+
.ripple-canvas {
|
| 37 |
+
position: absolute;
|
| 38 |
+
top: 0;
|
| 39 |
+
left: 0;
|
| 40 |
+
z-index: 3;
|
| 41 |
+
opacity: 0;
|
| 42 |
+
transition: opacity 0.3s ease;
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
.ripple-effect:hover .ripple-canvas {
|
| 46 |
+
opacity: 1;
|
| 47 |
}
|
| 48 |
h1 {
|
| 49 |
font-size: 16px;
|