Creating a flipboard using three.js

Question

I am new to three.js and started work on it just a week ago. This is really a good library but as i am new to this my problem is that I want to make a fliboard using this library as used by the http://www.creaktif.com/. Just give me some simple idea to how to do that kind of thing with three.js.

Did you tried something already? Post your current code to get help — kosmos, Jun 25 '14 at 11:48
Hints: Orthographic camera, planes with Lambert materials with texture maps, raycasting. I wouldn't use three.js for this because it is simple and can be achieved with CSS. I would use CSS 3D transforms. — Alex Mund, Jul 02 '14 at 09:08
@Shani No. Learn about all the CSS properties and apply some yourself. It's simple stuff. — Alex Mund, Jul 04 '14 at 21:45

score 0 · Answer 1 · answered Jul 01 '14 at 08:03

Try something like this

 $(document).ready(function() { 

        $('.box').click(function(e){

            if( $('div').hasClass('overlay')==false ){

            //event.preventDefault();
            var $box = $(this);

            $('<div class="overlay"></div>').prependTo($box);

            var $overlay = $('.overlay');

            $overlay.css( {
                           'position'       : 'absolute',
                           'background-color'   : 'white',
                           'width'              : $box.outerWidth(true),
                           'height'     : $box.outerHeight(true),
                           'left'       : $box.offset().left,
                           'top'        : $box.offset().top,
                           'z-index'        : 99999999
            });                                       
            //$($placeholder).insertAfter('.box');  

            $overlay.animate({
                    width: $(document).width(),
                    height: $(document).height(),
                    left: '0px',
                    top: '0px'
                }, 500, function() {
                    //reset the overlay
                    $overlay.css({'width': ''});
                    $overlay.css({'height': '1500px'});
                    //ajax    
                    $.ajax({  
                        type: "POST",  
                        url: "../ajax/get_event.php",  
                        data: "firstname=clint&lastname=eastwood",  
                        success: function(resp){  
                            // we have the response  
                            $overlay.html(resp);
                            $('.window').fadeIn(200);
                        },  
                        error: function(e){  
                            alert('Error: ' + e);  
                        }  
                    });
            });

            }else{
                //click only on overlay to exit
                var $target = $(e.target);    
                if ( $target.is('.overlay') ) {
                   $('.overlay').remove();
                }
            }  

        });//end box click

    });//end of jquery
    </script>

Thanks for your reply, I want to do the scroll section that is when I scroll down the upper sections get fold and hide and the new sections from bottom become in the viewport. — Shani, Jul 02 '14 at 04:44

Creating a flipboard using three.js

1 Answers1