A small piece of JavaScript that makes sites more responsive even if they are completely fixed.
Resize your browser to see how it acts.
Add the following to your page:
<script>
// Place for options
</script>
<script src="/path/to/responsivr.min.js"></script>Put your labels into RESPONSIVR_LABELS:
<script>
RESPONSIVR_LABELS = [
'Only the brave resize!',
'Smile! You can do it.',
'Stick with it.',
':—)',
'No excuses, resize like a champion.',
'You’re worth it.',
'Try, try again.'
];
</script>
<script src="/path/to/responsivr.min.js"></script>Use functions to generate labels on the fly:
<script>
RESPONSIVR_LABELS = [
function () {
return window.innerWidth + 'px <strong>×</strong> '
+ window.innerHeight + 'px';
}
];
</script>Turn off RESPONSIVR_RANDOM if you need:
<script>
RESPONSIVR_RANDOM = false;
RESPONSIVR_LABELS = [
'One, Two, Three O’clock,',
'Four O’clock rock,',
'Five, Six, Seven O’clock,',
'Eight O’clock rock,',
'Nine, Ten, Eleven O’clock,',
'Twelve O’clock rock,',
'We’re gonna rock around the clock tonight!'
];
</script>Override rules for .responsivr, .responsivr--visible, and .responsivr__label classes:
<style>
body .responsivr {
background: none;
opacity: 0;
transform: translateY(-10px) perspective(600px) rotateX(10deg);
transition-property: transform, opacity;
}
body .responsivr--visible {
opacity: .8;
transform: translateY(0) perspective(600px) rotateX(0);
}
body .responsivr__label {
font-size: 72px;
line-height: 1;
color: #fff;
background-color: #000;
border-radius: 3px;
}
</style><script>
// How many milliseconds to show the overlay:
RESPONSIVR_HIDE_DELAY = 500;
// Hiding duration:
RESPONSIVR_HIDE_DURATION = 250;
</script>No comment, hackers.
RESPONSIVR_LABELSRESPONSIVR_RANDOMRESPONSIVR_HIDE_DELAYRESPONSIVR_HIDE_DURATIONRESPONSIVR_MANUAL_STARTResponsivr.initialize()Responsivr.show()Responsivr.hide()Responsivr.destroy()RESPONSIVR_ON_SHOWRESPONSIVR_ON_HIDEResponsivr.overlayResponsivr.labelResponsivr.labelIndexResponsivr.isWatchingResponsivr.isHidingMove the bellows.
© 2014 Artem Polikarpov