ResponsifyJS demo

Developer
Wenting Zhang
Size
5,586 Kb
Views
8,096
  1. ResponsifyJS demo Previews
  2. ResponsifyJS demo HTML Codes
  3. ResponsifyJS demo CSS Codes
  4. ResponsifyJS demo JS Codes

How do I make an responsifyjs demo?

What is a responsifyjs demo? How do you make a responsifyjs demo? This script and codes were developed by Wenting Zhang on 07 November 2022, Monday.

ResponsifyJS demo Previews
IQ Test

ResponsifyJS demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ResponsifyJS demo</title> <link rel="stylesheet" href="https://i.icomoon.io/public/daef4d80b1/responsifyjs/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <header id="demo"> <div class="row"> <div class="instruction card"> <h1>DEMO</h1> <p><strong>Instruction:</strong><br>
Resize the browser window to see how the images adapt to responsive layout; click on images to see the original image in a new tab.</p> </div> <div class="git card"> <h1>GITHUB</h1> <a href="https://github.com/wentin/ResponsifyJS/" target="_blank" class="icon github"></a> </div> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/29.jpg" target="_blank" class="img1"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/29.jpg" alt="" data-focus-left="0.59" data-focus-top="0.61" data-focus-right="0.96" data-focus-bottom="0.98"/> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/23.jpg" target="_blank" class="img2"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/23.jpg" alt="" data-focus-left="0.29" data-focus-top="0.22" data-focus-right="0.38" data-focus-bottom="0.82"/> </a> </div> <div class="row"> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/4.jpg" target="_blank" class="img3"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/4.jpg" alt="" data-focus-left="0.67" data-focus-top="0.45" data-focus-right="0.95" data-focus-bottom="0.81"/> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/28.jpg" target="_blank" class="img4"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/28.jpg" alt="" data-focus-left="0.33" data-focus-top="0.15" data-focus-right="0.46" data-focus-bottom="0.82"/> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/6.jpg" target="_blank" class="img5"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/6.jpg" alt="" data-focus-left="0.20" data-focus-top="0.39" data-focus-right="0.38" data-focus-bottom="0.58"/> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/4.jpg" target="_blank" class="img6"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/4.jpg" alt="" data-focus-left="0.67" data-focus-top="0.44" data-focus-right="0.95" data-focus-bottom="0.82"/> </a> </div> <div class="row"> <div class="share card"> <h1>SHARE</h1> <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//responsifyjs.space/" target="_blank" class="icon facebook"></a> <a href="https://twitter.com/intent/tweet?text=A jquery plugin that makes images truly responsive &via=DesignJokes&url=http://responsifyjs.space/&hashtags=ResponsifyJS" target="_blank" class="icon twitter"></a> </div> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/6.jpg" target="_blank" class="img7"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/6.jpg" alt="" data-focus-left="0.20" data-focus-top="0.39" data-focus-right="0.38" data-focus-bottom="0.58"/> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/23.jpg" target="_blank" class="img8"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/23.jpg" alt="" data-focus-left="0.29" data-focus-top="0.22" data-focus-right="0.38" data-focus-bottom="0.82"/> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/11.jpg" target="_blank" class="img9"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/11.jpg" alt="" data-focus-left="0.26" data-focus-top="0.39" data-focus-right="0.37" data-focus-bottom="0.63"/> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/10.jpg" target="_blank" class="img10"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/10.jpg" alt="" data-focus-left="0.30" data-focus-top="0.44" data-focus-right="0.47" data-focus-bottom="0.69"/> </a> <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/29.jpg" target="_blank" class="img11"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/113726/29.jpg" alt="" data-focus-left="0.59" data-focus-top="0.61" data-focus-right="0.96" data-focus-bottom="0.98"/> </a> </div> <div class="clr"></div>
</header>
<div class="gifs"> <div class="with"> <img src="http://responsifyjs.space/comparison/with.gif" alt="" width="480" height="382"> <h2>Responsive image <strong>with</strong> responsify.js</h2> </div> <div class="without"> <img src="http://responsifyjs.space/comparison/without.gif" alt="" width="480" height="382"> <h2>Responsive image <strong>without</strong> responsify.js</h2> </div> <div class="clr"></div>
</div>
<main>
<h1><a id="user-content-responsifyjs" class="anchor" href="#responsifyjs" aria-hidden="true"><span class="octicon octicon-link"></span></a>Responsify.js</h1>
<p><code>A jquery plugin that makes images truly responsive, without sacrificing anyone's face :D</code></p>
<p>When images are used in a responsive container on web design, because of the container can change to any width:height ratio, a group shot could end up being cut off on people's faces, a nice photograph following "rule of third" could end up with no object in view. Responsive images face the challenge of how to keep the focused objects/area in view, this jquery plugin is here to solve the problem.</p>
<h3><a id="user-content-demo" class="anchor" href="#demo" aria-hidden="true"><span class="octicon octicon-link"></span></a>Demo</h3>
<p><a href="http://responsifyjs.space/#demo">http://responsifyjs.space/#demo</a></p>
<h3><a id="user-content-app" class="anchor" href="#app" aria-hidden="true"><span class="octicon octicon-link"></span></a>App</h3>
<p><a href="http://responsifyjs.space/app">http://responsifyjs.space/app</a></p>
<p>Use this interactive web app to generate the focus area data</p>
<h3><a id="user-content-what-it-does" class="anchor" href="#what-it-does" aria-hidden="true"><span class="octicon octicon-link"></span></a>What it does</h3>
<p>Responsify.js does the following:</p>
<ol>
<li>It allows you define a focus area on an image using <code>data-focus-xxx</code> tag</li>
<li>It takes in the focus area data from the image, calcuate the image's container's size, resize and position the image accordingly, make sure the focus area is always in view and in the best position possible.</li>
</ol>
<p>Responsive image <strong>with</strong> responsify.js</p>
<ul>
<li>gif: <a href="https://wentin.github.io/ResponsifyJS/comparison/with.gif">https://wentin.github.io/ResponsifyJS/comparison/with.gif</a></li>
<li>play it yourself: <a href="https://wentin.github.io/ResponsifyJS/comparison/with-responsify-js/">https://wentin.github.io/ResponsifyJS/comparison/with-responsify-js/</a></li>
</ul>
<p>Responsive image <strong>without</strong> responsify.js</p>
<ul>
<li>gif: <a href="https://wentin.github.io/ResponsifyJS/comparison/without.gif">https://wentin.github.io/ResponsifyJS/comparison/without.gif</a></li>
<li>play it yourself: <a href="https://wentin.github.io/ResponsifyJS/comparison/without-responsify-js/">https://wentin.github.io/ResponsifyJS/comparison/without-responsify-js/</a></li>
</ul>
<h3><a id="user-content-how-to-use" class="anchor" href="#how-to-use" aria-hidden="true"><span class="octicon octicon-link"></span></a>How to use</h3>
<ol>
<li><p>Use this interactive web app to generate the focus area data <a href="http://responsifyjs.space/app/">http://responsifyjs.space/app/</a></p>
<pre><code> &lt;img src="image.png" alt="" data-focus-left=".30" data-focus-top=".12" data-focus-right=".79" data-focus-bottom=".66" /&gt;
</code></pre>
<p><code>data-focus-left</code> is the focus area's left position comparing to the image's full width, in decimal. For example, if the full width is 300px, the focus area's left is 90, then the <code>data-focus-left</code> should be 90/300 = <code>0.3</code>. Same logic applies to other three data attributes.</p></li>
<li><p>Embed the responsify.js in the html</p>
<pre><code> &lt;script src="responsify.js"&gt;&lt;/script&gt;
</code></pre></li>
<li><p>Call responsify function when window object is loaded</p>
<pre><code> $(window).load(function() { $('img').responsify(); });
</code></pre></li>
<li><p>Call responsify function again when the window is being resized (optional)</p>
<pre><code> $(window).resize(function(){ $('img').responsify(); })
</code></pre></li>
</ol>
<h3><a id="user-content-contact-me" class="anchor" href="#contact-me" aria-hidden="true"><span class="octicon octicon-link"></span></a>Contact Me</h3>
<ul>
<li>Follow <a href="https://twitter.com/DesignJokes">@DesignJokes</a> on Twitter</li>
<li>Email <a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<h3><a id="user-content-other-project-by-wentin" class="anchor" href="#other-project-by-wentin" aria-hidden="true"><span class="octicon octicon-link"></span></a>Other Project by Wentin</h3>
<ul>
<li><a href="http://typedetail.com/">Type Detail</a></li>
<li><a href="https://github.com/wentin/underlineJS">underline.js</a></li>
<li><a href="http://profession.is/#/">profession.is</a></li>
</ul>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ResponsifyJS demo - Script Codes CSS Codes

body { font-family: 'Source Code Pro';
}
.clr { clear: both;
}
header#demo { /* border: solid 2px wheat; */
}
.row { width: 100%; float: left; position: relative;
}
.row a { display: block; overflow: hidden; float: left; box-sizing: border-box; /* border: solid 2px wheat; */ background-color: wheat;
}
.img1 { width: 66.67%; height: 40vh; position: relative;
}
.img2 { width: 33.33%; height: 40vh;
}
.img3 { width: 33.33%; height: 60vh;
}
.img4 { width: 25%; height: 60vh;
}
.img5, .img6 { width: 41.67%; height: 30vh;
}
.img7 { height: 70vh; width: 16.66%;
}
.img8 { height: 70vh; width: 16.67%;
}
.img9 { width: 66.67%; height: 30vh;
}
.img10 { width: 41.67%; height: 40vh;
}
.img11 { width: 25%; height: 40vh;
}
header .card { font-family: 'Source Code Pro'; position: absolute; z-index: 9;
}
header .card h1 { display: inline-block; border-radius: 32px; font-weight: bold; font-size: 20px; letter-spacing: 0.4px; line-height: 36px; padding: 0 18px;
}
header .instruction.card { left: 20px; top: 20px;
}
header .instruction.card h1 { background: #35195B; color: #F2EDC5;
}
header .instruction.card p { color: #35195B; background: rgba(242, 237, 197, 0.85); border-radius: 4px; font-size: 12px; line-height: 20px; width: 364px; padding: 12px 18px; margin-top: 6px;
}
header .instruction.card p strong { font-weight: bold;
}
header .git.card { right: 20px; top: 20px;
}
header .git.card h1 { background: #45252A; color: #FFF4E2; float: left;
}
header .share.card { right: 20px; top: 20px;
}
header .share.card h1 { background: #320F0B; color: #FFDF73; float: left;
}
.icon { display: inline-block; width: 36px; height: 36px; border-radius: 50%; text-decoration: none;
}
.icon:hover { text-decoration: none; opacity: 0.7;
}
.icon:before { font-size: 20px; display: block; width: 34px; text-align: center; line-height: 34px; font-family: 'responsifyjs' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased;
}
.icon.github { background: #FFF4E2; border: solid 1px #45252A;
}
.icon.github:before { content: "\e902"; color: #45252A;
}
.icon.facebook { background: #FFDF73; border: solid 1px #320F0B;
}
.icon.facebook:before { content: "\e903"; color: #320F0B; font-size: 28px;
}
.icon.twitter { background: #FFDF73; border: solid 1px #320F0B;
}
.icon.twitter:before { content: "\e900"; color: #320F0B;
}
main { padding-top: 32px; width: 720px; margin: 0 auto; font-family: 'Source Code Pro';
}
main h1 { font-weight: bold; font-size: 20px; color: #FFFFFF; letter-spacing: 0.4px; background: #000000; border-radius: 32px; line-height: 36px; height: 36px; width: 200px; margin: 0 auto; text-align: center; margin-bottom: 16px;
}
main p { font-weight: regular; font-size: 16px; color: #000000; line-height: 24px; margin-bottom: 16px;
}
main a { color: #3D76C2; text-decoration: none; word-wrap: break-word;
}
a:hover { text-decoration: underline;
}
main ol,
main ul { line-height: 24px;
}
main ol li{ list-style: decimal; list-style-position: inside; margin-bottom: 16px;
}
main ul li { list-style: disc; list-style-position: inside; margin-bottom: 16px;
}
main h3 { font-weight: bold; font-size: 18px; color: #000000; line-height: 24px; margin-bottom: 16px; margin-top: 32px;
}
pre { font-size: 12px; line-height: 20px; padding: 16px 20px; background: #F7F7F7; border-radius: 4px; margin-bottom: 16px; word-wrap: break-word;
}
.gifs { width: 1000px; margin: 32px auto;
}
.gifs h2 { text-align: center; margin-top: 8px; font-weight: 400;
}
.gifs h2 strong { font-weight: bold;
}
.gifs .with, .gifs .without { width: 480px; height: 382px; float: left;
}
.gifs .with { margin-right: 40px;
}
footer { width: 720px; margin: 32px auto;
}
@media screen and (max-width: 1040px) { .gifs { width: 92%; margin-left: 4%; margin-right: 4%; } .gifs .with, .gifs .without { width: 48%; height: auto; float: left; } .gifs div img { width: 100%; height: auto; } .gifs .with { margin-right: 4%; }
}
@media screen and (min-width: 320px) and (max-width: 760px) { .img1 { width: 66.67%; height: 30vh; } .img2 { width: 33.33%; height: 30vh; } .img3 { width: 33.33%; height: 40vh; } .img4 { width: 33.33%; height: 40vh; } .img5 { width: 33.33%; height: 20vh; } .img6 { width: 33.33%; height: 20vh; } .img7 { width: 25%; height: 50vh; } .img8 { width: 25%; height: 50vh; } .img9 { width: 25%; height: 30vh; } .img10 { width: 25%; height: 30vh; } .img11 { width: 50%; height: 20vh; } header .instruction.card p { width: 40%; } main { width: 92%; margin: 0 4%; }
}

