Skip to content

Instantly share code, notes, and snippets.

@CodelineRed

CodelineRed/overlay.scss

Created March 17, 2024 20:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodelineRed/4c81c99039bec3d3b09636364b9755a5 to your computer and use it in GitHub Desktop.
Save CodelineRed/4c81c99039bec3d3b09636364b9755a5 to your computer and use it in GitHub Desktop.
Download ZIP
Crossfade Triangles Overlay
Raw
overlay.scss
$triangle-color-1: #067da8;
$triangle-color-2: #89c6de;
.overlay {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 110%;
.triangle {
animation: triangle 2s infinite linear;
border-color: transparent transparent transparent $triangle-color-1;
border-style: solid;
border-width: 40px 0 40px 80px;
float: left;
height: 0;
margin-left: -40px;
opacity: .75;
transform: rotate(90deg);
width: 0;
&:nth-of-type(even) {
//animation-delay: 1s;
transform: rotate(-90deg);
}
@for $i from 1 through 50 {
&.triangle-#{$i} {
animation-delay: random() * 3s;
}
}
}
@media (min-width: 900px) {
.triangle {
border-width: 50px 0 50px 100px;
margin-left: -50px;
}
}
@media (min-width: 1160px) {
.triangle {
border-width: 60px 0 60px 120px;
margin-left: -60px;
}
}
@media (min-width: 1400px) {
.triangle {
border-width: 70px 0 70px 140px;
margin-left: -70px;
}
}
@media (min-width: 1620px) {
.triangle {
border-width: 80px 0 80px 160px;
margin-left: -80px;
}
}
@media (min-width: 1880px) {
.triangle {
border-width: 90px 0 90px 180px;
margin-left: -90px;
}
}
@media (min-width: 2120px) {
.triangle {
border-width: 100px 0 100px 200px;
margin-left: -100px;
}
}
@media (min-width: 2350px) {
.triangle {
border-width: 110px 0 110px 220px;
margin-left: -110px;
}
}
@media (min-width: 2580px) {
.triangle {
border-width: 120px 0 120px 240px;
margin-left: -120px;
}
}
@media (min-width: 2810px) {
.triangle {
border-width: 130px 0 130px 260px;
margin-left: -130px;
}
}
@media (min-width: 3040px) {
.triangle {
border-width: 140px 0 140px 280px;
margin-left: -140px;
}
}
@media (min-width: 3270px) {
.triangle {
border-width: 150px 0 150px 300px;
margin-left: -150px;
}
}
@media (min-width: 3500px) {
.triangle {
border-width: 160px 0 160px 320px;
margin-left: -160px;
}
}
@media (min-width: 3730px) {
.triangle {
border-width: 170px 0 170px 340px;
margin-left: -170px;
}
}
@media (min-width: 3960px) {
.triangle {
border-width: 180px 0 180px 360px;
margin-left: -180px;
}
}
@media (min-width: 4190px) {
.triangle {
border-width: 190px 0 190px 380px;
margin-left: -190px;
}
}
@media (min-width: 4420px) {
.triangle {
border-width: 200px 0 200px 400px;
margin-left: -200px;
}
}
}
@keyframes triangle {
0% {
border-color: transparent transparent transparent $triangle-color-1;
}
50% {
border-color: transparent transparent transparent $triangle-color-2;
}
100% {
border-color: transparent transparent transparent $triangle-color-1;
}
}
Raw
overlay.vue
<script>
export default {
methods: {
getTriangleClass: function(max) {
return 'triangle-' + this.getRandomNumber(max);
},
getRandomNumber: function(max) {
let int = ('0' + Math.floor(Math.random() * max));
return int.substring(int.length -2);
}
}
};
</script>
<template>
<!--div class="overlay">
<div v-for="i in 500" :key="i" class="triangle" :class="getTriangleClass(50)"></div>
</div-->
<div class="overlay">
<div class="triangle triangle-02"></div>
<div class="triangle triangle-20"></div>
<div class="triangle triangle-48"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-15"></div>
<div class="triangle triangle-37"></div>
<div class="triangle triangle-40"></div>
<div class="triangle triangle-39"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-44"></div>
<div class="triangle triangle-25"></div>
<div class="triangle triangle-25"></div>
<div class="triangle triangle-02"></div>
<div class="triangle triangle-36"></div>
<div class="triangle triangle-39"></div>
<div class="triangle triangle-03"></div>
<div class="triangle triangle-29"></div>
<div class="triangle triangle-24"></div>
<div class="triangle triangle-23"></div>
<div class="triangle triangle-14"></div>
<div class="triangle triangle-35"></div>
<div class="triangle triangle-21"></div>
<div class="triangle triangle-48"></div>
<div class="triangle triangle-48"></div>
<div class="triangle triangle-38"></div>
<div class="triangle triangle-47"></div>
<div class="triangle triangle-14"></div>
<div class="triangle triangle-21"></div>
<div class="triangle triangle-29"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-47"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-40"></div>
<div class="triangle triangle-07"></div>
<div class="triangle triangle-29"></div>
<div class="triangle triangle-31"></div>
<div class="triangle triangle-43"></div>
<div class="triangle triangle-21"></div>
<div class="triangle triangle-23"></div>
<div class="triangle triangle-15"></div>
<div class="triangle triangle-15"></div>
<div class="triangle triangle-03"></div>
<div class="triangle triangle-40"></div>
<div class="triangle triangle-04"></div>
<div class="triangle triangle-25"></div>
<div class="triangle triangle-04"></div>
<div class="triangle triangle-11"></div>
<div class="triangle triangle-16"></div>
<div class="triangle triangle-23"></div>
<div class="triangle triangle-49"></div>
<div class="triangle triangle-43"></div>
<div class="triangle triangle-34"></div>
<div class="triangle triangle-25"></div>
<div class="triangle triangle-36"></div>
<div class="triangle triangle-45"></div>
<div class="triangle triangle-15"></div>
<div class="triangle triangle-02"></div>
<div class="triangle triangle-34"></div>
<div class="triangle triangle-40"></div>
<div class="triangle triangle-49"></div>
<div class="triangle triangle-08"></div>
<div class="triangle triangle-42"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-26"></div>
<div class="triangle triangle-10"></div>
<div class="triangle triangle-19"></div>
<div class="triangle triangle-45"></div>
<div class="triangle triangle-45"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-14"></div>
<div class="triangle triangle-09"></div>
<div class="triangle triangle-36"></div>
<div class="triangle triangle-20"></div>
<div class="triangle triangle-12"></div>
<div class="triangle triangle-34"></div>
<div class="triangle triangle-33"></div>
<div class="triangle triangle-41"></div>
<div class="triangle triangle-24"></div>
<div class="triangle triangle-41"></div>
<div class="triangle triangle-09"></div>
<div class="triangle triangle-19"></div>
<div class="triangle triangle-09"></div>
<div class="triangle triangle-34"></div>
<div class="triangle triangle-44"></div>
<div class="triangle triangle-10"></div>
<div class="triangle triangle-27"></div>
<div class="triangle triangle-46"></div>
<div class="triangle triangle-35"></div>
<div class="triangle triangle-16"></div>
<div class="triangle triangle-11"></div>
<div class="triangle triangle-23"></div>
<div class="triangle triangle-05"></div>
<div class="triangle triangle-45"></div>
<div class="triangle triangle-45"></div>
<div class="triangle triangle-18"></div>
<div class="triangle triangle-29"></div>
<div class="triangle triangle-39"></div>
<div class="triangle triangle-37"></div>
<div class="triangle triangle-24"></div>
<div class="triangle triangle-28"></div>
<div class="triangle triangle-04"></div>
<div class="triangle triangle-16"></div>
<div class="triangle triangle-02"></div>
<div class="triangle triangle-34"></div>
<div class="triangle triangle-28"></div>
<div class="triangle triangle-35"></div>
<div class="triangle triangle-45"></div>
<div class="triangle triangle-13"></div>
<div class="triangle triangle-13"></div>
<div class="triangle triangle-09"></div>
<div class="triangle triangle-25"></div>
<div class="triangle triangle-46"></div>
<div class="triangle triangle-11"></div>
<div class="triangle triangle-02"></div>
<div class="triangle triangle-35"></div>
<div class="triangle triangle-29"></div>
<div class="triangle triangle-31"></div>
<div class="triangle triangle-34"></div>
<div class="triangle triangle-23"></div>
<div class="triangle triangle-48"></div>
<div class="triangle triangle-03"></div>
<div class="triangle triangle-11"></div>
<div class="triangle triangle-46"></div>
<div class="triangle triangle-21"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-27"></div>
<div class="triangle triangle-24"></div>
<div class="triangle triangle-05"></div>
<div class="triangle triangle-25"></div>
<div class="triangle triangle-16"></div>
<div class="triangle triangle-02"></div>
<div class="triangle triangle-36"></div>
<div class="triangle triangle-26"></div>
<div class="triangle triangle-19"></div>
<div class="triangle triangle-40"></div>
<div class="triangle triangle-10"></div>
<div class="triangle triangle-00"></div>
<div class="triangle triangle-30"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-46"></div>
<div class="triangle triangle-12"></div>
<div class="triangle triangle-46"></div>
<div class="triangle triangle-36"></div>
<div class="triangle triangle-14"></div>
<div class="triangle triangle-23"></div>
<div class="triangle triangle-37"></div>
<div class="triangle triangle-48"></div>
<div class="triangle triangle-01"></div>
<div class="triangle triangle-20"></div>
<div class="triangle triangle-20"></div>
<div class="triangle triangle-02"></div>
<div class="triangle triangle-00"></div>
<div class="triangle triangle-00"></div>
<div class="triangle triangle-40"></div>
<div class="triangle triangle-28"></div>
<div class="triangle triangle-04"></div>
<div class="triangle triangle-37"></div>
<div class="triangle triangle-08"></div>
<div class="triangle triangle-21"></div>
<div class="triangle triangle-12"></div>
<div class="triangle triangle-46"></div>
<div class="triangle triangle-10"></div>
<div class="triangle triangle-23"></div>
<div class="triangle triangle-29"></div>
<div class="triangle triangle-48"></div>
<div class="triangle triangle-03"></div>
<div class="triangle triangle-07"></div>
<div class="triangle triangle-26"></div>
<div class="triangle triangle-05"></div>
<div class="triangle triangle-07"></div>
<div class="triangle triangle-08"></div>
<div class="triangle triangle-20"></div>
<div class="triangle triangle-30"></div>
<div class="triangle triangle-47"></div>
<div class="triangle triangle-15"></div>
<div class="triangle triangle-10"></div>
<div class="triangle triangle-45"></div>
<div class="triangle triangle-37"></div>
<div class="triangle triangle-22"></div>
<div class="triangle triangle-31"></div>
<div class="triangle triangle-18"></div>
<div class="triangle triangle-10"></div>
<div class="triangle triangle-10"></div>
<div class="triangle triangle-13"></div>
<div class="triangle triangle-00"></div>
<div class="triangle triangle-31"></div>
<div class="triangle triangle-14"></div>
<div class="triangle triangle-10"></div>
<div class="triangle triangle-26"></div>
<div class="triangle triangle-42"></div>
<div class="triangle triangle-06"></div>
<div class="triangle triangle-31"></div>
<div class="triangle triangle-42"></div>
<div class="triangle triangle-03"></div>
<div class="triangle triangle-23"></div>
<div class="triangle triangle-36"></div>
<div class="triangle triangle-42"></div>
<div class="triangle triangle-36"></div>
<div class="triangle triangle-43"></div>
<div class="triangle triangle-17"></div>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment