Commit 212d4f2c authored by Dan Pudsey's avatar Dan Pudsey

[DP-104] - Added new logo

Updated some content and added a few nifty features like the animation being clickable and the animated logo
parent b55515a8
{
"git.ignoreLimitWarning": true
}
\ No newline at end of file
......@@ -24,11 +24,7 @@
<header class="header container" role="banner">
<div class="header__logo">
<a href="/">
<img
src="assets/img/dan-pudsey-front-end-developer-and-web-designer-logo.svg"
alt="Logo"
width="160"
/>
<div id="lottie-logo" class="lottie-logo"></div>
</a>
</div>
<div class="header__cta">
......@@ -54,11 +50,11 @@
<p class="panel-content__subheading">Born 6 April 1987</p>
<p class="panel-content__code">
HTML & XML, (BEM & SMACSS) SCSS, JS, KnoutoutJS, Vue.js, jQuery,
PHP, Gulp, Grunt, Webpack, NPM, Sourcetree / Git Kraken, Docker,
Jenkins, TeamCity, Octopus CI, Sitecore, Episerver, AEM, Wordpress
& Shopify, JIRA, Stash, Confluence, Fisheye, Agile, SCRUM,
Illustrator, Photoshop, InDesign, AfterEffects, UX (personas,
wireframes, usability testing & focus groups). Currently learning ES6, React and Vue.js
PHP, Gulp, Grunt, Webpack, NPM, Node.js, Sourcetree / Git Kraken, Docker,
Jenkins, TeamCity, Octopus CI, Sitecore, Episerver, AEM, Wordpress,
Shopify, JIRA, Stash, Confluence, Fisheye, Slack, Agile, SCRUM,
Illustrator, Photoshop, InDesign, AfterEffects, Experience Designer, UX (personas,
wireframes, usability testing & focus groups). Currently learning ES6, React and Vue.js
</p>
</header>
<div class="panel-content__description">
......@@ -74,7 +70,7 @@
</p>
</div>
</div>
<div class="panel-content__right">
<div class="panel-content__right panel-content__right--show">
<img
src="/assets/img/page-about/dan-pudsey-profile-picture.jpg"
width="300"
......@@ -97,9 +93,7 @@
</header>
<div class="panel-content__description">
<p>
I built it using VueJS, ButterCMS, SVGs, Jenkins, BEM & SMACSS
SCSS, Node.js and a few other acronyms. I designed it in
Illustrator.
I built it using HTML, BEM &amp; SMACSS SCSS, JS, SVGs, Node.js, GIT and a few other acronyms. I designed it in Illustrator.
</p>
</div>
<div class="panel-content__read-more">
......@@ -112,6 +106,9 @@
<script src="assets/components/jquery/jquery.min.js"></script>
<script src="assets/js/scripts.min.js"></script>
<script src="assets/js/lottie.min.js"></script>
<script src="assets/js/logo.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
......
......@@ -41,7 +41,8 @@ a {
text-decoration: none;
font-weight: 800; }
p a:hover {
p a:hover,
.mask-filter:hover {
-webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
-webkit-mask-size: 200%;
animation: shiny 2s infinite;
......@@ -60,6 +61,21 @@ p {
font-family: 'Source Code Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400; }
/* width */
::-webkit-scrollbar {
width: 1rem; }
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #696969;
border-radius: 0; }
/* Handle */
::-webkit-scrollbar-thumb {
background-color: #f31982;
border-radius: 0; }
/* Handle on hover */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
......@@ -433,11 +449,39 @@ th {
to {
outline-color: #fff; } }
@keyframes topBubbles {
0% {
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
opacity: 0; }
25% {
opacity: 1; }
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
opacity: 1; } }
@keyframes bottomBubbles {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
opacity: 0; }
25% {
opacity: 1; }
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
opacity: 1; } }
.header {
padding-top: 8rem;
padding-bottom: 9rem; }
padding-bottom: 2rem;
overflow: auto; }
@media screen and (max-width: 767px) {
.header {
position: relative;
padding: 2rem 2rem 0; } }
.header__logo {
float: left; }
......@@ -451,7 +495,22 @@ th {
float: right; }
@media screen and (max-width: 767px) {
.header__cta {
display: none; } }
position: fixed;
bottom: 0;
left: 0;
display: block;
width: 100%;
padding: 2rem;
z-index: 10;
float: none;
text-align: center;
background-color: rgba(0, 0, 0, 0.2); } }
.lottie-logo {
width: 18rem; }
@media screen and (max-width: 767px) {
.lottie-logo {
margin: auto; } }
.nav ul {
list-style: none; }
......@@ -593,6 +652,11 @@ th {
float: none; }
.panel-content__left img, .panel-content__right img {
display: none; } }
@media screen and (max-width: 767px) {
.panel-content__left--show img, .panel-content__right--show img {
width: 100%;
display: block;
margin-bottom: 2rem; } }
.panel-content__title {
margin: 0;
......@@ -627,7 +691,8 @@ th {
background-color: #01011f; }
@media screen and (max-width: 767px) {
.footer {
height: 40rem; } }
height: auto;
padding-bottom: 10rem; } }
.btn {
position: relative;
......@@ -774,6 +839,9 @@ th {
.hero--homepage-animation::after {
-ms-transform: translateY(calc(14.6rem / 2));
transform: translateY(calc(14.6rem / 2)); }
@media screen and (max-width: 767px) {
.hero__introduction h1 {
font-size: 2rem; } }
@media screen and (max-width: 767px) {
.hero__introduction h2 {
line-height: 1.2rem; } }
......@@ -861,70 +929,39 @@ th {
display: inline-block;
-ms-transform: scale(1);
transform: scale(1);
width: 5.8rem; }
.confetti-button:hover {
outline: 0; }
.confetti-button:before,
.confetti-button:after {
position: absolute;
content: "";
display: block;
width: 180%;
height: 50%;
left: -35%;
top: 26%;
z-index: -1000;
transition: all ease-in-out 0.5s;
opacity: 0;
background-repeat: no-repeat;
animation-timing-function: ease-in-out;
animation-duration: 1.25s;
animation-fill-mode: forwards;
animation-delay: 4.6s; }
.confetti-button:before {
display: none;
transform: translate3d(0, -50%, 0);
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
display: block;
animation-name: topBubbles; }
.confetti-button:after {
display: none;
transform: translate3d(0, 50%, 0);
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
display: block;
animation-name: bottomBubbles; }
@keyframes topBubbles {
0% {
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
opacity: 0; }
25% {
opacity: 1; }
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
opacity: 1; } }
@keyframes bottomBubbles {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
opacity: 0; }
25% {
opacity: 1; }
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
opacity: 1; } }
width: 5.8rem;
cursor: pointer; }
.confetti-button:hover {
outline: 0; }
.confetti-button::before, .confetti-button::after {
content: "";
position: absolute;
display: block;
width: 180%;
height: 50%;
left: -35%;
top: 26%;
z-index: -1000;
transition: all ease-in-out 0.5s;
opacity: 0;
background-repeat: no-repeat;
animation-timing-function: ease-in-out;
animation-duration: 1.25s;
animation-fill-mode: forwards;
animation-delay: 4.6s; }
.confetti-button::before {
transform: translate3d(0, -50%, 0);
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
animation-name: topBubbles; }
.confetti-button::after {
transform: translate3d(0, 50%, 0);
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
animation-name: bottomBubbles; }
.confetti-button--reanimate:after, .confetti-button--reanimate:before {
animation-delay: 0s;
animation-fill-mode: none; }
#particles {
background-color: transparent;
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -6,4 +6,4 @@
* @version 1.0.5
* Copyright 2018. MIT licensed.
*/
var animation=bodymovin.loadAnimation({container:document.getElementById("lottie-logo"),renderer:"svg",loop:!0,autoplay:!0,path:"logo.json"});
\ No newline at end of file
var animation=bodymovin.loadAnimation({container:document.getElementById("lottie-logo"),renderer:"svg",loop:!0,autoplay:!0,path:"assets/js/json/logo.json"});
\ No newline at end of file
......@@ -31,8 +31,15 @@
}, 1700);
};
// This allows the confetti button to be re-animated
var classname = document.getElementsByClassName("confetti-button");
var animateButton = function(e) {
e.preventDefault;
this.classList.remove("confetti-button");
void this.offsetWidth;
this.classList.add("confetti-button");
this.classList.add("confetti-button--reanimate");
}
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener("click", animateButton, false);
}
......
......@@ -6,4 +6,4 @@
* @version 1.0.5
* Copyright 2018. MIT licensed.
*/
!function(t,e,a,n){"use strict";t(function(){function n(){for(var t=0,e=0,a=0;t<100&&e<100&&a<100;)t=Math.floor(256*Math.random()),e=Math.floor(256*Math.random()),a=Math.floor(256*Math.random());return"rgb("+t+","+e+","+a+")"}function i(){c.clearRect(0,0,r.width,r.height);for(var t=0;t<d;t++)l[t].Update(),l[t].Draw(c);requestAnimationFrame(i)}t(".hero").addClass("hero--homepage-animation"),t(".btn").prepend('<div class="hover"><span></span><span></span><span></span><span></span><span></span></div>'),t(".hero-code__screen").addClass("hero-code__screen--animation");for(var o=function(t){t.preventDefault,t.target.classList.remove("animate"),t.target.classList.add("animate"),setTimeout(function(){t.target.classList.remove("animate")},1700)},s=a.getElementsByClassName("confetti-button"),h=0;h<s.length;h++)s[h].addEventListener("click",o,!1);t('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(e){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=t(this.hash);a=a.length?a:t("[name="+this.hash.slice(1)+"]"),a.length&&(e.preventDefault(),t("html, body").animate({scrollTop:a.offset().top},1e3,function(){var e=t(a);return e.focus(),!e.is(":focus")&&(e.attr("tabindex","-1"),void e.focus())}))}});var r=a.getElementById("particles"),c=r.getContext("2d");r.width=e.innerWidth,r.height=e.innerHeight;var l=[],d=100,f=function(){this.x=r.width*Math.random(),this.y=r.height*Math.random(),this.vx=4*Math.random()-2,this.vy=4*Math.random()-2,this.Color=n()};f.prototype.Draw=function(t){t.fillStyle=this.Color,t.fillRect(this.x,this.y,2,2)},f.prototype.Update=function(){this.x+=this.vx,this.y+=this.vy,(this.x<0||this.x>r.width)&&(this.vx=-this.vx),(this.y<0||this.y>r.height)&&(this.vy=-this.vy)};for(var h=0;h<d;h++)l.push(new f);i()})}(jQuery,window,document);
\ No newline at end of file
!function(t,e,a,n){"use strict";t(function(){function n(){for(var t=0,e=0,a=0;t<100&&e<100&&a<100;)t=Math.floor(256*Math.random()),e=Math.floor(256*Math.random()),a=Math.floor(256*Math.random());return"rgb("+t+","+e+","+a+")"}function i(){c.clearRect(0,0,r.width,r.height);for(var t=0;t<l;t++)d[t].Update(),d[t].Draw(c);requestAnimationFrame(i)}t(".hero").addClass("hero--homepage-animation"),t(".btn").prepend('<div class="hover"><span></span><span></span><span></span><span></span><span></span></div>'),t(".hero-code__screen").addClass("hero-code__screen--animation");for(var s=function(t){t.preventDefault,t.target.classList.remove("animate"),t.target.classList.add("animate"),setTimeout(function(){t.target.classList.remove("animate")},1700)},o=a.getElementsByClassName("confetti-button"),s=function(t){t.preventDefault,this.classList.remove("confetti-button"),void this.offsetWidth,this.classList.add("confetti-button"),this.classList.add("confetti-button--reanimate")},h=0;h<o.length;h++)o[h].addEventListener("click",s,!1);t('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(e){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=t(this.hash);a=a.length?a:t("[name="+this.hash.slice(1)+"]"),a.length&&(e.preventDefault(),t("html, body").animate({scrollTop:a.offset().top},1e3,function(){var e=t(a);return e.focus(),!e.is(":focus")&&(e.attr("tabindex","-1"),void e.focus())}))}});var r=a.getElementById("particles"),c=r.getContext("2d");r.width=e.innerWidth,r.height=e.innerHeight;var d=[],l=100,f=function(){this.x=r.width*Math.random(),this.y=r.height*Math.random(),this.vx=4*Math.random()-2,this.vy=4*Math.random()-2,this.Color=n()};f.prototype.Draw=function(t){t.fillStyle=this.Color,t.fillRect(this.x,this.y,2,2)},f.prototype.Update=function(){this.x+=this.vx,this.y+=this.vy,(this.x<0||this.x>r.width)&&(this.vx=-this.vx),(this.y<0||this.y>r.height)&&(this.vy=-this.vy)};for(var h=0;h<l;h++)d.push(new f);i()})}(jQuery,window,document);
\ No newline at end of file
......@@ -24,14 +24,9 @@
<header class="header container" role="banner">
<div class="header__logo">
<a href="/">
<img
src="assets/img/dan-pudsey-front-end-developer-and-web-designer-logo.svg"
alt="Logo"
width="160"
/>
<div id="lottie-logo" class="lottie-logo"></div>
</a>
</div>
<div id="lottie-logo"></div>
<div class="header__cta">
<a href="assets/pdf/Dan_Pudsey_CV_DP_V01_11112018.pdf" class="btn btn--klein" target="_blank">Download CV</a>
</div>
......@@ -70,7 +65,7 @@
><span class="code-colon">;</span>
</p>
<p class="delay--1">
I 💘 digital <span class="confetti-button">design</span> and web
I 💘 digital <span class="confetti-button mask-filter">design</span> and web
<span>&lsaquo;development /&rsaquo;</span>.
</p>
<p class="delay--2">
......@@ -213,9 +208,7 @@
</header>
<div class="panel-content__description">
<p>
I built it using VueJS, ButterCMS, SVGs, Jenkins, BEM & SMACSS
SCSS, Node.js and a few other acronyms. I designed it in
Illustrator.
I built it using HTML, BEM &amp; SMACSS SCSS, JS, SVGs, Node.js, GIT and a few other acronyms. I designed it in Illustrator.
</p>
</div>
<div class="panel-content__read-more">
......@@ -227,6 +220,9 @@
<script src="assets/components/jquery/jquery.min.js"></script>
<script src="assets/js/scripts.min.js"></script>
<script src="assets/js/lottie.min.js"></script>
<script src="assets/js/logo.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
......
......@@ -24,11 +24,7 @@
<header class="header container" role="banner">
<div class="header__logo">
<a href="/">
<img
src="assets/img/dan-pudsey-front-end-developer-and-web-designer-logo.svg"
alt="Logo"
width="160"
/>
<div id="lottie-logo" class="lottie-logo"></div>
</a>
</div>
<div class="header__cta">
......@@ -43,10 +39,12 @@
<main class="main container" role="main">
<div class="hero hero--projects">
<h1>Projects</h1>
<p>
Some more work I've been involved in over the past couple of years.
</p>
<div class="hero__introduction">
<h1>Projects</h1>
<p>
Some more work I've been involved in over the past couple of years. A mixture of working within a team, as a sole FE developer and / or designer for agencies, individuals and direct clients.
</p>
</div>
</div>
</main>
......@@ -215,9 +213,7 @@
</header>
<div class="panel-content__description">
<p>
I built it using VueJS, ButterCMS, SVGs, Jenkins, BEM & SMACSS
SCSS, Node.js and a few other acronyms. I designed it in
Illustrator.
I built it using HTML, BEM &amp; SMACSS SCSS, JS, SVGs, Node.js, GIT and a few other acronyms. I designed it in Illustrator.
</p>
</div>
<div class="panel-content__read-more">
......@@ -229,6 +225,9 @@
<script src="assets/components/jquery/jquery.min.js"></script>
<script src="assets/js/scripts.min.js"></script>
<script src="assets/js/lottie.min.js"></script>
<script src="assets/js/logo.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
......
......@@ -3,5 +3,5 @@ var animation = bodymovin.loadAnimation({
renderer: 'svg',
loop: true,
autoplay: true,
path: 'logo.json'
path: 'assets/js/json/logo.json'
})
\ No newline at end of file
This diff is collapsed.
......@@ -23,8 +23,15 @@
}, 1700);
};
// This allows the confetti button to be re-animated
var classname = document.getElementsByClassName("confetti-button");
var animateButton = function(e) {
e.preventDefault;
this.classList.remove("confetti-button");
void this.offsetWidth;
this.classList.add("confetti-button");
this.classList.add("confetti-button--reanimate");
}
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener("click", animateButton, false);
}
......
......@@ -24,7 +24,8 @@ a {
font-weight: 800;
}
p a:hover {
p a:hover,
.mask-filter:hover {
-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
-webkit-mask-size: 200%;
animation: shiny 2s infinite;
......@@ -44,4 +45,26 @@ h6 {
p {
font-family: 'Source Code Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
}
/* width */
::-webkit-scrollbar {
width: 1rem;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px $jean-grey;
border-radius: 0;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: $neon-pink;
border-radius: 0;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
}
\ No newline at end of file
......@@ -50,6 +50,11 @@
}
&__introduction {
h1 {
@media #{$mobile} {
font-size: 2rem;
}
}
h2 {
@media #{$mobile} {
line-height: 1.2rem;
......@@ -182,100 +187,66 @@
display: inline-block;
transform: scale(1);
width: 5.8rem;
}
.confetti-button:hover {
outline: 0;
}
cursor: pointer;
.confetti-button:before,
.confetti-button:after {
position: absolute;
content: "";
display: block;
width: 180%;
height: 50%;
left: -35%;
top: 26%;
z-index: -1000;
transition: all ease-in-out 0.5s;
opacity: 0;
background-repeat: no-repeat;
animation-timing-function: ease-in-out;
animation-duration: 1.25s;
animation-fill-mode: forwards;
animation-delay: 4.6s;
}
.confetti-button:before {
display: none;
transform: translate3d(0, -50%, 0);
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
10% 10%, 18% 18%;
display: block;
animation-name: topBubbles;
}
.confetti-button:after {
display: none;
transform: translate3d(0, 50%, 0);
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
display: block;
animation-name: bottomBubbles;
}
@keyframes topBubbles {
0% {
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
40% 90%, 55% 90%, 70% 90%;
opacity: 0;
}
25% {
opacity: 1;
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
50% 50%, 65% 20%, 90% 30%;
&:hover {
outline: 0;
}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
opacity: 1;
}
}
@keyframes bottomBubbles {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
70% -10%, 70% 0%;
&::before,
&::after {
content: "";
position: absolute;
display: block;
width: 180%;
height: 50%;
left: -35%;
top: 26%;
z-index: -1000;
transition: all ease-in-out 0.5s;
opacity: 0;
}
25% {
opacity: 1;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
105% 0%;
}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
opacity: 1;
}
}
background-repeat: no-repeat;
animation-timing-function: ease-in-out;
animation-duration: 1.25s;
animation-fill-mode: forwards;
animation-delay: 4.6s;
}
&::before {
transform: translate3d(0, -50%, 0);
background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%),
radial-gradient(circle, #ff0081 20%, transparent 20%);