CODEWITHSUNDEEP
jqueryhtmlcssturnjs
danish farhaj
danish farhaj

Reputation: 1354

Need gradient in middle of the flip book of turnjs plugin

In turnjs plugin gradients is always set to true by default.

$('#magazine').turn({gradients: true, acceleration: true});

But gradient is not appearing in flip book. There should be a gradient in middle of book. And further there are some classes from div of pages (pages of flip book) are missing too. odd and even class to left and right side of the page respective is also missing. but those classes are really important for styling. And any hint for making flip book of turnjs responsive..

actually i saw in turn.js plugin code form inside there is some gradient class is being made. and in options as you see am initializing the gradeints in plugin but it is not working..

note: using third release of turnjs

Upvotes: 1

Views: 1977

Answers (2)

oriadam
oriadam

Reputation: 8569

This is what I'm using:

#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;
}

Upvotes: 1

Mohamed Mo Kawsara
Mohamed Mo Kawsara

Reputation: 4688

Indeed there is missing Divs in general ( examples cross the web), However, for adding the gradient just div with class named that inside the div of the page, I'm gonna past the whole structure that I'm using which is working perfectly:

<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>

and the css for gradient will be :

#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%);
}

Upvotes: 1

Related Questions