Pageflip animation in Javascript/CSS without pages
$30-250 USD
Paid on delivery
There are a lot of pageflip implementations for magazines with several pages. However we have a different need. We don't have pages!
We have a main DIV with a child DIV. Example:
<div class="main">
<div class="child"></div>
</div>
The child container receives any content inside: images, svg content, html, videos etc... It's size also can be small or very large. We also have a button called "Next page" and a button called "Previous page" that reload the child div content in ajax.
What we need: That "reload" action must show a page flip transition from the previous content to the next content in both directions (right to left and left to right). Also, if you click and drag the mouse in the corners of the child div it must start a pageflip animation. As you don't have the "next content" loaded yet to show in the corner background you can choose a solid color or other texture.
We don't want several pages, otherwise we can use turnjs or any other pageflip component. The pageflip must work with only one "page". If you find any third partner component that solves that we'll pay you for that research.
Delivery: A HTML/CSS/JS sample with next and previous navigation to test.
Steps to validation:
a) Create a main div with width 100%, height 100%
b) Create a child div with width 400px and height 600px - Insert an image in the child html.
c) Create a dynamic content with width 400px and height 600px - Insert HTML with a video tag inside - Hide this content in any other div.
d) Create a second dynamic content with width 100% and height 300px - Insert some elements as html and images - Hide this content in any other div.
e) Create a button called Next Page and a button Called Previous page
f) Call your code to navigate from page 1 to page 3 using pageflip effect with ajax loading of the content inside the main child only (you cannot create three children).
g) Pay attention to the size of the child div content that must resize and keep the pageflip animation.
Project ID: #8067594
About the project
Awarded to:
As far as I understand we should have something like that - [login to view URL] Design and flipping are disscusing
8 freelancers are bidding on average $178 for this job
Hi, went through your requirement. Ready to help you with it. Hoping to hear back from you! Many thanks!
hello, i am red hat certified engineer and i am more then 4 year experience in this field i easily can do this have a look to my reviews ready to start now thanks
Hello ~ I can do it for You. Please give me the job! I'm willing to start the work and get finished on time.
