Обрезка изображения равномерно сверху вниз - PullRequest
Новая
       4

Обрезка изображения равномерно сверху вниз

1 голос
/ 23 ноября 2011

Я пытаюсь сделать небольшое анимированное вступление к веб-сайту.По сути, я хочу, чтобы централизованное изображение было одинаково обрезано сверху и снизу, а затем переместилось вверх в верхнюю часть экрана.

Пока у меня есть следующее: http://dk8.co/animation.html

Это используетследующий CSS: 

      #pic {
        position:absolute;
        top:0%;
        width: 100%;
        height: 200px;
        left: 0px;
        background:url(web/images/AM-title.jpg) no-repeat;
         -moz-background-size:100% auto;
         -webkit-background-size:100% auto;
         -webkit-background-position:0% auto;
         background-size:100% auto;
         -o-background-size: 100% auto;
        -webkit-animation-name: move;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in;
    }




    @-webkit-keyframes move {
    0% {
        top: 50%;
        height: 400px;
    }

        50% {
        top: 50%;
        height: 300px;
    }
}

Однако проблема в том, что «обрезка» происходит только снизу вверх, а не сверху и снизу.

Есть ли способ достижения равногоэффект обрезки сверху и снизу?

Ответы [ 2 ]

2 голосов
/ 23 ноября 2011

Очень простое решение - присвоить 50% свойству background-position или просто добавить 50% к сокращению, которое вы имеете выше:

background: url(web/images/AM-title.jpg) 50% 50% no-repeat;

Вот рабочий пример: http://jsfiddle.net/sl1dr/L3sQW/

0 голосов
/ 23 ноября 2011

Я написал это пять лет назад для Prototype.js.Вы можете черпать код и посмотреть, как он работает.

По сути, вы перемещаете положение и положение фона элемента одновременно.

...