"StoryCode"
Bootstrap 3.0.0 Snippet by BlackFoxgamingstudio

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="bg">
<center><div class="openbook">
<img class="bookbg" src="">
<div class="book">
<br>
<img src="https://cdn1.edgedatg.com/aws/v2/abc/OnceUponaTimeinWonderland/showimages/8fb90328a66a06d06bac379ebee66901/640x180-Q100_8fb90328a66a06d06bac379ebee66901.png" width="170" height="110">
<br><br>
<TextArea rows="7" cols="22">Wonderland...if all the world is a stage, your mind is a forst of wonder. A place of pine an oak. A world of Fanstasy and punder...lets explore the foarst of your mind. Follow me.. </TextArea>
<section class="demos">
<!-- Using divs for the demo, for formatting... you can use images if you want! -->
<div class="demo-image first" data-image="http://tholman.com/intense-images/img/h1_small.jpg" data-title="Beautiful fields" data-caption="With lots of wheaty puffs. Love those puffs."></div>
<div class="demo-image second" data-image="http://tholman.com/intense-images/img/v1_small.jpg" data-title="Fantastic cliffs" data-caption="Longing for exploration. Explore me!"></div>
</section>
<img class="cover"
src="https://thomaskinkade.com/wp-content/uploads/2016/03/alicew.jpg" width="640" height="480">
<div class="spine"></div>
</div>
</div></center></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.bg {
background-image: url("https://i.stack.imgur.com/s4YBx.jpg");
background-size: 100.6%;
}
.openbook {
;
}
.book img {
background-color:white;
}
.bookWrap {
margin:25px auto;
height:546px;
width:430px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}
.book {
background-image: url("https://catabbottbadmp.files.wordpress.com/2012/04/book2.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 100%;
height:346px;
width:230px;
top:0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
// Pause just a moment
setTimeout(function() {
var $book = $('.book');
// Apply the intro classes that will
// appear to turn the book,
// revealing its spine
$book.addClass('bookIntro');
// pause another moment, then turn back
setTimeout(function() {
$book.removeClass('bookIntro');
}, 2000);
}, 1000);
});
$('button').each(function() {
var maxWidth = 600; // Max width for the image
var maxHeight = 600; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System

Questions / Comments: