4

stellar.jsというプラグインを見つけて使用しようとしています。主にウェブサイトの視差効果を作成するためのものですが、私はこの効果を求めていません - 私はそれが提供する他の効果を求めています:

Stellar.js の最も強力な機能は、要素を整列させる方法です。

オフセットの親が画面の端に達すると、すべての要素が元の位置に戻ります。独自のオプションのオフセットをプラスまたはマイナスします。

オフセット配置の例: http://markdalgleish.com/projects/stellar.js/#show-offsets . div をスクロールすると、ブラウザの端にスナップ/再配置されます。これを縦型のウェブサイトで機能させようとしています。

Javascript と jQuery の初心者の知識のため、あまり運がありません。水平線を垂直線に交換するだけの場合だと思いました。

このプラグインを以前に使用したり、同様のシナリオで使用したり、ヒントを得た人はいますか?

すべてのコードを含む jsFiddle: http://jsfiddle.net/2SH2T/

そしてJavascriptコード:

var STELLARJS = {
    init: function() {
        var self = this;
        $(function(){
            self.$sections = $('div.section').each(function(index){
                $(this).data('sectionIndex', index);
            });

            self.highlightSyntax();
            self.handleEvents();

            self.debugOffsets.init();
            self.debugOffsetParents.init();

            self.initParallax();
        });
    },
    initParallax: function() {
        var isHomePage = $('body').hasClass('home'),
            $main = $('div.main');

        if (isHomePage) {
            $main.height($main.height() + $(window).height() - 1000);
        }

        if ($.browser.msie) {
            $('body').removeAttr('data-stellar-background-ratio').append('<div class="ie-bg" />');
        }

        $(window).stellar({
            horizontalOffset: !isHomePage,
            verticalScrolling: 40
        });
    },
    highlightSyntax: function() {
        $('pre').addClass('prettyprint');
        if (window.prettyPrint !== undefined) prettyPrint();
    },
    handleEvents: function() {
        var self = this,
            //Debounce function from Underscore.js
            debounce = function(func, wait) {
                var timeout;
                return function() {
                    var context = this, args = arguments;
                    var later = function() {
                        timeout = null;
                        func.apply(context, args);
                    };
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                }
            },
            handleScroll = function() {
                var scrollTop = $(window).scrollTop(),
                    sectionIndex = Math.round((scrollTop - 40) / self.$sections.first().outerHeight()),
                    $activeSection = self.$sections.eq(sectionIndex);

                if ($activeSection.length === 0) {
                    $activeSection = self.$sections.last();
                }

                if ($activeSection.length === 0) return;

                $(window).unbind('scroll.stellarsite');

                if (scrollLeft === 0) {
                    $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                } else {
                    $('html,body').animate({
                        scrollLeft: $activeSection.offset().left - 40
                    }, 600, 'easeInOutExpo', function() {
                        setTimeout(function(){
                            $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                        }, 10);
                    });
                }

                $(window).bind('mousewheel', function(){
                    $('html,body').stop(true, true);
                });

                $(document).bind('keydown', function(e){
                    var key = e.which;

                    if (key === 37 || key === 39) {
                        $('html,body').stop(true, true);
                    }
                });
            };

        if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
            $(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
        }
    },
    debugOffsets: {
        init: function() {
            this.$debug = $('#debugOffsets');

            if (window.location.href.indexOf('#show-offsets') > -1) {
                this.show();
            }
        },
        show: function() {
            this.$debug.fadeIn();
            $('body').addClass('debugOffsets');
            $('h2').append('<div class="debug-h2-label">Offset Parent (All parallax elements align when this meets the offsets)</div>');
        },
        hide: function() {
            this.debug.fadeOut;
            $('body').removeClass('debugOffsets');
        }
    },
    debugOffsetParents: {
        init: function() {
            this.$debug = $('#debugOffsets');

            if (window.location.href.indexOf('#show-offset-parents-default') > -1) {
                this.removeOffsetParents();
            }

            if (window.location.href.indexOf('#show-offset-parents') > -1) {
                this.show();
            }            
        },
        show: function() {
            this.$debug.fadeIn();

            $('body').addClass('debugOffsetParents');
            $('h2').append('<div class="debug-h2-label">New Offset Parent (All parallax elements align when this meets the offsets)</div>');
            $('h2').each(function(){
                $(this).find('div.constellation:last').append('<div class="debug-constellation-label">Default Offset Parents</div>');
            });
            $('body').addClass('debug');
        },
        removeOffsetParents: function() {
            $('body').addClass('debugOffsetParentsDefault');
            $('h2[data-stellar-offset-parent]').removeAttr('data-stellar-offset-parent');
        }
    }
};

STELLARJS.init();
4

3 に答える 3

2

しばらく良い解決策を探した後、この jQuery プラグインの Snappoint を見つけました。

https://github.com/robspangler/jquery-snappoint

于 2013-03-23T08:39:11.893 に答える
1

元のコードを変更して、stellarjs.comのように正確な効果を考え出しました。代わりにそれは垂直です:)

見てください:http://jsfiddle.net/E4uVD/38/

于 2012-09-03T21:00:09.373 に答える
1

以下のコードであなたが説明していることを達成したと思います。ここに JsFiddle があります: http://jsfiddle.net/E4uVD/7/

JQuery:

$(function(){
    var _top = $(window).scrollTop();
    var individualDivHeight = 300;
    $(window).mousedown(function() {
        $('html, body').stop();
    });
    $(window).mouseup(function(){
        var _cur_top = $(window).scrollTop();
        var totalHeight = $('#container').height();
        var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

        $('html, body').stop().animate({scrollTop: posToScroll}, 2000);
    });
});

HTML:

<div id="container">
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
</div>

CSS:

body {
    height:2000px;
}
.box
{
    color: #fff;
    height: 300px;
    width: 300px;
    border: 1px solid white;
}
#container {
    height:3000px;
    width:300px;
    background-color:blue;
}
于 2012-06-18T16:54:47.507 に答える