как сделать так, чтобы тень оставалась по краям страниц моего флипбука с помощью turn.js - PullRequest
Новая
       25

как сделать так, чтобы тень оставалась по краям страниц моего флипбука с помощью turn.js

0 голосов
/ 01 ноября 2019 
<!doctype html>
<html lang="en">
<head>
    <meta charset="=UTF-8">
    <title> Caitlin's Christmas gift</title>
    <style type="text/css">
        body{
            overflow: hidden;
            background-image: url(pagebackground.jpg);
            -webkit-background-size: cover;
            background-size: cover;
            background-position: center center;
        }
        #album{
            margin: 5% auto;
            width: 750px;
            height: 500px;

        }
        #album .shadow,
        #album.shadow{
            -webkit-box-shadow: 0 4px 10px #666;
            -moz-box-shadow: 0 4px 10px #666;
            -ms-box-shadow: 0 4px 10px #666;
            -o-box-shadow: 0 4px 10px #666;
            box-shadow: 0 4px 10px #666;
        }

    </style>
</head>
<body>
    <div id="album">
        <div  class="shadow"style="background-image: url(cover.jpg);"></div>
        <div  class="shadow"style="background-image: url(1.jpg);"></div>
        <div  class="shadow"style="background-image: url(2.jpg);"></div>
        <div  class="shadow"style="background-image: url(3.jpg);"></div>
        <div  class="shadow"style="background-image: url(4.jpg);"></div>
        <div  class="shadow"style="background-image: url(5.jpg);"></div>
        <div  class="shadow"style="background-image: url(back.jpg);"></div>
    </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="turn.js"></script>
<script>$('#album').turn({display: 'double', gradients: true, acceleration: true});</script>



</body>
</html>

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

...