タグ別アーカイブ: stop

スクロールの挙動調整

今回は scroll の挙動調整です。
具体的には、通常 scroll した場合に縦方向 scroll する処理を
横向きに scroll するように変更してしまおうと云うものです。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="./jquery.mousewheel.min_.js"></script>


        <script type="text/javascript"><!--

            $(function(){

                var scrollTop = 0;
                var baseSpeed = 1000;
                var tempSpeed = 0;
                var userAgent = window.navigator.userAgent.toLowerCase();
                $('html').mousewheel(function(event, move) {

                    // scroll type
                    if (move > 0) {
                        tempSpeed = (baseSpeed * -1);
                    } else if (move < 0) {
                        tempSpeed =  baseSpeed;
                    }

                    // userAgent check (chrome)
                    if(userAgent.indexOf('chrome') != -1){
                        scrollLeft = $('body').scrollLeft() + tempSpeed;
                    } else {
                        scrollLeft = $('html').scrollLeft() + tempSpeed;
                    }

                    // scroll set
                    $('html,body').stop().animate({scrollLeft: scrollLeft}, 'normal');
                    // scroll out
                    return false;

                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin     : 10px;
            }

            #main_area div {
                float            : left;
            }

            #scroll_area {
                width            : 4500px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="scroll_area">
                <div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg12.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg13.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg14.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg15.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg17.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg18.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg19.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg20.jpg"></div>
            </div>

        </div>
    </body>
</html>

sample

sample を開き scroll してみると横に scroll して動くかと思います。
 ※ 内容自体は以前に行った内容とあまり変わりません(笑)

最近は、今までのような page が縦に scroll するだけでは無い site が増えています。
通常とは異なり、scroll をこちらで制御できるため、画面内容によって scroll の
移動距離を変えるなど、ちょっと変わった印象を持たせることも可能かと思います。

scroll bar を非表示にすることで scroll による紙芝居のような表示をすることが
可能になるのかと思います。
これでちょっと変わった印象を持たせられるのでは無いでしょうか。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

アニメーションの同時実行

今回も備忘録的な内容です。
当blog でも animate の同時実行は何度か利用しているのかとも思います。
ただ、今回は同時実行をする際に、終了の時間を変更して欲しいとのことでした。
とりあえずやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                $('#exeMove1').click( function(){
                    $('#target_div').stop().css({top: 0, left: 0})
                    .animate(
                        {
                            top      : 300 + 'px',
                            left     : 300 + 'px'
                        },
                        3000,
                        'linear'
                    )
                });
                
                $('#exeMove2').click( function(){
                    $('#target_div').stop().css({top: 0, left: 0})
                    .animate(
                        {
                            top      : 300 + 'px'
                        },
                        {
                            duration : 3000,
                            easing   : 'linear',
                            queue    : false
                        }
                    )
                    .animate(
                        {
                            left     : 300 + 'px'
                        },
                        {
                            duration : 1500,
                            easing   : 'linear',
                            complete : function(){ $('#target_div').animate({left : 0 + 'px'}, {duration: 1500, easing: 'linear'}) },
                            queue    : false
                        }
                    );
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

            div#disp_area {
                position         : relative;
            }

            div#target_div {
                position         : absolute;
                width            : 50px;
                height           : 50px;
                background-color : #ffff00;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="button_area">
                <button id="exeMove1">click me! 1</button>
                <button id="exeMove2">click me! 2</button>
            </div>

            <div id="disp_area">
                <div id="target_div"></div>
            </div>

        </div>
    </body>
</html>

sample

sample 「click me! 1」を click すると黄色の div が右下に移動します。
まぁ、上に動く動きと、右に動く動作を同時に行っている形ですね。
但し、この場合それぞれの動きに対して時間を設定することができません。

sample 「click me! 2」を click すると黄色の div が右下に移動し、
その後、左下に移動します。
今回は下に動きの半分の時間で右へ行く動作を指定し、残りの時間で
左に移動させています。

上下の動きと左右の動きで実行時間を変えることができました。
この方法だと同時に違う object に動きをつけることも出来ます。

取り急ぎ今までは一つの object を動かすことが多かったため
余り気にしていなかったのですが、今後は色々な動作をさせる
ことが出来ますね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

立体的なボタン表示の切り替え

今回はヘッダーメニューで使えるかなという内容をやってみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                var speed = 400;
                function exeImageRotate(angle) {
                    $('#move_area').stop().css({'fontsize':0}).animate(
                        { fontsize : 1 },
                        { duration : speed,
                            step:function(step){
                                $(this).css({transform:'rotateX(' + (step * angle) + 'deg)'});
                            }
                        }
                    );

                }

                $('#button_area').hover(
                    function () {
                        $('#before').css({transform:'rotateX(0deg) translateZ(30px)'});
                        $('#after').css({transform:'rotateX(-90deg) translateZ(30px)'});
                        exeImageRotate(90);
                    },
                    function () {
                        $('#before').css({transform:'rotateX(90deg) translateZ(30px)'});
                        $('#after').css({transform:'rotateX(0deg) translateZ(30px)'});
                        exeImageRotate(-90);
                    }
                );



            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div#main_area {
                margin           : 50px;
            }

            div#button_area {
                position         : absolute;
                height           : 60px;
                width            : 180px;
                z-index          : 99999;
            }
            
            div#move_area {
                height           : 60px;
                width            : 180px;
                transform-style  : preserve-3d;
            }

            div.button {
                position         : absolute;
                height           : 60px;
                width            : 180px;
                text-align       : center;
                line-height      : 60px;
            }

            div#before {
                background-color : #ccffcc;
                transform        : rotateX(0deg) translateZ(30px);
            }

            div#after {
                background-color : #00ff00;
                transform        : rotateX(-90deg) translateZ(30px);
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="button_area"></div>
            <div id="move_area">
                <div class="button" id="before">before</div>
                <div class="button" id="after">after</div>
            </div>
        </div>

    </body>
