CSS несколько фонов, прокрутка на разных скоростях - PullRequest
Новая
       0

CSS несколько фонов, прокрутка на разных скоростях

8 голосов
/ 17 марта 2012

Я наткнулся на этот сайт сегодня, и я был озадачен: http://www.actionbutton.net/

Использует ли он какую-то известную технику для своих фонов, которые прокручиваются с разной скоростью и перекрывают друг друга.Я посмотрел на источник, но довольно смущен.Кто-нибудь знает, как называется техника и как ее изучать?

Ответы [ 3 ]

11 голосов
/ 27 августа 2013

Вот пример приближения эффекта параллакса, который не использует JS (таким образом фоны прокручиваются с постоянной скоростью) Пример jfiddle: http://jsfiddle.net/MFC9B/2/

Ключ в том, что есть двухслойные вложенные div, внешний для фона, внутренний для содержимого: 

.section {        
    position:relative;
    z-index:1;
    height:500px;
    width:100%;
    background-attachment:fixed;    /* this keeps the background in place */
    background-size:100% 100%;
    background-repeat:no-repeat;
}
.content {
    position:relative;
    z-index:2;
    background-color:#fff;
    border:2px solid #666;    
    height:50%;    /* this height difference allows the bg to show through */    
}
5 голосов
/ 17 марта 2012

Это вызов parallax для этого достаточно plugin, например http://www.ianlunn.co.uk/plugins/jquery-parallax/

3 голосов
/ 18 апреля 2012

Вы также можете рассмотреть что-то подобное (не требуется JavaScript): 

@keyframes backgroundscroller {
  from {
    background-position: 0% 0%;    
  }
  to {
    background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;    
  }
}

#yourdivid {
  background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png');

  animation-name: backgroundscroller;
  animation-duration: 300s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;  
}

Очевидно, вы должны знать, что это будет работать только с браузерами, которые поддерживают CSS3 , и вы такжехочу рассмотреть возможность включения очень полезного javascript, который заботится о добавлении префиксов, где и при необходимости: http://leaverou.github.com/prefixfree/

...