Нужен градиент в середине плагина книги Turnjs

В градиенте плагина turnjs по умолчанию всегда установлено значение true.

$ ('# magazine'). turn ({градиенты: правда, ускорение: правда});

Но градиент не появляется в книге. В середине книги должен быть градиент. Кроме того, отсутствуют некоторые классы из div страниц (страниц флипбук). нечетный и четный класс слева и справа на соответствующей странице также отсутствует. но эти классы действительно важны для стиля. И любой намек на то, чтобы сделать оборотную книгу Turnjs отзывчивой..

на самом деле я видел в форме кода плагина turn.js внутри какой-то класс градиента. и в опциях, как вы видите, я инициализирую оценки в плагине, но он не работает..

note: using third release of turnjs
Источник

2 ответа

Решение

Действительно, в общем отсутствует Div (примеры пересекаются с сетью). Однако для добавления градиента просто div с именем класса внутри div страницы, я собираюсь пройти всю используемую мной структуру, которая отлично работает:

<div class="zoom-viewport">
    <div class="container">
       <div id="flipbook">
          <div class="hard"><div class="gradient"></div></div> 
          <div class="normalPage"><div class="gradient"></div><img src="pages/00.jpg" /></div> 
       </div>
    </div>
</div>

и CSS для градиента будет:

#flipbook .even .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -o-linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: linear-gradient(left, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
}

#flipbook .odd .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: -o-linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    background-image: linear-gradient(right, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
}
Источник

Это то, что я использую:

#magazine .page:not(.hard).odd {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
    box-shadow: inset 0 0 5px #666;
    border-left: 1px solid #ccc;
}

#magazine .page:not(.hard).even {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
    box-shadow: inset 0 0 5px #666;
}
Источник
Другие вопросы по тегам