Photo inspiration (zoom fading) effect
Today we continue JavaScript examples, and our article will about using javascript in modeling of nice fading and zoom effects for set of images. As we using pure javascript, our result will quite crossbrowser. I prepared 2 modes of switching (you can switch it using added button)
Here are sample and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML.
This is our main page code with all samples.
index.html
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/script.js"></script>
<div class="example">
<h3><a href="#">Photo inspiration (zoom fading) example</a> <button id="mode" style="float:right">Change mode</button></h3>
<div id="panel"></div>
<div id="imgsource" style="display:none;">
<img src="data_images/pic1.jpg" />
<img src="data_images/pic2.jpg" />
<img src="data_images/pic3.jpg" />
<img src="data_images/pic4.jpg" />
<img src="data_images/pic5.jpg" />
<img src="data_images/pic6.jpg" />
<img src="data_images/pic7.jpg" />
<img src="data_images/pic8.jpg" />
<img src="data_images/pic9.jpg" />
<img src="data_images/pic10.jpg" />
</div>
</div>
We prepared and hide our set of using images. Plus prepared panel area for drawing.
Step 2. CSS
Here are used CSS styles.
css/main.css
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:770px;height:565px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
#panel {
position:relative;
width: 768px;
height: 512px;
overflow: hidden;
}
#panel img {
position: absolute;
-ms-interpolation-mode:nearest-neighbor;
image-rendering: optimizeSpeed;
}
Step 3. JS
Here are our main control JS file.
js/main.js
var insp = {
iTimeInterval : 50,
iMaxZoom : 100, // max zoom
bHZoom : true, // horizontal zoom
bVZoom : true, // vertical zoom
iMode : 1, // mode (1 or 2)
iZStep : 0,
iImgStep : 1,
oPan : null,
iPanWidth : 0,
iPanHeight : 0,
oImgBefore: null,
oImgAfter: null,
oImgSource : null,
// main initialization function
init : function(iMode) {
this.iMode = iMode;
this.oImgSource = document.getElementById('imgsource').children;
this.oPan = document.getElementById('panel');
this.iPanWidth = this.oPan.offsetWidth;
this.iPanHeight = this.oPan.offsetHeight;
// initial properties of first img element
this.oImgBefore = document.createElement('img');
this.oImgBefore.src = this.oImgSource[0].src;
this.oImgBefore.style.top = (this.bVZoom ? -this.iMaxZoom : 0) + 'px';
this.oImgBefore.style.left = (this.bHZoom ? -this.iMaxZoom : 0) + 'px';
this.oImgBefore.style.width = (this.bHZoom ? this.iPanWidth + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
this.oImgBefore.style.height = (this.bVZoom ? this.iPanHeight + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
this.oImgBefore.style.filter = 'alpha(opacity=1)';
this.oImgBefore.style.opacity = 1;
this.oPan.appendChild(this.oImgBefore);
// initial properties of second img element
this.oImgAfter = document.createElement('img');
this.oImgAfter.src = this.oImgSource[1].src;
this.oImgAfter.style.top = '0px';
this.oImgAfter.style.left = '0px';
this.oImgAfter.style.width = this.iPanWidth + 'px';
this.oImgAfter.style.height = this.iPanHeight + 'px';
this.oImgAfter.style.filter = 'alpha(opacity=0)';
this.oImgAfter.style.opacity = 0;
this.oPan.appendChild(this.oImgAfter);
setInterval(insp.run, this.iTimeInterval);
},
// change mode function
changemode : function(){
this.iMode = (this.iMode == 2) ? 1 : 2;
},
// main loop drawing function
run : function(){
if (insp.iMaxZoom > insp.iZStep++) {
if (insp.bHZoom) {
insp.oImgBefore.style.left = (parseInt(insp.oImgBefore.style.left) - 1) + 'px';
insp.oImgBefore.style.width = (parseInt(insp.oImgBefore.style.width) + 2) + 'px';
if (insp.iMode == 2) {
insp.oImgAfter.style.left = (parseInt(insp.oImgAfter.style.left) - 1) + 'px';
insp.oImgAfter.style.width = (parseInt(insp.oImgAfter.style.width) + 2) + 'px';
}
}
if (insp.bVZoom) {
insp.oImgBefore.style.top = (parseInt(insp.oImgBefore.style.top) - 1) + 'px';
insp.oImgBefore.style.height = (parseInt(insp.oImgBefore.style.height) + 2) + 'px';
if (insp.iMode == 2) {
insp.oImgAfter.style.top = (parseInt(insp.oImgAfter.style.top) - 1) + 'px';
insp.oImgAfter.style.height = (parseInt(insp.oImgAfter.style.height) + 2) + 'px';
}
}
if (insp.oImgAfter.filters)
insp.oImgAfter.filters.item(0).opacity = Math.round(insp.iZStep / insp.iMaxZoom * 100);
else
insp.oImgAfter.style.opacity = insp.iZStep / insp.iMaxZoom;
} else {
insp.iZStep = 0;
if (insp.bHZoom) {
if (insp.iMode == 2) {
insp.oImgAfter.style.left = '0px';
insp.oImgAfter.style.width = insp.iPanWidth + 'px';
}
insp.oImgBefore.style.left = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
insp.oImgBefore.style.width = (insp.iMode == 2 ? (insp.iPanWidth + (2 * insp.iMaxZoom)) : insp.iPanWidth) + 'px';
}
if (insp.bVZoom) {
if (insp.iMode == 2) {
insp.oImgAfter.style.top = '0px';
insp.oImgAfter.style.height = insp.iPanHeight + 'px';
}
insp.oImgBefore.style.top = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
insp.oImgBefore.style.height = (insp.iMode == 2 ? (insp.iPanHeight + (2 * insp.iMaxZoom)) : insp.iPanHeight) + 'px';
}
if (insp.oImgAfter.filters)
insp.oImgAfter.filters.item(0).opacity = 0;
else
insp.oImgAfter.style.opacity = 0;
insp.oImgBefore.src = insp.oImgAfter.src;
insp.oImgAfter.src = insp.oImgSource[++insp.iImgStep % insp.oImgSource.length].src;
}
}
}
// page onload
onload = function() {
insp.init(); // perform initialization
document.getElementById('mode').onclick = function(){ // onclick handling
insp.changemode();
}
}
Hope this code is pretty easy. During time we just enlarging images, changing its opacity. All necessary variables collected in top of object. Welcome to experiment!
Live Demo
Conclusion
Hope that you was happy to play with our javascript lessons. I hope that fading switching photos looks fine 🙂 If is you were wondering – do not forget to thank. Will glad to listen your interesting comments. Good luck!
