[Agregar] el mensaje de felicitaciones y el confetti con JS
This commit is contained in:
francisco-solis99
parent
2018a0eeb4
commit
3d490a191a
23
assets/scripts/congrats/congrats.js
Normal file
23
assets/scripts/congrats/congrats.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
// get canvas from DOM
|
||||
const canvas = document.querySelector('.congrats__canvas');
|
||||
|
||||
// create the confetti it return a function
|
||||
const myConfetti = confetti.create(canvas, {
|
||||
resize: true,
|
||||
useWorker: true
|
||||
});
|
||||
|
||||
// execute the confetti witha config
|
||||
let id = setInterval(() => {
|
||||
myConfetti({
|
||||
particleCount: 50,
|
||||
// particleCount: 1,
|
||||
// startVelocity: 0,
|
||||
spread: 160,
|
||||
origin: {
|
||||
x: Math.random(),
|
||||
y: (Math.random() * 1) - 0.2
|
||||
},
|
||||
});
|
||||
}, 1000)
|
||||
|
|
@ -24,3 +24,113 @@
|
|||
* 5. Otros
|
||||
* Metodología => BEM
|
||||
*/
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.congrats__wrapper {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
/* Opcion1 */
|
||||
/* background-color: var(--color-secundary-purple);
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='40' height='40' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect width='100%25' height='100%25' fill='rgba(159, 122, 234,1)'/%3E%3Cpath d='m0 10h40v2h-40z' fill='rgba(74, 85, 104,1)' filter='url(%23filter-doodad-1)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='0.2'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E "); */
|
||||
|
||||
/* opcion2 */
|
||||
/* background-color: #222831; */
|
||||
|
||||
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='40' height='40' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(135)'%3E%3Crect width='100%25' height='100%25' fill='rgba(159, 122, 234,1)'/%3E%3Cpath d='M0 29a 9-9 0 0 0 9-9a 11-11 0 0 1 11-11v2a-9 9 0 0 0-9 9a-11 11 0 0 1-11 11zM0 69a 9-9 0 0 0 9-9a 11-11 0 0 1 11-11v2a-9 9 0 0 0-9 9a-11 11 0 0 1-11 11z' fill='rgba(74, 85, 104,1)' filter='url(%23filter-doodad-1)'/%3E%3Cpath d='M20 29.5a 9.5-9.5 0 0 0 9.5-9.5a 10.5-10.5 0 0 1 10.5-10.5v1a-9.5 9.5 0 0 0-9.5 9.5a-10.5 10.5 0 0 1-10.5 10.5z' fill='rgba(254, 178, 178,1)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='0.2'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
|
||||
|
||||
|
||||
/* Opcion3 */
|
||||
/* background-color: #8287DE;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23f27882' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23bf126c' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23f06184' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23bc0175' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23ea4a8c' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b7007f' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23e03097' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23b10089' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23cf16a6' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23a90093' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23b700b7' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%239e009e' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
background-size: cover; */
|
||||
}
|
||||
|
||||
.congrats {
|
||||
min-width: 300px;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px 50px 10px 10px;
|
||||
background-color: var(--color-background);
|
||||
opacity: 0.9;
|
||||
box-shadow: 8px 8px 2px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.congrats__title {
|
||||
font-family: 'Potta One';
|
||||
font-size: 3.2rem;
|
||||
font-weight: 400;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.congrats__text {
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.5rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.congrats__btn {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.7rem;
|
||||
font-weight: 500;
|
||||
border-radius: 30px;
|
||||
border: 2px solid var(--color-black);
|
||||
color: var(--color-black);
|
||||
overflow: hidden;
|
||||
transition: all ease-in 400ms;
|
||||
}
|
||||
|
||||
.congrats__btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
opacity: 0;
|
||||
transition: all ease 500ms;
|
||||
background-color: var(--color-black);
|
||||
color: var(--color-background);
|
||||
|
||||
}
|
||||
|
||||
.congrats__btn:hover::before {
|
||||
transition: all ease 500ms;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.congrats__btn:hover {
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
.congrats__canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -31,8 +31,20 @@
|
|||
|
||||
<!-- Archivos de javascript -->
|
||||
<?php $scripts = array(
|
||||
'',
|
||||
'congrats/congrats.js',
|
||||
) ?>
|
||||
|
||||
<!-- Componente head -->
|
||||
<?php require_once 'views/components/head.php' ?>
|
||||
<?php require_once 'views/components/footer.php' ?>
|
||||
|
||||
|
||||
<!-- HTML body -->
|
||||
<canvas class="congrats__canvas"></canvas>
|
||||
<div class="congrats__wrapper">
|
||||
<main class="congrats">
|
||||
<h1 class="congrats__title">¡Felicidades!</h1>
|
||||
<p class="congrats__text">🚀 Pronto tendrás noticias acerca de tu post gracias por compartir lo que sabes 💜</p>
|
||||
<a href="<?= NABU_ROUTES['home'] ?>" class="congrats__btn">Ir al muro</a>
|
||||
</main>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
|
||||
Loading…
Reference in a new issue