AngularJS would be great for the page controls, but he book-like styling is
pure CSS3.
Two CSS properties are the base of this: column-count and overflow: paged-x.
Create an HTML document with a lot of text and add the following in the CSS:
body{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
height: 100%;
overflow: paged-x;
overflow-y: hidden;
}
That will create columns like in a book, expanding the text through the X
axis, and will change the scrolling from the Y axis to the X axis.
Now, this will give you the base for a web page with the look and feel of
a book. Then you can use AngularJS to add controls or to catch keypress
events, and play with the overflow property in order to change the page
displayed.
El martes, 3 de marzo de 2015, 10:33:17 (UTC-6), TDC escribió:
>
> Hello
>
> Thanks for taking a look at this. I want to create an html file which,
> when viewed in a Browser, appears like a book. I have no Angular knowledge
> but have a suspicion that it may be a very good approach to this problem.
>
> Ideally I would like a single html page to define a multi-page document
> which could be considered a book. Each 'page' would have its content
> individually laid out and media, such as movies, illustrations,
> photographs, positioned. There would be scope to make the pages responsive
> to different devices viewing the book. Simple 'next page, previous page'
> navigation would be displayed.
>
> Page design is important to us and we want the user experience to be
> similar to leafing through a beautifully designed book rather than
> scrolling through a web page.
>
> It could be considered as an alternative to an Apple iBook without being
> locked into Apple's authoring tools.
>
> Any thoughts would be much appreciated.
>
> Chris
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
