Commit 6c545119 authored by Dan Pudsey's avatar Dan Pudsey

[DP-105] - Animations and glow

Just some style updates to the main slogan
parent 212d4f2c
......@@ -475,6 +475,16 @@ th {
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
opacity: 1; } }
@keyframes neonHighlight {
0% {
text-shadow: 0 0 0; }
50% {
text-shadow: 0 0 0; }
75% {
text-shadow: 0 0 10px rgba(243, 25, 130, 0.5), 0 0 20px rgba(243, 25, 130, 0.5), 0 0 30px rgba(243, 25, 130, 0.5), 0 0 40px rgba(243, 25, 130, 0.5), 0 0 70px rgba(243, 25, 130, 0.5), 0 0 80px rgba(243, 25, 130, 0.5), 0 0 100px rgba(243, 25, 130, 0.5), 0 0 150px rgba(243, 25, 130, 0.5); }
100% {
text-shadow: 0 0 0; } }
.header {
padding-top: 8rem;
padding-bottom: 2rem;
......@@ -817,6 +827,15 @@ th {
max-height: 100%;
min-height: 100%;
padding-bottom: 4rem; } }
.hero--homepage h1 {
text-shadow: 0 0 0; }
.hero--homepage h1.neon-highlight {
animation-name: neonHighlight;
animation-duration: 6s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-fill-mode: forwards; }
.hero--homepage * {
color: #fff; }
.hero--homepage::after {
......
This diff is collapsed.
......@@ -13143,6 +13143,7 @@ var animation = bodymovin.loadAnimation({
// Add class to ensure animation loads after page loads
$(".hero-code__screen").addClass("hero-code__screen--animation");
$(".hero--homepage h1").addClass("neon-highlight");
// Add the confetti
var animateButton = function(e) {
......
......@@ -4,7 +4,7 @@
* https://HosseinKarami.github.io/fastshell
* @author Hossein Karami
* @version 1.0.5
* Copyright 2018. MIT licensed.
* Copyright 2019. MIT licensed.
*/
"undefined" != typeof navigator &&
(function(t, e) {
......
This diff is collapsed.
......@@ -4,7 +4,7 @@
* https://HosseinKarami.github.io/fastshell
* @author Hossein Karami
* @version 1.0.5
* Copyright 2018. MIT licensed.
* Copyright 2019. MIT licensed.
*/
(function($, window, document, undefined) {
"use strict";
......@@ -18,6 +18,7 @@
// Add class to ensure animation loads after page loads
$(".hero-code__screen").addClass("hero-code__screen--animation");
$(".hero--homepage h1").addClass("neon-highlight");
// Add the confetti
var animateButton = function(e) {
......
......@@ -4,6 +4,6 @@
* https://HosseinKarami.github.io/fastshell
* @author Hossein Karami
* @version 1.0.5
* Copyright 2018. MIT licensed.
* Copyright 2019. 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<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
!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"),t(".hero--homepage h1").addClass("neon-highlight");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
......@@ -10,6 +10,7 @@
// Add class to ensure animation loads after page loads
$(".hero-code__screen").addClass("hero-code__screen--animation");
$(".hero--homepage h1").addClass("neon-highlight");
// Add the confetti
var animateButton = function(e) {
......
......@@ -19,6 +19,19 @@
padding-bottom: 4rem;
}
h1 {
text-shadow: 0 0 0;
&.neon-highlight {
animation-name: neonHighlight;
animation-duration: 6s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-fill-mode: forwards;
}
}
* {
color: #fff;
}
......
......@@ -4,6 +4,7 @@ $deadly-nightshade: rgb(1,1,31);
$klein-blue: #0012d3;
$klein-blue-accent: #000b80;
$neon-pink: #f31982;
$neon-pink-opacity-50: rgba(243, 25, 130, 0.5);
$tangerine-dream: #fe9501;
$buddy-blue: #02ADFD;
$jean-grey: #696969;
......
......@@ -67,3 +67,25 @@
opacity: 1;
}
}
@keyframes neonHighlight {
0% {
text-shadow: 0 0 0;
}
50% {
text-shadow: 0 0 0;
}
75% {
text-shadow: 0 0 10px $neon-pink-opacity-50,
0 0 20px $neon-pink-opacity-50,
0 0 30px $neon-pink-opacity-50,
0 0 40px $neon-pink-opacity-50,
0 0 70px $neon-pink-opacity-50,
0 0 80px $neon-pink-opacity-50,
0 0 100px $neon-pink-opacity-50,
0 0 150px $neon-pink-opacity-50;
}
100% {
text-shadow: 0 0 0;
}
}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment