Universe Zoom

Developer
Bryan Jones
Size
3,574 Kb
Views
70,840
  1. Universe Zoom Previews
  2. Universe Zoom HTML Codes
  3. Universe Zoom CSS Codes
  4. Universe Zoom JS Codes

How do I make an universe zoom?

This is my take on zooming. I am using Javascript to track mouse movement and move the glass accordingly. You can use the zoom drop down to select different zooms. You can find some pretty cool stuff in the nebula. I have found a few faces and neat shapes.. What is a universe zoom? How do you make a universe zoom? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.

Universe Zoom Previews
IQ Test

Universe Zoom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Universe Zoom</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <select id="selector"> <option value="4">4x Zoom</option> <option value="3">3x Zoom</option> <option value="2">2x Zoom</option>
</select>
<div class="wrapper"> <div class="large-text text">4x</div> <div class="large outer"> <div class="glass"></div> </div> <div class="medium-text text">3x</div> <div class="medium outer"> <div class="glass"></div> </div> <div class="small-text text">2x</div> <div class="small outer"> <div class="glass"></div> </div>	<img class="background" src="http://bryanjones.us/sites/default/files/nebula2_small.jpg">
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Universe Zoom - Script Codes CSS Codes

body { background-color: #212119; margin: 0;
}
#selector { border: 5px solid #aaa; padding: 3px 10px; margin-right: 20px; margin-top: 20px; position: absolute; right: 0; z-index: 100; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 5px 0 #000; -webkit-box-shadow: 0 0 5px 0 #000; box-shadow: 0 0 5px 0 #000;
}
.wrapper { height: 679px; position: relative; width: 1000px;
}
.outer { border: 5px solid #aaa; height: 200px; margin-left: 30px; margin-top: 30px; position: absolute; width: 200px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5);
}
.large { background: url("http://bryanjones.us/sites/default/files/nebula2.jpg") no-repeat #212119; display: none;
}
.medium { background: url("http://bryanjones.us/sites/default/files/nebula2x3.jpg") no-repeat #212119; display: none;
}
.small { background: url("http://bryanjones.us/sites/default/files/nebula2x2.jpg") no-repeat #212119; display: none;
}
.text { background-color: #555; border: 2px solid #aaa; color: #fff; display: none; font-weight: bold; height: 90px; margin-left: 30px; margin-top: 30px; padding: 8px; position: absolute; width: 90px; -moz-border-radius: 30% 0 0 0; -webkit-border-radius: 30%; border-radius: 30% 0 0 0;
}
.glass { background-color: transparent; cursor: none; height: inherit; position: relative; width: 100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25); box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25); -moz-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); transform: rotateZ(-30deg);
}

Universe Zoom - Script Codes JS Codes

/** * Created by Bryan Jones. * * Follow me for neat coding tricks. * https://twitter.com/BryanJonesUS */
$(document).ready(function(){	// Select 4x zoom by default. var zoom = 4;	var outer = getOuterClass(zoom); var xOffset = $(outer).width() / 2; var yOffset = $(outer).height() / 2; $(".wrapper").mousemove(function(e) {	if (e.pageX < $('.wrapper').width() && e.pageY < $('.wrapper').height()) { $(outer).css('display', 'block'); $(outer + '-text').css('display', 'block'); // Move the glass. $(outer + '-text').css('left', e.pageX - xOffset); $(outer + '-text').css('top', e.pageY - yOffset); $(outer).css('left', e.pageX - xOffset); $(outer).css('top', e.pageY - yOffset);	// Move the background depending on zoom. $(outer).css('background-position', ((e.pageX * zoom) * -1) + 'px ' + ((e.pageY * zoom) * -1) + 'px'); }	else { $(outer).css('display', 'none'); $(outer + '-text').css('display', 'none'); } }); // Change zooms when select box is used. $('#selector').change(function() { zoom = $("#selector").val(); $('.outer').css('display', 'none'); $('.text').css('display', 'none');	outer = '.small'; if (zoom == 4) { outer = '.large'; } else if (zoom == 3) { outer = '.medium'; } });
});
/** * Get the background image based on zoom. */
function getOuterClass(zoom) { var outer = '.small'; if (zoom == 4) { outer = '.large'; } else if (zoom == 3) { outer = '.medium'; }	return outer;
}
Universe Zoom - Script Codes
Universe Zoom - Script Codes
Home Page Home
Developer Bryan Jones
Username bartuc
Uploaded July 13, 2022
Rating 4.5
Size 3,574 Kb
Views 70,840
Do you need developer help for Universe Zoom?

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!

Bryan Jones (bartuc) Script Codes
Name
Planet Rotation
Card Flip
Subscribe
Books
Shine Effect
Lens Flare
Form Labels
Screens
Solar System Maker
Earth Clock
Create amazing marketing copy 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!