Масштабирование фонового фото после того, как страница готова

Question

Масштабирование фонового фото после того, как страница готова

0

Я использовал эту технику CSS, чтобы правильно растянуть фотографию в качестве фона - независимо от того, какой размер экрана:

html { 
background: url(/images/back.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Но теперь я хочу вылить какое-то движение в свой проект. Я видел, что некоторые сайты используют переход CSS для медленного увеличения фона после загрузки документа. К сожалению, поскольку я заметил, что это сделано с элементом img, и я хочу придерживаться своей недавней техники. Может быть, кто-то сделал что-то подобное или имел какие-то идеи? Благодарю!

Saulius s 14 апр. 2014, в 22:14

Источник

1

Вы пытались использовать что-то вроде (-moz, -web) -transition: background-size 2s easy-in?
axel.michel 14 апр. 2014, в 19:50
0

AFAIK вы можете переходить только между числовыми значениями, поэтому начальный background-size: 100% необходимо вместо cover .
Blazemonger 14 апр. 2014, в 20:09

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Вы пытались использовать что-то вроде (-moz, -web) -transition: background-size 2s easy-in?
AFAIK вы можете переходить только между числовыми значениями, поэтому начальный background-size: 100% необходимо вместо cover .

Blazemonger · Answer 1 · 2014-04-14T17-28-00.000Z

Насколько мне известно, вы можете использовать только переходы CSS между численными значениями, поэтому вместо cover требуется исходный background-size: 100%.

html {
    background-image: url(/your/background/image/here.jpg);
    background-size: 100%; /* must be a numerical value to transition */
    background-repeat:no-repeat;
    background-position: 50% 50%;
    transition: background-size 2s;
}
.trans {
    background-size: 120%;
}

Затем динамически добавьте класс trans используя JavaScript, чтобы сделать волшебство.

http://jsfiddle.net/mblase75/Xd5hz/

sheriffderek · Answer 2 · 2014-04-14T17-27-00.000Z

Вы должны сделать скрипку следующим образом: jsFiddle

Я не уверен, как вы можете получить cover чтобы немного побольше, но вот основные сведения о том, как вы можете что-то сделать, когда окно загружается. Какие трюки, которые я использовал бы, будут зависеть от того, насколько вы реагируете, и каково изображение.

CSS

html { 
    background: url(http://placehold.it/1800x1800) no-repeat center center fixed; 
    background-size: 100%;
    transition: all .3s ease-in-out;
}

JS

// When the page is loaded... 
$(window).load( function() {
    // alert('the whole page is loaded');    
    // do stuff here...
});

// on click for example... (page loads too fast... )
$('button').on('click', function() {
    $('html').animate({
        'background-size' : '120%'    
    });   
});

Как я никогда раньше не видел placehold.it ? Очень полезно.