[Agregar] el mensaje de felicitaciones y el confetti con JS
This commit is contained in:
parent
2018a0eeb4
commit
3d490a191a
3 changed files with 147 additions and 2 deletions
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
|
* 5. Otros
|
||||||
* Metodología => BEM
|
* 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 -->
|
<!-- Archivos de javascript -->
|
||||||
<?php $scripts = array(
|
<?php $scripts = array(
|
||||||
'',
|
'congrats/congrats.js',
|
||||||
) ?>
|
) ?>
|
||||||
|
|
||||||
|
<!-- Componente head -->
|
||||||
<?php require_once 'views/components/head.php' ?>
|
<?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