` ````
%h1 HIGHFIVE
- (1..2).each do
.arm
.thumb
```

` ````
$dp: #0029ff;
$w: #e3dfff;
$bg: #525fff;
$lb: #3d49fb;
$t: rgba(255,255,255,0);
// Hugo Giraudel's fantastic Long Shadow Mixin, found here: https://www.sitepoint.com/ultimate-long-shadow-sass-mixin/ //
@function long-shadow($direction, $length, $color, $fade: false, $shadow-count: 100) {
$shadows: ();
$conversion-map: (
to top: 180deg,
to top right: 135deg,
to right top: 135deg,
to right: 90deg,
to bottom right: 45deg,
to right bottom: 45deg,
to bottom: 0deg,
to bottom left: 315deg,
to left bottom: 315deg,
to left: 270deg,
to left top: 225deg,
to top left: 225deg
);
@if map-has-key($conversion-map, $direction) {
$direction: map-get($conversion-map, $direction);
}
@for $i from 1 through $shadow-count {
$current-step: ($i * $length / $shadow-count);
$current-color: if(not $fade, $color, if(type-of($fade) == 'color', mix($fade, $color, ($i / $shadow-count * 100)), rgba($color, 1 - $i / $shadow-count)));
$shadows: append($shadows, (sin(0deg + $direction) * $current-step) (cos(0deg + $direction) * $current-step) 0 $current-color, 'comma');
}
@return $shadows;
}
body{
background:$bg;
overflow:hidden;
min-height:800px;
&:before{
content:'';
position:absolute;
width:50vw;
height:50vw;
background:radial-gradient(circle at center, $bg, $bg 60%, $t 60%), linear-gradient(to right, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(to bottom, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(45deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-45deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-22.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(22.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-22.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(12.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-22.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-12.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-22.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(57.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-22.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(192.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-192.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-60deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-75.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-60deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(75.5deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%), linear-gradient(-60deg, $t 49.95%, $w 49.95%, $w 50.25%, $t 50.25%);
opacity:0.15;
top:calc(50% - 25vw);
left:calc(50% - 25vw);
margin-top:-32.5vmin;
border-radius:100%;
animation:spin 5s linear infinite;
@keyframes spin{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
}
.arm{
position:absolute;
width:25vw;
height:25vw;
left:-0.25vmin;
top:calc(50% - 25vmin);
border-radius:0 0 100vmin 0;
border:10vmin solid;
border-color:transparent $lb $lb transparent;
&:nth-of-type(2){
transform:scaleX(-1);
left:auto;
right:-0.25vmin;
}
&:before{
content:'';
position:absolute;
width:10vmin;
height:10vmin;
background:linear-gradient(to bottom, darken($lb, 5%), $lb);
z-index:1;
border-radius:100vmin 100vmin 30vmin 0;
right:-10vmin;
top:-15vmin;
}
&:after{
content:'';
position:absolute;
width:2vmin;
height:15vmin;
background:darken($lb, 5%);
border-radius:10vmin 10vmin 0 0;
right:-10vmin;
top:-25vmin;
box-shadow:-2.65vmin 0 0 darken($lb, 5%), -5.30vmin 0 0 darken($lb, 5%), -8vmin 0 0 darken($lb, 5%);
}
.thumb{
position:absolute;
width:3vmin;
height:9vmin;
right:-0.15vmin;
top:-17.5vmin;
background:$lb;
transform:rotate(-15deg);
border-radius:0 20vmin 0 0;
z-index:3;
&:before{
content:'';
position:absolute;
width:6vmin;
height:7vmin;
background:$lb;
border-radius:100%;
bottom:-4vmin;
}
}
}
}
h1{
z-index:9;
font-family:"Rajdhani";
line-height:1;
color:$w;
position:absolute;
left:0%;
top:50%;
transform:translateY(-50%);
width:100%;
display:block;
text-align:center;
font-size:20vmin;
margin:0;
div{
max-width:60vmin;
div{
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
position:absolute;
display:inline-block;
float:left;
transform-origin: bottom center;
padding:0 2vmin;
animation:floating#{$i} 5s linear infinite alternate;
animation-delay:#{$i / random(10) - 5}s;
@keyframes floating#{$i}{
0%{
transform:rotate(#{$i * random(5) - 10}deg) translateY(-3vmin);
}
100%{
transform:rotate(#{$i * random(5) - 10}deg) translateY(3vmin);
}
}
}
}
}
}
animation:shadow 3s ease-in-out infinite alternate;
@keyframes shadow{
0%{
text-shadow: long-shadow(
// Shadow should have an angle of 42 degrees
$direction: 22deg,
// Shadow should be contain within a 100x100 box
$length: 5vmin,
// Shadow should start this color
$color: $dp,
// To finish this color
$fade: $dp
);
}
100%{
text-shadow: long-shadow(
// Shadow should have an angle of 42 degrees
$direction: -22deg,
// Shadow should be contain within a 100x100 box
$length: 5vmin,
// Shadow should start this color
$color: $dp,
// To finish this color
$fade: $dp
);
}
}
}
```

` ````
mySplitText = new SplitText("h1", {type:"words,chars"}),
chars = mySplitText.chars; //an array of all the divs that wrap each character
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers