Форум Сайтостроение Веб-строительство

Эффект zoom-а на background - как сделать?

M2
На сайте с 11.01.2011
Offline
341
mark2011
1068

В общем кратко опишу:

Зайдите на http://nndevice.ru/, там ткните по ссылке "Главная". Если у вас моник около 17 дюймов, то будет такое ощущение, что фон "уедет" направо. На самом деле, на широкоформатных мониторах, он "выезжает" за пределы коричневой рамки, а такого быть не должно. Т.е. эффект тот же самый, что и при разрешении 1280*1024, но картинка в любом случае не должна покидать пределов рамки.

Что сделал в CSS:

Код на фон: 


#bg

{

	   background-image: url('../images/bg.jpg');

	   width: 1281px;

	   height: 701px;

	   position:relative;

           margin-left:-640px;

           left:50%;

	   overflow: hidden;

}

Код на коричневую рамку (только сейчас подправил и выложил, возможно уже всё в порядке). 


.main

{

	overflow: hidden;

}

Про JS я не говорю, потому что эффект уже прицеплен, всё дело в CSS, точно... вообще реально такое сделать?

mark2011 добавил 27.01.2011 в 15:08

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

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
C
На сайте с 04.02.2005
Offline
291
Chukcha
#1

margin-left:-640px;

не смущает?

M2
На сайте с 11.01.2011
Offline
341
mark2011
#2

Не-а, ибо ширина картинки 1280, сначала на 640 влево, потом на 50% обратно, получится по центру. суть-то не в этом... я не очень понимаю, как достичь самого зума, как сделать так, чтобы картинка (теоретически, не изменяя размеров) приблизилась.

Изменять размеры, по идее,можно, но только при условии, что фоновое изображение не будет выезжать за пределы коричневой рамки. Т.е. к коричневой рамке как бы вот это: 


overflow: hidden;

Но применение такого не даёт ожидаемого эффекта....

Google убрал кнопку для Джон Мюллер поделился советами Арзамас коснулся поиска по
C
На сайте с 04.02.2005
Offline
291
Chukcha
#3 


$(document).ready(function() {

   $('#index_href').bind('click', function()

      { 

              $('#bg').animate( {height: 1000, top: 0, left: 0 }, 900, function()  { });

      });

 });

уберите left

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий