Perspective Generator

Developer
Lukejacksonn
Size
4,313 Kb
Views
12,144
  1. Perspective Generator Previews
  2. Perspective Generator HTML Codes
  3. Perspective Generator CSS Codes
  4. Perspective Generator JS Codes

How do I make an perspective generator?

A way of previewing web pages in common device viewport sizes and aspect ratios. . What is a perspective generator? How do you make a perspective generator? This script and codes were developed by Lukejacksonn on 30 November 2022, Wednesday.

Perspective Generator Previews
IQ Test

Perspective Generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Perspective Generator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <div> <input class="url-input" type="text" placeholder="Enter site URL" value="http://lukejacksonn.com/" /> </div> <select class="device-list"></select> <button class='load-url'>RELOAD</button>
</nav>
<section>
<div class="device"> <iframe class="device-content" src="http://lukejacksonn.com" frameborder="0"></iframe>
</div>
<button class="prev">&#9664;</button>
<button class="next">&#9654;</button>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Perspective Generator - Script Codes CSS Codes

html { background: #242424;
}
html,
body { width: 100%; height: 100%;
}
body { background-color: transparent; background-image: -webkit-linear-gradient(bottom, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent), -webkit-linear-gradient(left, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent); background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 76%, transparent 77%, transparent); height: 100%; background-size: 50px 50px; background-position: center center;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap;
}
body::after { content: attr(scale); position: absolute; bottom: 0; left: 0; width: 70px; height: 70px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(17, 17, 17, 0.5); font-family: sans-serif; font-weight: bold; color: #fff;
}
nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #212121; box-shadow: 0 1px 3px #000;
}
nav div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 10px; min-width: 100px;
}
nav button { min-width: 70px; margin: 10px; padding: 10px; background: #dd191d; margin-left: 10px;
}
nav input { background: #212121; color: #d8d8d8; border: none; border-bottom: 1px solid #eaeaea; border-radius: 0px; outline: none; font-size: 12px;
}
section { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden;
}
button { border: 0; outline: none; background: #212121; color: #eaeaea; font-weight: bold; cursor: pointer;
}
.next,
.prev { position: absolute; top: 0; bottom: 0; border: 0; background: #121212; color: #eaeaea; font-weight: bold; width: 40px; height: 60px; margin: auto;
}
.next:hover,
.prev:hover { -webkit-transform: scale(1.1); transform: scale(1.1);
}
input { padding: 5px 0px; border-radius: 5px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 10px;
}
.next { right: 0;
}
.prev { left: 0;
}
.device { width: 100%; height: 100%; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-transform: all 1s ease-in-out; transform: all 1s ease-in-out;
}
.device iframe { width: 100%; height: 100%; background: #fff;
}
select { background: #333; color: #b6b6b6; outline: none;
}

Perspective Generator - Script Codes JS Codes

$(function() { $.fn.fitInParent = function(boost, grow) { boost = boost || 1; return this.each(function() { var $elem = $(this); var $parent = $elem.parent(); var xscale = $parent.width() / $elem.outerWidth()*boost; var yscale = $parent.height() / $elem.outerHeight()*boost; var scale = xscale > yscale ? yscale : xscale; if(scale < 1 || grow) { $elem.css('transform','scale(' + scale + ')'); $('body').css('background-size', 50*scale + 'px ' + 50*scale + 'px'); $('body').attr('scale', Math.floor(scale.toFixed(2)*100) + '%'); } else { $elem.css('transform','scale(1)'); $('body').css('background-size', 50 + 'px ' + 50 + 'px'); $('body').attr('scale', 100 + '%'); } }); };
});
var devices;
$.getJSON('https://rawgit.com/LeaVerou/dpi/gh-pages/screens.json',function(data){ _.each(data, function(device){ $('.device-list').append('<option>'+ device.name +'</option>'); }); devices = data; setViewPort(currentDevice());
})
var getDevice = function(d) { return _.findWhere(devices, { name: d });
}
var currentDevice = function() { return getDevice($('.device-list').val());
}
var selectNextDevice = function() { $('.device-list').find(":selected").next().attr('selected', 'selected')
}
var selectPrevDevice = function() { $('.device-list').find(":selected").prev().attr('selected', 'selected')
}
var setViewPort = function(d) { $('.device').css({ 'width': d.w +'px', 'height': d.h +'px' }).fitInParent(0.9);
}
$('.next').on('click', function () { selectNextDevice(); setViewPort(currentDevice());
});
$('.prev').on('click', function () { selectPrevDevice(); setViewPort(currentDevice());
});
$('.device-list').on('change', function() { setViewPort(currentDevice());
})
$(window).resize(function() { setViewPort(currentDevice());
})
$('.load-url').on('click', function() { $('.device-content').attr('src', $('.url-input').val()); $('.load-url').text('RELOAD');
})
$('.url-input').keypress(function (e) { $('.load-url').text('LOAD'); if (e.which == 13) { $('.device-content').attr('src', $('.url-input').val()); $('.load-url').text('RELOAD'); return false; }
});
$(window).keydown(function(e) { if(e.keyCode == 37) { // left selectPrevDevice(); setViewPort(currentDevice()); } else if(e.keyCode == 39) { // right selectNextDevice(); setViewPort(currentDevice()); }
});
Perspective Generator - Script Codes
Perspective Generator - Script Codes
Home Page Home
Developer Lukejacksonn
Username lukejacksonn
Uploaded November 30, 2022
Rating 3
Size 4,313 Kb
Views 12,144
Do you need developer help for Perspective Generator?

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!

Lukejacksonn (lukejacksonn) Script Codes
Name
Flexbox Masonry
Greedy Navigation
Responsive Slider
Flexy Google Homepage
Flex Fix
GreedyNav Update
Sliding Drawers
Pinger
Springy Select
A Pen by lukejacksonn
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!