</html>

sample

sample で button 部分に mousehover すると buttonが立体的に入れ替わります。

作業内容自体は div を回転させているだけなので画像なども使用可能です。
・・・やっていることは問題ないと思うのですが地味な気がしますね。
何だろう、もっと画像やサイズを調整すると綺麗に見えるんですかね・・・

まぁ、それはともかく処理としては楽しいですね。
機会があれば今度は立方体を作ってみようかなと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

マウススクロール処理対策(chrome対応)

最近は 1ページが長いページが多いですね。
その中でページでの scroll について事前調査をしてみます。

内容としては chrome の時だけ scroll がガタツクようです。
う~ん、さすが chrome というべきか・・・
 # ちなみに私のメインブラウザは chrome です(笑)

■ 標準のページ

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>

        <div id="main_area">
            <div class="disp_area">  1</div>
            <div class="disp_area">  2</div>
            <div class="disp_area"><省略></div>
            <div class="disp_area">499</div>
            <div class="disp_area">500</div>
        </div>

    </body>
</html>

sample0

sample0 にて scroll すると確かにカクツキますね・・・
さすが chrome です。確かに綺麗なデザインの場合にはちょっと残念かもしれません。
何とかしないと行けません。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script src="./jquery.mousewheel.min_.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var scrollTop = 0;
                var baseSpeed = 100;
                var tempSpeed = 0;
                var userAgent = window.navigator.userAgent.toLowerCase();
                $('html').mousewheel(function(event, move) {

                    // scroll type
                    if (move > 0) {
                        tempSpeed = (baseSpeed * -1);
                    } else if (move < 0) {
                        tempSpeed =  baseSpeed;
                    }

                    // userAgent check (chrome)
                    if(userAgent.indexOf('chrome') != -1){
                        scrollTop =  $('body').scrollTop() + tempSpeed;
                    } else {
                        scrollTop =  $('html').scrollTop() + tempSpeed;
                    }

                    // scroll set
                    $('html,body').stop().animate({scrollTop: scrollTop}, 'normal');
                    // scroll out
                    return false;

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div class="disp_area">  1</div>
            <div class="disp_area">  2</div>
            <div class="disp_area"><省略></div>
            <div class="disp_area">499</div>
            <div class="disp_area">500</div>
        </div>

    </body>
</html>

sample1

sample1 にて scroll するとカクツキがましになったのではないでしょうか。
ちなみに「var baseSpeed = 100;」の数値を変えると1回の scroll にて動く
幅は大きくなりますがもう少しスムーズにもなります。

ただ、今回の要求仕様ではそれもだめです。
もう少しスムーズにする方法を考えないと行けませんね・・・
とりあえず基本は出来ましたので、これで進めていこうかと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

横に固定されるメニュー(2)

前回サイドメニューではさすがにちょっと寂しかったので、
今回はサイドメニューに表示に多少の動きをつけてみたいと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                var menuMargin = 100;
                var classCnt   = 0;
                $(window).scroll(function () {
                    var nowTop   = 0;
                    var srcTop   = $(this).scrollTop();
                    $('#main_area div').each( function(cnt) {
                        nowTop = $(this).offset().top + $(this).height() - menuMargin;
                        if (srcTop < nowTop) {
                            if (classCnt != (cnt + 1)) {
                                $('div.menu_point').removeClass('active').stop().animate({'margin-left':'80px'}, 'fast', 'swing').css({'background-color':'#cccccc'});
                                classCnt = cnt + 1;
                                $('#menu_' + classCnt).addClass('active').stop().animate({'margin-left':'0'}, 'slow', 'swing').css({'background-color':'#ff9999'});
                            }
                            return false;
                        }
                    });
                });

                $('div#menu_area .menu_point').hover(
                    function () {
                        if ($(this).hasClass('active') == false) {
                            $(this).stop().animate({'margin-left':'0'}, 'fast', 'swing').css({'background-color':'#99ffff'});
                        }
                    },
                    function () {
                        if ($(this).hasClass('active') == false) {
                            $(this).stop().animate({'margin-left':'80px'}, 'fast', 'swing').css({'background-color':'#cccccc'});
                        }
                    }
                );

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div#menu_area {
                position         : fixed;
                top              : 0;
                right            : -70px;
                z-index          : 9999;
            }

            div#menu_area .menu_point {
                border           : solid 1px #000000;
                margin           : 5px;
                padding          : 5px;
            }

            div#menu_area div.active {
                background-color : red;
                margin-left      : 0;
            }

            div.disp_area {
                height           : 1000px;
                border           : solid 1px #000000;
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="menu_area">
            <div id="menu_1" class="menu_point"><a href="#point_1">div area 1</a></div>
            <div id="menu_2" class="menu_point"><a href="#point_2">div area 2</a></div>
            <div id="menu_3" class="menu_point"><a href="#point_3">div area 3</a></div>
            <div id="menu_4" class="menu_point"><a href="#point_4">div area 4</a></div>
            <div id="menu_5" class="menu_point"><a href="#point_5">div area 5</a></div>
            <div id="menu_6" class="menu_point"><a href="#point_6">div area 6</a></div>
            <div id="menu_7" class="menu_point"><a href="#point_7">div area 7</a></div>
            <div id="menu_8" class="menu_point"><a href="#point_8">div area 8</a></div>
            <div id="menu_9" class="menu_point"><a href="#point_9">div area 9</a></div>
        </div>
        <div id="main_area">
            <h1>Page area</h1>
            <div id="point_1" class="disp_area"><h2>div area 1</h2></div>
            <div id="point_2" class="disp_area"><h2>div area 2</h2></div>
            <div id="point_3" class="disp_area"><h2>div area 3</h2></div>
            <div id="point_4" class="disp_area"><h2>div area 4</h2></div>
            <div id="point_5" class="disp_area"><h2>div area 5</h2></div>
            <div id="point_6" class="disp_area"><h2>div area 6</h2></div>
            <div id="point_7" class="disp_area"><h2>div area 7</h2></div>
            <div id="point_8" class="disp_area"><h2>div area 8</h2></div>
            <div id="point_9" class="disp_area"><h2>div area 9</h2></div>
        </div>

    </body>
</html>

sample

sample の内容も基本的には前回と変わりません。
違いとして該当の menu 部分に来たときにちょっとした動きをつけてみました。

今回の様に多少でも動きをつける方がやはり見映えは良いですね。
色々な動きの発想が出来るといいんですが難しいですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。