Out Of Ads | Run a modern business

HOME

CASE STUDY

contact

go top

HOME

CASE STUDY

contact

go top

Ready to start

Local Time ( CET )

17:39:48

Available For Work

Local Time ( CET )

17:39:48

Home

Rio

Hey, it's Rio! Let's create ad copy that'll make your brand unforgettable.

You

It's perfect! Thank you.

You

I need your help to launch 2 new ads for my clothing brand's up to 45% sale.

Ad 1: "Upgrade your wardrobe for less! Up to 45% off everything!"

Ad 2: "Turn heads without turning your wallet! Save up to 45%!"

No problem, what do you think about that?

Rio

Hey, it's Rio! Let's create ad copy that'll make your brand unforgettable.

You

It's perfect! Thank you.

You

I need your help to launch 2 new ads for my clothing brand's up to 45% sale.

Ad 1: "Upgrade your wardrobe for less! Up to 45% off everything!"

Ad 2: "Turn heads without turning your wallet! Save up to 45%!"

No problem, what do you think about that?

Rio

Hey, it's Rio! Let's create ad copy that'll make your brand unforgettable.

You

It's perfect! Thank you.

You

I need your help to launch 2 new ads for my clothing brand's up to 45% sale.

Ad 1: "Upgrade your wardrobe for less! Up to 45% off everything!"

Ad 2: "Turn heads without turning your wallet! Save up to 45%!"

No problem, what do you think about that?

Rio

Hey, it's Rio! Let's create ad copy that'll make your brand unforgettable.

You

It's perfect! Thank you.

You

I need to launch 2 new ads for my brand.

Sales are up to 45%.

Ad 1: "Upgrade your wardrobe for less! Up to 45% off everything!"

Ad 2: "Turn heads without turning your wallet! Save up to 45%!"

No problem, what do you think about that?

/*-------------------- Map --------------------*/ const map = (num, in_min, in_max, out_min, out_max) => { return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; } /*-------------------- Distance --------------------*/ const distance = (a, b) => { const dx = a.x - b.x; const dy = a.y - b.y; const d = Math.sqrt( dx * dx + dy * dy ); return d; } /*-------------------- Mouse --------------------*/ let mouse = new THREE.Vector2(0, 0); const onMouseMove = (e) => { TweenMax.to(mouse, 0.8, { x : e.clientX || e.pageX || e.touches[0].pageX || 0, y: e.clientY || e.pageY || e.touches[0].pageY || 0, ease: Power2.easeOut }); }; ['mousemove', 'touchmove'].forEach(event => { window.addEventListener(event, onMouseMove); }); /*-------------------- Spring --------------------*/ let spring = { scale: 1 }; const clicking = { down: () => { TweenMax.to(spring, .7, { scale: .7, ease: Power3.easeOut }); }, up: () => { TweenMax.to(spring, .9, { scale: 1, ease: Elastic.easeOut }); } }; ['mousedown', 'touchstart'].forEach(event => { window.addEventListener(event, clicking.down); }); ['mouseup', 'touchend'].forEach(event => { window.addEventListener(event, clicking.up); }); /*-------------------- Resize --------------------*/ const onResize = () => { canvas.style.width = ''; canvas.style.height = ''; width = canvas.offsetWidth; height = canvas.offsetHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); maxDist = distance(mouse, {x: width / 2, y: height / 2}); renderer.setSize(width, height); } let resizeTm; window.addEventListener('resize', function(){ resizeTm = clearTimeout(resizeTm); resizeTm = setTimeout(onResize, 200); }); /*-------------------- Noise --------------------*/ let dist = new THREE.Vector2(0, 0); let maxDist = distance(mouse, {x: width / 2, y: height / 2}); const updateVertices = (time) => { dist = distance(mouse, {x: width / 2, y: height / 2}); dist /= maxDist; dist = map(dist, 1, 0, 0, 1); if (dist < -1.2) { dist = -1.2 } for(let i = 0; i < bubbleGeometry.vertices.length; i++) { let vector = bubbleGeometry.vertices[i]; vector.copy(vector.original); let perlin = noise.simplex3( (vector.x * 0.006) + (time * 0.0005), (vector.y * 0.006) + (time * 0.0005), (vector.z * 0.006) ); let ratio = ((perlin * 0.3 * (dist + 0.1)) + 0.8); vector.multiplyScalar(ratio); } bubbleGeometry.verticesNeedUpdate = true; } /*-------------------- Animate --------------------*/ const render = (a) => { requestAnimationFrame(render); bubble.rotation.y= -4 + map(mouse.x, 0, width, 0, 4); bubble.rotation.z= 4 + map(mouse.y, 0, height, 0, -4); bubble.scale.set(spring.scale, spring.scale, spring.scale); updateVertices(a); renderer.clear(); renderer.render(scene, camera); } requestAnimationFrame(render); renderer.render(scene, camera);