Refraction image reveal

Developer
Josh Beckwith
Size
3,014 Kb
Views
22,264
  1. Refraction image reveal Previews
  2. Refraction image reveal HTML Codes
  3. Refraction image reveal CSS Codes
  4. Refraction image reveal JS Codes

How do I make an refraction image reveal?

What is a refraction image reveal? How do you make a refraction image reveal? This script and codes were developed by Josh Beckwith on 29 August 2022, Monday.

Refraction image reveal Previews
IQ Test

Refraction image reveal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Refraction image reveal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- <div class="refractor" style="width: 1200px; height: 600px;" img-src="http://placekitten.com/1200/630"></div> -->
<!-- <div class="refractor" style="width: 1032px; height: 580px;" img-src="https://coreykoberna.com/wp-content/uploads/2016/07/DS_Branding_MU-uai-1032x580.jpg"></div> -->
<div class="refractor" style="width: 1024px; height: 576px;" img-src="https://www.dropbox.com/s/3iu7qu9zz8g5wgm/xHYMqDXh.jpg?dl=1"></div>
<button>show</button> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Refraction image reveal - Script Codes CSS Codes

body { background: #111
}
.refractor { position: absolute; top: 50%; left: 50%;
/* transform: translate(-50%, -50%) scale(.5); */ transform: translate(-50%, -50%); background-color: #000;
}
.refractor div { color: red
}

Refraction image reveal - Script Codes JS Codes

var Refractor = function(options){ var boxCountX = options.boxCountX || 14 var boxCountY = options.boxCountY || 7 var offsetStrength = options.offsetStrength || 300 var boxAnimDuration = options.boxAnimDuration === undefined ? 3 : options.boxAnimDuration var $target = options.$target var centerCellX = boxCountX/2 var centerCellY = boxCountY/2 var boxWidth = 100/boxCountX var boxHeight = 100/boxCountY var boxes = [] // strange offset thing that I only sort of understand var txFactor = (100+1/boxCountX*100) var tyFactor = (100+1/boxCountY*100) var initialize = function(){ for (var i = 0; i < boxCountX * boxCountY; i++){ var $box = $('<div>') var left = (i * boxWidth) % 100 var top = Math.floor(i * boxWidth / 100) * boxHeight $box.css({ position: 'absolute', left: left + '%', top: top + '%', width: boxWidth + '%', height: boxHeight + '%', float: 'left', backgroundImage: 'url(' + $target.attr('img-src') + ')', backgroundRepeat: 'no-repeat' }) var cellX = left / 100 * boxCountX var cellY = top / 100 * boxCountY $box.attr({cell: cellX + ',' + cellY}) var tx = (txFactor*cellX/boxCountX) var ty = (tyFactor*cellY/boxCountY) $box.attr({'target-position': tx + '% ' + ty + '%'}) $target.append($box) boxes.push($box) reset() //dev // $box.html($box.attr('cell')) } } var show = function(onComplete){ boxes.forEach(function($box){ TweenMax.to($box, boxAnimDuration, { css: { backgroundPosition: $box.attr('target-position'), opacity: 1 }, ease: Power3.easeOut, }) }) setTimeout(function(){ if(onComplete) onComplete() }, boxes.length * boxAnimDuration) } var reset = function(){ boxes.forEach(function($box, i){ // initial positions // offsets should be determined by vector of cell and center cell var cell = $box.attr('cell').split(',') var xVector = (centerCellX - cell[0]) / boxCountX * offsetStrength + 50 var yVector = (centerCellY - cell[1]) / boxCountY * offsetStrength + 50 // console.log(xVector, yVector) $box.css({ backgroundPosition: xVector + '% ' + yVector + '%', opacity: 0 }) }) } var destroy = function(){ boxes.forEach(function(box){box.remove()}) } var getDistance = function(x1, x2, y1, y2){ return Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) ) } initialize() return { show: show, reset: reset, destroy: destroy }
}
/* example usage PLAY WITH THE NUMBERS!
*/
var r = new Refractor({ $target: $('.refractor'),  offsetStrength: 2000, boxAnimDuration: 3, // boxCountX: 1, // boxCountY: 20
})
// demo stuff
setTimeout(function(){ r.show()
}, 1000)
$('button, body').on('click', function(){ r.reset() setTimeout(function(){ r.show() }, 300)
})
Refraction image reveal - Script Codes
Refraction image reveal - Script Codes
Home Page Home
Developer Josh Beckwith
Username positlabs
Uploaded August 29, 2022
Rating 3
Size 3,014 Kb
Views 22,264
Do you need developer help for Refraction image reveal?

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!

Josh Beckwith (positlabs) Script Codes
Name
Joystick Spinner
Temporalis
JitterSCSS
Time Dilation
Blurry text
Hootsuite Button Demo
Emoji Split
Youtube iframe player sandbox
Xtag render
Cryptaris Glitch Button
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!