18:35
Сегодня я хочу показать вам, как создать эффект близости к миниатюрам с jQuery. Идея заключается в масштабировании миниатюр, когда парит над ними, а также масштабировать соседние миниатюры пропорционально их расстоянию.
Смотрим ДЕМО
Установка:
Этот скрипт вставляем между head и /head:
Code
<link rel="stylesheet" type="text/css" href="/css/demo.css" />
<link rel="stylesheet" type="text/css" href="/css/style1.css" />
<script type="text/javascript">
// Please don't use this code on your site, use your own GA code
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Этот скрипт вставляем перед закрывающимся тегом /body:
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.proximity.js"></script>
<script type="text/javascript">
$(function() {
var Photo = (function() {
// list of thumbs
var $list = $('#pe-thumbs'),
// the images
$elems = $list.find('img'),
// maxScale : maximum scale value the image will have
// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
settings = {
maxScale : 1.4,
maxOpacity : 0.9,
minOpacity : Number( $elems.css('opacity') )
},
init = function() {
// minScale will be set in the CSS
settings.minScale = _getScaleVal() || 1;
_initEvents();
},
// Get Value of CSS Scale through JavaScript:
// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
_getScaleVal= function() {
var st = window.getComputedStyle($elems.get(0), null),
tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"fail...";
if( tr !== 'none' ) {
var values = tr.split('(')[1].split(')')[0].split(','),
a = values[0],
b = values[1],
c = values[2],
d = values[3];
return Math.sqrt( a * a + b * b );
}
},
_initEvents = function() {
// the proximity event
$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function( event, proximity, distance ) {
var $el = $(this),
$li = $el.closest('li'),
scaleVal = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
scaleExp = 'scale(' + scaleVal + ')';
// change the z-index of the element once it reaches the maximum scale value
( scaleVal === settings.maxScale ) ? $li.css( 'z-index', 1000 ) : $li.css( 'z-index', 1 );
$el.css({
'-webkit-transform' : scaleExp,
'-moz-transform' : scaleExp,
'-o-transform' : scaleExp,
'-ms-transform' : scaleExp,
'transform' : scaleExp,
'opacity' : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
});
});
}
return {
init : init
};
})();
Photo.init();
});
</script>
Это вставляем туда , где будет наш эффект:
Code
<div class="container">
<section class="pe-container">
<ul id="pe-thumbs" class="pe-thumbs">
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/1.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/2.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/3.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/4.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/5.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/6.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/7.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/8.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/9.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/10.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/11.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/12.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/13.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/14.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/15.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/16.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/17.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/18.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/19.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/20.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/21.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/22.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/23.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/24.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/25.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/26.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/27.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/28.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/29.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/30.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/31.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/32.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/33.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/34.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/35.jpg" /></a></li>
<li><a href="#"><img src="http://tympanus.net/Tutorials/ProximityEffect/images/thumbs/36.jpg" /></a></li>
</ul>
</section>
</div>
Из прикрепленного архива заливаем файлы в папки css , js , images
1.jpg - это фон эффекта , заменяем на любой другой свой , размер фона 900х430 px
