Блог

Главная - Вопросы по программированию - Создание flipboard с использованием three.js

Создание flipboard с использованием three.js

#javascript #jquery #three.js #flipboard

#javascript #jquery #three.js #flipboard

Вопрос:

Я новичок в three.js и начал работать над этим всего неделю назад. Это действительно хорошая библиотека, но поскольку я новичок в этом, моя проблема в том, что я хочу создать fliboard, используя эту библиотеку, используемую http://www.creaktif.com /. Просто дайте мне какую-нибудь простую идею о том, как делать подобные вещи с three.js .

Комментарии:

1. Вы уже что-то пробовали? Опубликуйте свой текущий код, чтобы получить справку

2. Подсказки: ортографическая камера, плоскости с материалами Ламберта с текстурными картами, raycasting. Я бы не стал использовать three.js для этого, потому что это просто и может быть достигнуто с помощью CSS. Я бы использовал 3D-преобразования CSS.

3. Нет. Боюсь, я занят @Shani

4. @Shani Нет. Узнайте обо всех свойствах CSS и примените некоторые самостоятельно. Это простые вещи.

Ответ №1:

Попробуйте что-то вроде этого

  $(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=clintamp;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>

Комментарии:

1. Спасибо за ваш ответ, я хочу сделать раздел прокрутки, то есть при прокрутке вниз верхние разделы сворачиваются и скрываются, а новые разделы снизу отображаются в окне просмотра.