вертикальный эффект

Тема в разделе "Верстка", создана пользователем artefakt777, 11 ноя 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Нужно реализовать, чтобы при прокрутке скролинга страницы, ракета двигалась вверх. Я так понимаю это параллакс эффект. Как его реализовать?
     

    Вложения:

  2. ZOLK

    ZOLK

    Регистр.:
    13 сен 2011
    Сообщения:
    189
    Симпатии:
    107
    Вместо h1 запили ракету, в id title запили фон. П.с это приблизительно, просто почистил от лишнего чужой код, с позиционированием думаю разберешься, если нет, пиши
    Код:
    <div id="title" class="slide header">
      <h1>Pure CSS Parallax</h1>
    </div>
    
    ===CSS===
    
    html {
      height: 100%;
      overflow: hidden;
    }
    
    body {
      margin:0;
      padding:0;
       perspective: 1px;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      font-family: Nunito;
    }
    
    h1 {
      font-size: 250%
    }
    
    .slide {
      position: relative;
      padding: 25vh 10%;
      min-height: 100vh;
      width: 100vw;
      box-sizing: border-box;
      box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
       transform-style: inherit;
    }
    
    .slide:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left:0;
      right:0;
    }
    
    .slide:nth-child(2n) .title {
      margin-left: 0;
      margin-right: auto;
    }
    
    .slide:nth-child(2n+1) .title {
      margin-left: auto;
      margin-right: 0;
    }
    
    .slide, .slide:before {
      background: 50% 50% / cover; 
    }
    
    .header {
      text-align: center;
      font-size: 175%;
      color: #fff;
      text-shadow: 0 2px 2px #000;
    }
    
    #title {
      background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
      background-attachment: fixed; 
    }
    
    
     
    artefakt777 нравится это.
Статус темы:
Закрыта.