/ Сайтостроение / Дизайн / Zoom-эффект увеличения изображения при загрузке страницы

Zoom-эффект увеличения изображения при загрузке страницы

28.08.2015

935

Конструкция в верстке. Фон у diva в данном примере генерируется из миниатюры. Можно div заменить на изображение.

<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url(<?=$url?>);"></div></div>

Пример полный

<?php if( has_post_thumbnail() ) : ?>

<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'has_post_thumbnail' );
$url = $thumb['0'];
?>
<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url(<?=$url?>);"></div></div>

<?php endif; ?>

Скрипт в HEADER

<script>

window.onload = function() {
if($("div").is("#post-div-pic")) {

document.getElementById('post-div-pic').className += 'loaded'

}
};

</script>

CSS стили

#post-div-pic {
background-size: cover;
background-position: center;
height: 300px;
/*background-attachment: fixed;*/ /*если задний фон однородный*/
transform: scale(1.5);
transition: transform 3s;
}

.loaded {
transform: scale(1) !important;
}

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Отделить категории от товаров
Рекомендации для васОтделить категории от товаровOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.