Textmask over random clouds animation

Developer
David A.
Size
3,929 Kb
Views
10,120
  1. Textmask over random clouds animation Previews
  2. Textmask over random clouds animation HTML Codes
  3. Textmask over random clouds animation CSS Codes
  4. Textmask over random clouds animation JS Codes

How do I make an textmask over random clouds animation?

Randomized clouds, only works on chrome for now (and almost in safari & ff). Done with the magnificant 3dcss: https://github.com/meodai/3dcss. What is a textmask over random clouds animation? How do you make a textmask over random clouds animation? This script and codes were developed by David A. on 28 November 2022, Monday.

Textmask over random clouds animation Previews
IQ Test

Textmask over random clouds animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Textmask over random clouds animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--h1 Hellouu clouds-->
<div class="mother js-mother"></div>
<div class="mask js-mask"> <h1>David A.</h1>
</div> <script src='https://cdn.rawgit.com/meodai/3dcss/0.3.3/3dcss.js'></script> <script src="js/index.js"></script>
</body>
</html>

Textmask over random clouds animation - Script Codes CSS Codes

body, html { background: #202020; color: #fff; height: 100%; -webkit-perspective: 1200px; perspective: 1200px; overflow: hidden;
}
h1 { margin: 0; font-size: 20.20vw; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); white-space: nowrap;
}
.mother { position: absolute; width: 80%; height: 80%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.cloud, .cloudPart { position: absolute; width: 256px; height: 256px; margin: -128px 0 0 -128px; top: 0; left: 0;
}
.cloud { -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.cloudPart { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/102565/cloud.png) no-repeat; background-size: 100% auto;
}
.mask { -webkit-transform: translateZ(0px); transform: translateZ(0px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #202020; mix-blend-mode: darken; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transition: 1666ms clip-path cubic-bezier(0.3, 0.3, 0.25, 1), 1666ms -webkit-clip-path cubic-bezier(0.3, 0.3, 0.25, 1);
}
.mask.visible { opacity: 1; -webkit-transform: translateZ(0px); transform: translateZ(0px); -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
}
.mask.plain { mix-blend-mode: normal; -webkit-transition: 1s mix-blend-mode; transition: 1s mix-blend-mode;
}
@-webkit-keyframes cloudRotation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

Textmask over random clouds animation - Script Codes JS Codes

var d = document;
function createCloud (minParticles, maxParticles, depth){ var x,y,z,a,s, $cloud, $cloudPart, cloud, cloudPart; $cloud = d.createElement('div'); $cloud.classList.add('cloud'); cloud = new Css3d($cloud); depth = depth || 0; for(i = 0; i < (minParticles || 2) + Math.round( Math.random() * ( maxParticles || 10) ); i++){ $cloudPart = d.createElement('div'); $cloudPart.classList.add('cloudPart'); x = 256 - ( Math.random() * 256 ); y = 256 - ( Math.random() * 256 ); z = 100 - ( Math.random() * 200 ); a = Math.random() * 360; s = 0.25 + Math.random(); cloudPart = new Css3d($cloudPart); cloudPart.set('position', x, y, z); cloudPart.setAttr('rotation', 'z', a); cloudPart.setAttr('scale', 'x', s); cloudPart.setAttr('scale', 'y', s); cloudPart.applyStyle(); cloud.addChild(cloudPart); } $cloud.style.top = ( Math.random() * 100 ) + "%"; $cloud.style.left = ( Math.random() * 100 ) + "%"; cloud.setAttr('position', 'z', ((Math.random() < 0.5 ? -1 : 1) * Math.random() * 100) + depth ); cloud.applyStyle(); return cloud;
};
var world = new Css3d(d.querySelector('.js-mother'));
var max = 0;
for(var j = 0; j < 50; j++) { max = j * 175; world.addChild( createCloud(1,5,max) );
}
var i = 0;
function setSize() { world.setAttr('position', 'x', window.innerWidth * -.4); world.setAttr('position', 'y', window.innerHeight * -.4);
}
setSize();
window.addEventListener('resize', setSize);
var speed = 0.75;
var max = -max;
var direction = -1;
setTimeout(function(){ d.querySelector('.js-mask').classList.add('visible'); speed = 2;
},10000);
function loop (){ i = i + (direction * speed); world.setAttr('position', 'z', i); world.applyStyle(); world.children.forEach(function(cloudy){ cloudy.setAttr('rotation', 'z', i * .015); cloudy.applyStyle(); }); if(i < max && direction == -1) { direction = 1; } if(i > 0){ d.querySelector('.js-mask').classList.add('plain'); } if(i < 200) { requestAnimationFrame(loop); }
};
loop();
$(document).on('click', function(){ d.querySelector('.js-mask').classList.add('visible'); speed = 3;
});
Textmask over random clouds animation - Script Codes
Textmask over random clouds animation - Script Codes
Home Page Home
Developer David A.
Username meodai
Uploaded November 28, 2022
Rating 3.5
Size 3,929 Kb
Views 10,120
Do you need developer help for Textmask over random clouds 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!

David A. (meodai) Script Codes
Name
Different centering methods
Media Queries on Crack
Color palette distribution for different color spaces
Color fan
Animated scroll timeline
Cymk logo generator
We Simplify animation
Cubehelix ticktack.js
All the 16k color names from the color-name-list API
DOM explosions
Create amazing blog posts 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!