Psychedelic Animation
How do I make an psychedelic animation?
What is a psychedelic animation? How do you make a psychedelic animation? This script and codes were developed by Julien Dargelos on 29 November 2022, Tuesday.
Psychedelic Animation Previews
Psychedelic Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Psychedelic Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main" class="m1"> <div id="r1"></div> <div id="r2"></div> <div id="r3"></div> <div id="r4"></div>
</div> <script src="js/index.js"></script>
</body>
</html>Psychedelic Animation - Script Codes CSS Codes
body { margin:0; -webkit-transition:2s linear; -moz-transition:2s linear; -ms-transition:2s linear; -o-transition:2s linear; transition:2s linear;
}
#main { width:500px; height:500px; top:50%; left:50%; margin:-250px 0 0 -250px; position:absolute; -webkit-animation:rotate 10s linear infinite; -moz-animation:rotate 10s linear infinite; -ms-animation:rotate 10s linear infinite; -o-animation:rotate 10s linear infinite; animation:rotate 10s linear infinite;
}
#r1, #r2, #r3, #r4 { width:150px; height:150px; position:absolute;
}
#r1 { top:100px; left:100px;
}
#r2 { top:100px; left:250px; -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg);
}
#r3 { top:250px; left:100px; -webkit-transform:rotateX(180deg); -moz-transform:rotateX(180deg); -ms-transform:rotateX(180deg); -o-transform:rotateX(180deg); transform:rotateX(180deg);
}
#r4 { top:250px; left:250px; -webkit-transform:rotateX(180deg) rotateY(180deg); -moz-transform:rotateX(180deg) rotateY(180deg); -ms-transform:rotateX(180deg) rotateY(180deg); -o-transform:rotateX(180deg) rotateY(180deg); transform:rotateX(180deg) rotateY(180deg);
}
.circle { background:#000; width:25px; height:25px; top:140px; left:140px; border:3px solid #fff; border-radius:100px; opacity:0; position:absolute; -webkit-animation:rotate 1s linear infinite; -moz-animation:rotate 1s linear infinite; -ms-animation:rotate 1s linear infinite; -o-animation:rotate 1s linear infinite; animation:rotate 1s linear infinite; -webkit-transition:0.5s linear; -moz-transition:0.5s linear; -ms-transition:0.5s linear; -o-transition:0.5s linear; transition:0.5s linear;
}
@-webkit-keyframes rotate { 0% {-webkit-transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotate { 0% {-moz-transform:rotate(0deg);} 100% {-moz-transform:rotate(360deg);}
}
@-ms-keyframes rotate { 0% {-ms-transform:rotate(0deg);} 100% {-ms-transform:rotate(360deg);}
}
@-o-keyframes rotate { 0% {-o-transform:rotate(0deg);} 100% {-o-transform:rotate(360deg);}
}
@keyframes rotate { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}
}Psychedelic Animation - Script Codes JS Codes
var nbrCircle=10;
var cmpt=0;
while(cmpt<nbrCircle) { document.getElementById('r1').innerHTML=document.getElementById('r1').innerHTML+'<div class="circle"></div>'; document.getElementById('r1').getElementsByClassName('circle')[cmpt].style.margin='0 0 0 0'; setTimeout(function(){document.getElementById('r1').getElementsByClassName('circle')[cmpt].style.opacity='0.5';},500); document.getElementById('r2').innerHTML=document.getElementById('r2').innerHTML+'<div class="circle"></div>'; document.getElementById('r2').getElementsByClassName('circle')[cmpt].style.margin='0 0 0 0'; setTimeout(function(){document.getElementById('r2').getElementsByClassName('circle')[cmpt].style.opacity='0.5';},500); document.getElementById('r3').innerHTML=document.getElementById('r3').innerHTML+'<div class="circle"></div>'; document.getElementById('r3').getElementsByClassName('circle')[cmpt].style.margin='0 0 0 0'; setTimeout(function(){document.getElementById('r3').getElementsByClassName('circle')[cmpt].style.opacity='0.5';},500); document.getElementById('r4').innerHTML=document.getElementById('r4').innerHTML+'<div class="circle"></div>'; document.getElementById('r4').getElementsByClassName('circle')[cmpt].style.margin='0 0 0 0'; setTimeout(function(){document.getElementById('r4').getElementsByClassName('circle')[cmpt].style.opacity='0.5';},500); cmpt++;
}
setTimeout(function() { var cmpt=0; while(cmpt<nbrCircle) { document.getElementById('r1').getElementsByClassName('circle')[cmpt].style.opacity='0.5'; document.getElementById('r2').getElementsByClassName('circle')[cmpt].style.opacity='0.5'; document.getElementById('r3').getElementsByClassName('circle')[cmpt].style.opacity='0.5'; document.getElementById('r4').getElementsByClassName('circle')[cmpt].style.opacity='0.5'; cmpt++; }
},1000);
setInterval(function(){ linearMargin=false; var cmpt=0; while(document.getElementById('r1').getElementsByClassName('circle')[cmpt]) { if(cmpt%2==0) { linearMargin=false; } else { linearMargin=true; } var circle=document.getElementById('r1').getElementsByClassName('circle')[cmpt]; var value1_1=Math.floor((Math.random()*255)+0); var value1_2=Math.floor((Math.random()*255)+0); var value1_3=Math.floor((Math.random()*255)+0); var marginInterval=100; var contentSize=500; if(parseInt(circle.style.marginTop)+marginInterval<contentSize && parseInt(circle.style.marginTop)+-marginInterval>=0) var value2_1=parseInt(circle.style.marginTop)+Math.floor((Math.random()*marginInterval)+-marginInterval); else if(parseInt(circle.style.marginTop)+marginInterval<document.body.offsetHeight) var value2_1=parseInt(circle.style.marginTop)+Math.floor((Math.random()*marginInterval)+0); else var value2_1=parseInt(circle.style.marginTop)+-Math.floor((Math.random()*marginInterval)+0); if(linearMargin==true) value2_2=value2_1; else if(parseInt(circle.style.marginLeft)+marginInterval<contentSize && parseInt(circle.style.marginWidth)+-marginInterval>=0) var value2_2=parseInt(circle.style.marginLeft)+Math.floor((Math.random()*marginInterval)+-marginInterval); else if(parseInt(circle.style.marginLeft)+marginInterval<document.body.offsetHeight) var value2_2=parseInt(circle.style.marginLeft)+Math.floor((Math.random()*marginInterval)+0); else var value2_2=parseInt(circle.style.marginLeft)+-Math.floor((Math.random()*marginInterval)+0); var value3_1=Math.floor((Math.random()*100)+10); var value3_2=value3_1; var value4_1=Math.floor((Math.random()*100)+0); circle.style.background='rgb('+value1_1+','+value1_2+','+value1_3+')'; circle.style.margin=value2_1+'px 0 0 '+value2_2+'px'; circle.style.width=value3_1+'px'; circle.style.height=value3_2+'px'; circle.style.borderRadius=value4_1+'px'; var circle=document.getElementById('r2').getElementsByClassName('circle')[cmpt]; circle.style.background='rgb('+value1_1+','+value1_2+','+value1_3+')'; circle.style.margin=value2_1+'px 0 0 '+value2_2+'px'; circle.style.width=value3_1+'px'; circle.style.height=value3_2+'px'; circle.style.borderRadius=value4_1+'px'; var circle=document.getElementById('r3').getElementsByClassName('circle')[cmpt]; circle.style.background='rgb('+value1_1+','+value1_2+','+value1_3+')'; circle.style.margin=value2_1+'px 0 0 '+value2_2+'px'; circle.style.width=value3_1+'px'; circle.style.height=value3_2+'px'; circle.style.borderRadius=value4_1+'px'; var circle=document.getElementById('r4').getElementsByClassName('circle')[cmpt]; circle.style.background='rgb('+value1_1+','+value1_2+','+value1_3+')'; circle.style.margin=value2_1+'px 0 0 '+value2_2+'px'; circle.style.width=value3_1+'px'; circle.style.height=value3_2+'px'; circle.style.borderRadius=value4_1+'px'; cmpt++; }
},500);
setInterval(function() { var value1=Math.floor((Math.random()*255)+0); var value2=Math.floor((Math.random()*255)+0); var value3=Math.floor((Math.random()*255)+0); document.body.style.background='rgb('+value1+','+value2+','+value3+')';
},2000);
| Developer | Julien Dargelos |
| Username | juliendargelos |
| Uploaded | November 29, 2022 |
| Rating | 3.5 |
| Size | 2,665 Kb |
| Views | 10,120 |
Do you need developer help for Psychedelic Animation?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Julien Dargelos (juliendargelos) Script Codes
| Name | Size |
| Skateboard tricks | 3,181 Kb |
| InfoGrid | 4,925 Kb |
| Grapher | 4,725 Kb |
| SmartPass | 3,841 Kb |
| Watch | 2,598 Kb |
| Scroll snap points carousel | 3,524 Kb |
| A Pen by Julien Dargelos | 2,139 Kb |
| Calculator | 2,553 Kb |
| Js-ScrollBar | 5,045 Kb |
| Vusic | 4,178 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
| Shop Talk logo made in CSS | Hugo | 19,368 Kb |
| A Pen by Tosh | Panev | 2,586 Kb |
| Pure CSS Tooltips | Mobius1 | 2,271 Kb |
| Pagepilling.js | Blossk | 6,554 Kb |
| Blog demo to use given styling | Andygirl | 2,412 Kb |
| Animated css matrix type | NielsOeltjen | 3,484 Kb |
| Simple content swap | Snografx | 1,859 Kb |
| Blog Concept - Single Post | Marionebl | 9,603 Kb |
| Ball physics | Blackkbot | 3,874 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!