Нужна помощь.Плавное появление фоновой картинки

[cassel78]

Здравствуйте, очень нравится плавное появление фона на сайте http://www.marcquinn.com/
Хочу получить такой же эффект, плавного появления , при этом что бы фон был отцентрован и так же масштабировался как и на этом сайте ( с огроничением минимального размера ).

Пока получился только эфект отцентровки фона.Без масштабирования и плавного появления.
1.Возможно загвоздка скрывается в этом файле
swfobject.embedSWF("http://www.marcquinn...and=1661309830"
2.И в этом
www.marcquinn.com/expressInstall.swf

Вопрос 1 Как создать файл SWF, какая программа для этого нужна? Отвечает ли SWF за масштабирование картинки?

Вопрос 2 После создания SWF, досточно ли разместить файл expressInstall.swf в папке сайта, или нужны какие то дополнительные действия и файлы?

Сам скрипт:


<script type="text/javascript">
function noflashintro(e) {
if(e.success != true){
$("#image").append("<img src='13484.jpg' width='900' />");
}
}
var flashvars = { images : "13484.jpg" };
var params = { scale: "noScale", wmode: "transparent", allowfullscreen: "true", allowscriptaccess: "always"};
var attributes = {};
swfobject.embedSWF("http://www.marcquinn...and=1661309830", "image", "100%", "100%", "9.0.0","http://www.marcquinn.com/expressInstall.swf, flashvars, params, attributes, noflashintro);
</script>

 

[Indev29]

А что, простой эффект Fade JQuery уже не катит?

<script type=text/javascript>
$(document).ready(function(){
$('#element_id').fadeIn(3000); //3000 - задержка появления, чем она ниже, тем быстрее появится элемент;
});
</script>

Да и эффект на сайте какой-то кривоватый...

 

[cassel78]

Спасибо, но что то пока не получается. Правильно ли все делаю?

Это

<script type="text/javascript">
function noflashintro(e) {
if(e.success != true){
$("#image").append("<img src='stellaj9.jpg' width='900' />");
}
}
var flashvars = { images : "stellaj9.jpg" };
var params = { scale: "noScale", wmode: "transparent", allowfullscreen: "true", allowscriptaccess: "always"};
var attributes = {};
swfobject.embedSWF("cover.swf", "image", "100%", "100%", "9.0.0","expressInstall.swf", flashvars, params, attributes, noflashintro);
</script>

Меняю на это

<script type=text/javascript>
$(document).ready(function(){
$("#image").append("<img src='stellaj9.jpg' width='900' />");.fadeIn(3000); //3000 - задержка появления, чем она ниже, тем быстрее появится элемент;
});
</script>

с заменой $('#element_id') на $("#image").append("<img src='stellaj9.jpg' width='900' />")

 

[Indev29]

$("#image").append("<img src='stellaj9.jpg' width='900' />");.fadeIn(3000);

Замените как-то так:

$("#image").append("<img src='stellaj9.jpg' width='900' />");
$("#image").fadeIn(3000);
//Скрыть таким же образом можно так: $("#image").fadeOut(3000);

Перед этим прописав стили для #image:

<style>
#image
{
display: none; //Вы ведь не хотели отобразить уже видимый объект?;
}
</style>

 

[cassel78]

Появление фона получилось очень клевое!!! Большое Спасибо!!!
Но пока не получается сделать фон отцентрованным и с изменением масштаба взависимости от ширины окна. Но с ограничением по ширине картинки, как в оригинале.
Спасибо!

Вот что я вставил в стиль

<style>
#image
{
display: none;
min-width: 800px; /* Максимальная ширина страницы в пикселах */
width: 100%; /* Ширина слоя с фоном */
height: 100%; /* Высота слоя с фоном */
position: fixed; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края окна */
top: 0; /* Положение от верхнего края */
right: 0; /* положение от правого края*/
}
</style>
<script type=text/javascript>
$(document).ready(function(){
$("#image").append("<img src='stellaj9.jpg' width='900' />");
$("#image").fadeIn(2000);
//2000 -
});
</script>

 

[Indev29]

Да, все в порядке в скрипте. Всегда пожалуйста!

 

[CamaroSS]

min-width: 800px; /* Максимальная ширина страницы в пикселах */

???

 

[Indev29]

Да, кстати) Min-width

 

[cassel78]

Да, кстати) Min-width

Спасибо, следующим этапом буду биться, что бы картинка центрировалась при с ужении окна, но не сокращалась менее 800 px. Пока что то не очень разобрался. Как это сделать?

 

[cassel78]

CПасибо! вот что у меня получилось http://www.arsvl.com/index.html
Но хочу довести до ума! Подскажите пожалуйста, как сделать так что бы фоновые картинки в слайд шоу масштабировались относительно открытого окна браузера (уменьшались до определенного размера, например 800 px) и при этом изображение должно быть отцентрованно, что бы не появлялись белые поля за границами картинки.

Пример нужной компоновки фона http://likbezz.ru/_content/_ext/img-bg/v03-html-bg-size-cover.html


мой css

<style>

#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}

#page-wrap { position: relative; z-index: 2; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
</style>

что нужно поменять? Спасибо!