Как создать галерею миниатюр в стиле OS X

Красивая галерея это всегда привлекает посетителей, удобность и простота это залог успеха проекта, ведь все гениальное это просто. Если Вам приходилось работать на оборудованию мастеров из Купертино, то замечали весьма интересную анимацию разворота окон и приложений. В данном уроке мы рассмотрим как создать галерею миниатюр которые будут размещаться на нижнем доке, а при нажатии на них будет происходит плавный разворот в стиле OS X. Для данной реализации нам понадобится весьма увесистый код, но поверьте, результат оправдывает проделанную работу.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

На нижней док, станции у нас будет размещаться шесть изображений, квадратной формы, это реализовано для простоты просмотра изображений. И так, давайте приступим.

Шаг 1. HTML

У нас есть класс которым мы обвернули наши изображения с подписями:

<div class="dock">
 <ul>
 <li><img class="genie-thumb" src="img/img-17.jpg" alt="My daughters; Isabell &amp; Yasmin"/></li>
 <li><img class="genie-thumb" src="img/img-12.jpg" alt="Isabell"/></li>
 <li><img class="genie-thumb" src="img/img-11.jpg" alt="Yasmin"/></li>
 <li><img class="genie-thumb" src="img/img-13.jpg" alt="Felicia"/></li>
 <li><img class="genie-thumb" src="img-14.jpg" alt="My princesses :)"/></li>
 <li><img class="genie-thumb" src="img-15.jpg" alt="Me &amp; Yasmin"/></li>
 </ul>
</div>

<ul>

</ul>

</div>

Эта вся наша разметка, по желанию количество изображений, конечно, можно увеличить, перейдем к следующему шагу.

Как создаем галерею миниатюр в стиле OS X | RUDEBOX

Шаг 2. CSS

Нам необходимо все это стилизовать, для этого мы, для начала, устанавливаем параметры для док. полки снизу. Полка у нас будет состоять из трех частей, это основное изображение, и два изображения с закругленными углами:

.dock {
 position: absolute;
 bottom: 0px;
 left: 0px;
 right: 0px;
 text-align: center;
 overflow: hidden;
 z-index: 1;

ul {
 background: url(board_middle.png) 50% 100% repeat-x;
 position: relative;
 display: inline-block;
 list-style-type: none;
 padding: 0px 20px;
 margin: 0px auto;

&:before {
 content: '';
 background: url(board_left.png) 50% 100% no-repeat;
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: -29px;
 width: 29px;
 }
 &:after {
 content: '';
 background: url(board_right.png) 50% 100% no-repeat;
 position: absolute;
 top: 0px;
 bottom: 0px;
 right: -29px;
 width: 29px;
 }

li {
 //background: rgba(0,0,0,0.1);
 position: relative;
 display: inline-block;
 margin: 0px 10px 25px 10px;
 line-height: 1px;
 width: 65px;

&:before {
 content: '';
 background: url(shadow.png) 50% 50% no-repeat;
 position: absolute;
 bottom: -10px;
 left: 0px;
 right: 0px;
 width: 68px;
 height: 12px;
 z-index: 1;
 }
 }
 }

img {
 width: 100%;
 background-repeat: no-repeat;
 background-size: 100%;
 cursor: pointer;

&.genie-thumb {
 .bgTransition( @position );
 }
 &.paced-thumb {
 .bgTransitionIn( @position * 0.9 );
 }
 }
}

.genie {
 position: absolute;
 display: none;
 background-repeat: no-repeat;
 background-size: cover;
 cursor: pointer;

&.expand .genie-step {
 .bgTransition(@position);
 }
 &.fan .genie-step {
 .transition(@scale);
 }
 &.collapse .genie-step {
 .transition(@scale);
 }
 &.change-pace {
 box-shadow: 0px 0px 30px rgba(0,0,0,0.5);
 .genie-step {
 .bgTransitionIn(@position * 1.9);
 }
 }

.genie-step {
 background-repeat: no-repeat;
 background-image: inherit;
 background-size: 100%;
 position: absolute;
 }
}

.bgTransitionIn ( @duration ) {
 -moz-transition: background-position @duration ease-in;
 -webkit-transition: background-position @duration ease-in;
}
.bgTransition ( @duration ) {
 -moz-transition: background-position @duration ease-out;
 -webkit-transition: background-position @duration ease-out;
}
.transition ( @duration ) {
 -moz-transition: all @duration ease-out;
 -webkit-transition: all @duration ease-out;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

.dock {

position: absolute;

bottom: 0px;

left: 0px;

right: 0px;

text-align: center;

overflow: hidden;

z-index: 1;

ul {

background: url(board_middle.png) 50% 100% repeat-x;

position: relative;

display: inline-block;

list-style-type: none;

padding: 0px 20px;

margin: 0px auto;

&:before {

content: '';

background: url(board_left.png) 50% 100% no-repeat;

position: absolute;

top: 0px;

bottom: 0px;

left: -29px;

width: 29px;

}

&:after {

content: '';

background: url(board_right.png) 50% 100% no-repeat;

position: absolute;

top: 0px;

bottom: 0px;

right: -29px;

width: 29px;

}

li {

//background: rgba(0,0,0,0.1);

position: relative;

display: inline-block;

margin: 0px 10px 25px 10px;

line-height: 1px;

width: 65px;

&:before {

content: '';

background: url(shadow.png) 50% 50% no-repeat;

position: absolute;

bottom: -10px;

left: 0px;

right: 0px;

width: 68px;

height: 12px;

z-index: 1;

}

img {

width: 100%;

background-repeat: no-repeat;

background-size: 100%;

cursor: pointer;

&.genie-thumb {

.bgTransition( @position );

}

&.paced-thumb {

.bgTransitionIn( @position * 0.9 );

}

.genie {

position: absolute;

display: none;

background-repeat: no-repeat;

background-size: cover;

cursor: pointer;

&.expand .genie-step {

.bgTransition(@position);

}

&.fan .genie-step {

.transition(@scale);

}

&.collapse .genie-step {

.transition(@scale);

}

&.change-pace {

box-shadow: 0px 0px 30px rgba(0,0,0,0.5);

.genie-step {

.bgTransitionIn(@position * 1.9);

}

.genie-step {

background-repeat: no-repeat;

background-image: inherit;

background-size: 100%;

position: absolute;

}

.bgTransitionIn ( @duration ) {

-moz-transition: background-position @duration ease-in;

-webkit-transition: background-position @duration ease-in;

}

.bgTransition ( @duration ) {

-moz-transition: background-position @duration ease-out;

-webkit-transition: background-position @duration ease-out;

}

.transition ( @duration ) {

-moz-transition: all @duration ease-out;

-webkit-transition: all @duration ease-out;

}

В результате чего мы получаем замечательный макет, с подготовленной площадкой для вывода изображений.

Шаг 3. JS

Последним шагом будет реализация анимации при нажатии и свертывании изображения:

(function() {

'use strict';

var $ = function(selector, context) {
 context = context || document;
 return [].slice.call( context.querySelectorAll(selector) );
 },
 getDim = function(el, attr, val) {
 attr = attr || 'nodeName';
 val = val || 'BODY';
 var dim = {w: el.offsetWidth, h: el.offsetHeight, t: 0, l: 0, obj: el};
 while (el && el[attr] != val && el.getAttribute(attr) != val) {
 if (el == document.firstChild) return null;
 dim.t += el.offsetTop - el.scrollTop;
 dim.l += el.offsetLeft - el.scrollLeft;
 el = el.offsetParent;
 }
 return dim;
 },
 prefixedEvent = function(el, type, callback) {
 var pfx = 'webkit moz MS o '.split(' '),
 p = 0,
 pl = pfx.length;
 for (; p<pl; p++) {
 if (!pfx[p]) type = type.toLowerCase();
 el.addEventListener(pfx[p] + type, callback, false);
 }
 },

genie = {
 active: false,
 step_height: window.chrome ? 3 : 5,
 init: function() {
 var thumbs = $('.dock img'),
 gauge = new Image(),
 il = thumbs.length,
 i = 0;
 for (; i<il; i++) {
 gauge.src = thumbs[i].src;
 thumbs[i].setAttribute('data-src', gauge.src );
 thumbs[i].setAttribute('data-width', gauge.width );
 thumbs[i].setAttribute('data-height', gauge.height );
 thumbs[i].style.backgroundImage = 'url('+ gauge.src +')';
 thumbs[i].style.height = thumbs[i].height +'px';
 thumbs[i].src = 'http://vanguard-ide.com/genie/img/_.gif';
 }
 genie.el = document.body.appendChild( document.createElement('div') );

document.addEventListener('click', genie.doEvent, false);

LS({id: 'genie_text'});
 },
 doEvent: function(event) {
 switch(event.type) {
 case 'transitionend':
 case 'webkitTransitionEnd':
 var source = genie.el,
 target = source.thumbEl,
 source_dim = getDim(source),
 target_dim = getDim(target),
 diffT = target_dim.t + source_dim.t - 100,
 step = source.childNodes,
 step_height = step[0].offsetHeight,
 il = step.length,
 i = 0;

switch (event.propertyName) {
 case 'left':
 if (source.classList.contains('collapse')) {
 for (; i<il; i++) {
 step[i].style.backgroundPosition = '0px '+ (diffT + i - (i * step_height)) +'px';
 }
 target.style.backgroundPosition = '0px 0px';
 source.classList.add('change-pace');
 source.style.height = '0px';
 }
 break;
 case 'background-position':
 if (source.classList.contains('expand')) {
 for (; i<il; i++) {
 step[i].style.left = '0px';
 step[i].style.width = source_dim.w +'px';
 }
 source.classList.add('fan');
 } else {
 target.classList.remove('paced-thumb');
 target.classList.add('genie-thumb');
 source.classList.remove('change-pace');
 source.classList.remove('collapse');
 source.innerHTML = '';

 genie.active = false;

if (genie.next) {
 genie.expand( genie.next );
 genie.next = false;
 }
 }
 break;
 case 'width':
 if (source.classList.contains('fan')) {
 source.style.backgroundPosition = '0px 0px';
 setTimeout(function() {
 source.classList.remove('fan');
 source.classList.remove('expand');
 source.innerHTML = '';
 }, 0);
 genie.active = target;
 }
 break;
 }
 break;
 case 'click':
 if (event.target === genie.active) return;
 if (event.target.classList.contains('genie-thumb')) {
 if (genie.active) {
 genie.next = event.target;
 genie.collapse();
 return;
 }
 genie.el.style.display = 'block';
 genie.expand( event.target );
 }
 if (event.target.classList.contains('genie')) {
 genie.collapse();
 }
 break;
 }
 },
 collapse: function() {
 var step_height = this.step_height,
 source = this.el,
 source_dim = getDim(source),
 target = source.thumbEl,
 target_dim = getDim(target),
 step_length = Math.ceil((target_dim.t - source_dim.t) / step_height),
 htm = '',
 bg_pos,
 top,
 i = 0;

source.className = 'genie';
 source.style.backgroundPosition = '0 -9999px';

target.classList.remove('genie-thumb');
 target.classList.add('paced-thumb');

for (; i<step_length; i++) {
 top = i * step_height;
 bg_pos = '0px '+ (((top + step_height) / source_dim.h) * 100 ) + '%';
 htm += '<div class="genie-step" style="left: 0px; top: '+ top +'px; width: '+ source_dim.w +
 'px; height: '+ (step_height + 1) +'px; background-position: '+ bg_pos + ';"></div>';
 }
 source.innerHTML = htm;
 source.classList.add('collapse');

setTimeout(function() {
 var steps = source.childNodes,
 radians_left = Math.floor((target_dim.l - source_dim.l) / 2),
 radians_width = Math.floor((target_dim.w - source_dim.w) / 2),
 rw_offset = radians_width - target_dim.w,
 increase = (Math.PI * 2) / (step_length * 2),
 counter = 4.7,
 i = 0,
 il = steps.length;
 for (; i<il; i++) {
 steps[i].style.left = Math.ceil((Math.sin(counter) * radians_left) + radians_left) +'px';
 steps[i].style.width = Math.ceil((Math.sin(counter) * radians_width) - rw_offset) +'px';
 counter += increase;
 }
 prefixedEvent(steps[il-1], 'transitionend', genie.doEvent);
 }, 100);
 },
 setupTarget: function(img, source_dim) {
 var target = this.el,
 margin = 100,
 dEl = document.documentElement,
 dBody = document.body,
 window_width = Math.max(dEl.clientWidth, dBody.scrollWidth, dEl.scrollWidth, dBody.offsetWidth, dEl.offsetWidth) - (margin * 2),
 window_height = source_dim.t - (margin * 2),
 gauge_src = img.getAttribute('data-src'),
 gauge_width = +img.getAttribute('data-width'),
 gauge_height = +img.getAttribute('data-height'),
 gauge_ratio,
 target_width,
 target_height;

gauge_ratio = gauge_width / gauge_height;
 target_width = window_width;
 target_height = window_width / gauge_ratio;

if (target_height > window_height) {
 target_height = window_height;
 target_width = window_height * gauge_ratio;
 }

target.style.display = 'block';
 target.style.width = target_width +'px';
 target.style.height = target_height +'px';
 target.style.top = (margin * 1.2) +'px';
 target.style.left = (margin + Math.floor((window_width - target_width) / 2)) +'px';
 target.style.backgroundPosition = '0px -9999px';
 target.style.backgroundImage = 'url('+ gauge_src +')';
 target.className = 'genie';
 target.thumbEl = img;

return getDim(target);
 },
 expand: function(source) {
 var step_height = this.step_height,
 target = this.el,
 source_dim = getDim(source),
 target_dim = this.setupTarget(source, source_dim),
 diffT = source_dim.t - target_dim.t,
 radians_left = Math.floor((source_dim.l - target_dim.l) / 2),
 radians_width = Math.floor((source_dim.w - target_dim.w) / 2),
 rw_offset = radians_width - source_dim.w,
 step_length = Math.ceil((source_dim.t - target_dim.t) / step_height),
 increase = (Math.PI * 2) / (step_length * 2),
 counter = 4.75,
 htm = '',
 i = 0,
 bgy;

for (; i<step_length; i++) {
 bgy = (diffT - (i * step_height));
 htm += '<div class="genie-step" style="top: '+ (i * step_height) +
 'px; height: '+ (step_height + 1) +'px; background-position: 0px '+ bgy +
 'px; left: '+ Math.ceil((Math.sin(counter) * radians_left) + radians_left) +
 'px; width: '+ Math.ceil((Math.sin(counter) * radians_width) - rw_offset) +'px;"></div>';
 counter += increase;
 }
 target.innerHTML = htm;

prefixedEvent(target.childNodes[step_length-1], 'TransitionEnd', genie.doEvent);

setTimeout(function() {
 var steps = target.childNodes,
 s_dim = source_dim,
 t_dim = target_dim,
 s_height = step_height,
 il = steps.length,
 i = 0,
 step_top,
 bgy,
 t,
 o;
 for (; i<il; i++) {
 t = i * s_height;
 o = t - t_dim.h;
 bgy = ((t - 2) / (t_dim.h - s_height)) * 100;
 steps[i].style.backgroundPosition = '0% '+ bgy + '%';
 }
 source.style.backgroundPosition = '0 -'+ (s_dim.h + 10) +'px';
 target.className += ' expand';
 }, 100);
 }
 };

window.onload = genie.init;

}());

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

(function() {

'use strict';

var $ = function(selector, context) {

context = context || document;

return [].slice.call( context.querySelectorAll(selector) );

getDim = function(el, attr, val) {

attr = attr || 'nodeName';

val = val || 'BODY';

var dim = {w: el.offsetWidth, h: el.offsetHeight, t: 0, l: 0, obj: el};

while (el && el[attr] != val && el.getAttribute(attr) != val) {

if (el == document.firstChild) return null;

dim.t += el.offsetTop - el.scrollTop;

dim.l += el.offsetLeft - el.scrollLeft;

el = el.offsetParent;

}

return dim;

prefixedEvent = function(el, type, callback) {

var pfx = 'webkit moz MS o '.split(' '),

p = 0,

pl = pfx.length;

for (; p<pl; p++) {

if (!pfx[p]) type = type.toLowerCase();

el.addEventListener(pfx[p] + type, callback, false);

}

genie = {

active: false,

step_height: window.chrome ? 3 : 5,

init: function() {

var thumbs = $('.dock img'),

gauge = new Image(),

il = thumbs.length,

i = 0;

for (; i<il; i++) {

gauge.src = thumbs[i].src;

thumbs[i].setAttribute('data-src', gauge.src );

thumbs[i].setAttribute('data-width', gauge.width );

thumbs[i].setAttribute('data-height', gauge.height );

thumbs[i].style.backgroundImage = 'url('+ gauge.src +')';

thumbs[i].style.height = thumbs[i].height +'px';

thumbs[i].src = 'http://vanguard-ide.com/genie/img/_.gif';

}

genie.el = document.body.appendChild( document.createElement('div') );

document.addEventListener('click', genie.doEvent, false);

LS({id: 'genie_text'});

doEvent: function(event) {

switch(event.type) {

case 'transitionend':

case 'webkitTransitionEnd':

var source = genie.el,

target = source.thumbEl,

source_dim = getDim(source),

target_dim = getDim(target),

diffT = target_dim.t + source_dim.t - 100,

step = source.childNodes,

step_height = step[0].offsetHeight,

il = step.length,

i = 0;

switch (event.propertyName) {

case 'left':

if (source.classList.contains('collapse')) {

for (; i<il; i++) {

step[i].style.backgroundPosition = '0px '+ (diffT + i - (i * step_height)) +'px';

}

target.style.backgroundPosition = '0px 0px';

source.classList.add('change-pace');

source.style.height = '0px';

}

break;

case 'background-position':

if (source.classList.contains('expand')) {

for (; i<il; i++) {

step[i].style.left = '0px';

step[i].style.width = source_dim.w +'px';

}

source.classList.add('fan');

} else {

target.classList.remove('paced-thumb');

target.classList.add('genie-thumb');

source.classList.remove('change-pace');

source.classList.remove('collapse');

source.innerHTML = '';

genie.active = false;

if (genie.next) {

genie.expand( genie.next );

genie.next = false;

}

break;

case 'width':

if (source.classList.contains('fan')) {

source.style.backgroundPosition = '0px 0px';

setTimeout(function() {

source.classList.remove('fan');

source.classList.remove('expand');

source.innerHTML = '';

}, 0);

genie.active = target;

}

break;

}

break;

case 'click':

if (event.target === genie.active) return;

if (event.target.classList.contains('genie-thumb')) {

if (genie.active) {

genie.next = event.target;

genie.collapse();

return;

}

genie.el.style.display = 'block';

genie.expand( event.target );

}

if (event.target.classList.contains('genie')) {

genie.collapse();

}

break;

}

collapse: function() {

var step_height = this.step_height,

source = this.el,

source_dim = getDim(source),

target = source.thumbEl,

target_dim = getDim(target),

step_length = Math.ceil((target_dim.t - source_dim.t) / step_height),

htm = '',

bg_pos,

top,

i = 0;

source.className = 'genie';

source.style.backgroundPosition = '0 -9999px';

target.classList.remove('genie-thumb');

target.classList.add('paced-thumb');

for (; i<step_length; i++) {

top = i * step_height;

bg_pos = '0px '+ (((top + step_height) / source_dim.h) * 100 ) + '%';

htm += '<div class="genie-step" style="left: 0px; top: '+ top +'px; width: '+ source_dim.w +

'px; height: '+ (step_height + 1) +'px; background-position: '+ bg_pos + ';"></div>';

}

source.innerHTML = htm;

source.classList.add('collapse');

setTimeout(function() {

var steps = source.childNodes,

radians_left = Math.floor((target_dim.l - source_dim.l) / 2),

radians_width = Math.floor((target_dim.w - source_dim.w) / 2),

rw_offset = radians_width - target_dim.w,

increase = (Math.PI * 2) / (step_length * 2),

counter = 4.7,

i = 0,

il = steps.length;

for (; i<il; i++) {

steps[i].style.left = Math.ceil((Math.sin(counter) * radians_left) + radians_left) +'px';

steps[i].style.width = Math.ceil((Math.sin(counter) * radians_width) - rw_offset) +'px';

counter += increase;

}

prefixedEvent(steps[il-1], 'transitionend', genie.doEvent);

}, 100);

setupTarget: function(img, source_dim) {

var target = this.el,

margin = 100,

dEl = document.documentElement,

dBody = document.body,

window_width = Math.max(dEl.clientWidth, dBody.scrollWidth, dEl.scrollWidth, dBody.offsetWidth, dEl.offsetWidth) - (margin * 2),

window_height = source_dim.t - (margin * 2),

gauge_src = img.getAttribute('data-src'),

gauge_width = +img.getAttribute('data-width'),

gauge_height = +img.getAttribute('data-height'),

gauge_ratio,

target_width,

target_height;

gauge_ratio = gauge_width / gauge_height;

target_width = window_width;

target_height = window_width / gauge_ratio;

if (target_height > window_height) {

target_height = window_height;

target_width = window_height * gauge_ratio;

}

target.style.display = 'block';

target.style.width = target_width +'px';

target.style.height = target_height +'px';

target.style.top = (margin * 1.2) +'px';

target.style.left = (margin + Math.floor((window_width - target_width) / 2)) +'px';

target.style.backgroundPosition = '0px -9999px';

target.style.backgroundImage = 'url('+ gauge_src +')';

target.className = 'genie';

target.thumbEl = img;

return getDim(target);

expand: function(source) {

var step_height = this.step_height,

target = this.el,

source_dim = getDim(source),

target_dim = this.setupTarget(source, source_dim),

diffT = source_dim.t - target_dim.t,

radians_left = Math.floor((source_dim.l - target_dim.l) / 2),

radians_width = Math.floor((source_dim.w - target_dim.w) / 2),

rw_offset = radians_width - source_dim.w,

step_length = Math.ceil((source_dim.t - target_dim.t) / step_height),

increase = (Math.PI * 2) / (step_length * 2),

counter = 4.75,

htm = '',

i = 0,

bgy;

for (; i<step_length; i++) {

bgy = (diffT - (i * step_height));

htm += '<div class="genie-step" style="top: '+ (i * step_height) +

'px; height: '+ (step_height + 1) +'px; background-position: 0px '+ bgy +

'px; left: '+ Math.ceil((Math.sin(counter) * radians_left) + radians_left) +

'px; width: '+ Math.ceil((Math.sin(counter) * radians_width) - rw_offset) +'px;"></div>';

counter += increase;

}

target.innerHTML = htm;

prefixedEvent(target.childNodes[step_length-1], 'TransitionEnd', genie.doEvent);

setTimeout(function() {

var steps = target.childNodes,

s_dim = source_dim,

t_dim = target_dim,

s_height = step_height,

il = steps.length,

i = 0,

step_top,

bgy,

for (; i<il; i++) {

t = i * s_height;

o = t - t_dim.h;

bgy = ((t - 2) / (t_dim.h - s_height)) * 100;

steps[i].style.backgroundPosition = '0% '+ bgy + '%';

}

source.style.backgroundPosition = '0 -'+ (s_dim.h + 10) +'px';

target.className += ' expand';

}, 100);

}

};

window.onload = genie.init;

}());

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Как создать галерею миниатюр в стиле OS X

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Последние новости

18 лучших бесплатных фотостоков этого года

Глитч-эффект для сайта при помощи CSS3

Анимированный эффект взаимодействия на GSAP

Бесплатные инструменты для анимаций сайта

Интерактивная анимация для сайта на three.js

Не пропусти