ResponsifyJS demo - Script Codes JS Codes

(function ( $ ) { $.fn.responsify = function() { return this.each(function() { var owdith, oheight, twidth, theight, fx1, fy1, fx2, fy2, width, height, top, left; owidth = $(this).width(); oheight = $(this).height(); twidth = $(this).parent().width(); theight = $(this).parent().height(); fx1 = Number($(this).attr('data-focus-left')); fy1 = Number($(this).attr('data-focus-top')); fx2 = Number($(this).attr('data-focus-right')); fy2 = Number($(this).attr('data-focus-bottom')); if( owidth/oheight > twidth/theight ) { var fwidth = (fx2-fx1) * owidth; if ( fwidth/oheight > twidth/theight ) { height = oheight*twidth/fwidth; width = owidth*twidth/fwidth; left = -fx1*width; top = (theight-height)/2; } else { height = theight; width = theight*owidth/oheight; left = twidth/2 - (fx1 + fx2)*width/2; // if left > 0, it will leave blank on the left, so set it to 0; left = left>0?0:left; // if width - left < twidth, it will leave blank on the right, so set left = width - twidth left = (twidth - left - width)>0?(twidth-width):left top = 0; } } else { var fheight = (fy2-fy1) * oheight; if ( fheight/owidth > theight/twidth ) { width = owidth*theight/fheight; height = oheight*theight/fheight; top = -fy1*height; left = (twidth-width)/2; } else { width = twidth; height = twidth*oheight/owidth; top = theight/2 - (fy1 + fy2)*height/2; // if top > 0, it will leave blank on the top, so set it to 0; top = top>0?0:top; // if height - top < theight, it will leave blank on the bottom, so set top = height - theight top = (theight - top - height)>0?(theight-height):top left = 0; } } $(this).parent().css({ "overflow": "hidden" }) $(this).css({ "position": "relative", "height": height, "width": width, "left": left, "top": top }) }); };
}( jQuery ));
$(window).load(function() { $('header img').responsify();
});
$(window).resize(function(){ $('header img').responsify();
})
ResponsifyJS demo - Script Codes
ResponsifyJS demo - Script Codes
Home Page Home
Developer Wenting Zhang
Username wentin
Uploaded November 07, 2022
Rating 3
Size 5,586 Kb
Views 8,096
Do you need developer help for ResponsifyJS demo?

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!

Wenting Zhang (wentin) Script Codes
Name
P5.js Tail
Draw Eye Icon with Pure CSS
Algorithmic Animation with Javascript Tail
A Pen by Wenting Zhang
Algorithmic Animation javascript template
Responsify images
Guitar string
Angular directive poc
Shaking mustache
Three.js start point
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!