<div class="m-intro">
<div class="e-text">
<span class="subtitle">Hello Little World</span>
<h1>Hello World</h1>
<p class="preamble">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cum similique incidunt expedita vel dolore quae adipisci at ea laborum?
</p>
</div>
<div id="particleCanvas-Orange" class="e-particles-orange"></div>
<div id="particleCanvas-Blue" class="e-particles-blue"></div>
</div>
@mixin animation($animate...) {
$max: length($animate);
$animations: '';
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
-o-animation: $animations;
animation: $animations;
}
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
@include keyframes(rotate) {
0% { transform:rotate(0)}
100% { transform:rotate(360deg)}
}
body{
width:100vw;
height:100vh;
margin:0;
padding:0;
background-color:#151D24;
background-image:url('https://image.ibb.co/dQMeKk/background.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-weight:300;
}
.m-intro{
text-align:center;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin:0 auto;
min-width:785px;
overflow:hidden;
position:relative;
&:before, &:after{
display:block;
content:" ";
width:2560px;
height:2560px;
position:absolute;
margin-top:-1280px;
margin-left:-1280px;
transform-origin:center;
background-position:center;
background-repeat:no-repeat;
z-index:50;
top:50%;
left:50%;
}
&:before{
background-image:url('https://image.ibb.co/dwBeKk/circle_inner.png');
background-size:100% auto;
@include animation('rotate 30s infinite linear');
}
&:after{
background-image:url('https://image.ibb.co/gTN8C5/circle_outer.png');
background-size:100% auto;
@include animation('rotate 80s infinite linear');
}
.e-text{
width:785px;
position:relative;
z-index:100;
h1{
color:#EA5847;
margin:0;
text-transform:uppercase;
font-size:108px;
line-height:180px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
margin:30px 0;
position:relative;
@supports(-webkit-background-clip: text){
background: radial-gradient(ellipse at center, rgba(237,103,68,1) 0%, rgba(236,84,63,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.subtitle{
font-weight:600;
text-transform:uppercase;
}
.preamble{
max-width:80%;
display:block;
margin:0 auto;
}
}
}
.e-particles-orange{
position:absolute;
border-radius:50%;
top:50%;
left:50%;
z-index:5;
width:1000px;
height:600px;
opacity:0.4;
transform:translate(-50%, -50%);
}
.e-particles-blue{
position:absolute;
top:0%;
left:0%;
z-index:5;
width:100%;
height:100%;
opacity:0.1;
}
View Compiled
//PARTICLES ORANGE//
particlesJS("particleCanvas-Orange",
{
"particles": {
"number": {
"value": 120,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ec543f"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 3
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 20,
"random": true,
"anim": {
"enable": false,
"speed": 10,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 0.5,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "bounce",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 394.57382081613633,
"rotateY": 157.82952832645452
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 200,
"line_linked": {
"opacity": 0.2
}
},
"bubble": {
"distance": 1500,
"size": 40,
"duration": 7.272727272727273,
"opacity": 0.3676323676323676,
"speed": 3
},
"repulse": {
"distance": 50,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
//PARTICLES BLUE//
particlesJS("particleCanvas-Blue",
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 3
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 0.2,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 15,
"random": true,
"anim": {
"enable": true,
"speed": 10,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 0.5,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "bounce",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 3945.7382081613637,
"rotateY": 157.82952832645452
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 200,
"line_linked": {
"opacity": 0.2
}
},
"bubble": {
"distance": 1500,
"size": 40,
"duration": 7.272727272727273,
"opacity": 0.3676323676323676,
"speed": 3
},
"repulse": {
"distance": 50,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});