As a non Programmer I try to use a Script form my Purpose and have to modify it, hope thats generally ok to you:
HTML in original Script:
<div class="tc-page-wrap">
</div>
SCSS / Less section:
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.6.3/css/font-awesome.css);
.tc-page-wrap {
margin: 0 auto;
position: relative;
}
.random-tc-page-wrap:after {
font-family: FontAwesome;
content: "\f005";
}
$circle-size: 100px;
$colors: #FFD700, #FFF8DC, #DB7093, #C2B7FE, #95A9FF;
$shapes: '\f005', '\f0c8', '\f1db', '\f096', '\f1d8', '\f1cb';
$shape-count: 50;
@for $i from 1 through $shape-count {
$shape-size: random(10);
$rotation: random(360);
$speed: 40 + random(10);
$color-key: random( length($colors) );
$shape-color: nth( $colors, $color-key );
$shape-key: random( length($shapes) );
$shape-type: nth( $shapes, $shape-key );
$text: random(10);
@keyframes tc-page-wrap-#{$i} {
0% {
transform: translate3d(0,0,0) rotate(#{$rotation + 0}deg);
}
100% {
transform: translate3d(0,0,0) rotate(#{$rotation + 360}deg);
}
}
.tc-page-wrap-container--#{$i} {
animation: tc-page-wrap-#{$i} #{$speed}s linear infinite;
.random-tc-page-wrap:after {
margin: #{$shape-size}rem;
color: $shape-color;
font-size: #{$shape-size * 0.2}rem;
content: $shape-type;
}
}
}
Javascript Part:
$(document).ready(function() {
var html = '';
for (var i = 1; i <= 50; i ++) {
html += '<div class="tc-page-wrap-container--'+i+' tc-page-wrap-
animation"><div class="random-tc-page-wrap"></div></div>';
}
document.querySelector('.tc-page-wrap').innerHTML += html;
});
I would like to put generated content into <body> Elemet, who could give some Help?
Aucun commentaire:
Enregistrer un commentaire