タグ別アーカイブ: offset

横に固定されるメニュー(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 人がこの 投稿 は役に立ったと言っています。

横に固定されるメニュー

今までにもメニューの固定化をしてみましたが今回はサイドメニューです。
固定でサイドメニューを表示して、ページ位置ごと表示内容をハイライトしてみます。

<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;
                $(window).scroll(function () {
                    var classCnt = 0;
                    var nowTop   = 0;
                    var srcTop   = $(this).scrollTop();
                    $('#main_area div').each( function(cnt) {
                        nowTop = $(this).offset().top + $(this).height() - menuMargin;
                        if (srcTop < nowTop) {
                            $('div.menu_point').removeClass('active');
                            classCnt = cnt + 1;
                            $('#menu_' + classCnt).addClass('active');
                            return false;
                        }
                    });
                });

            });

        --></script>

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

            div#menu_area {
                position         : fixed;
                top              : 0;
                right            : 0;
                z-index          : 9999;
                background-color : #ffffff;
            }

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

            div#menu_area .active {
                color            : #ffffff;
                background-color : #00ff00;
            }

            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 を下に scroll していくと表示内容によって menu 部分の色が変わります。
もちろん menu ですので click すれば対象の部分を表示できます。

現在表示中のページ位置を表示できます。
menu 用の div に対して class を設定しているだけですので色を変えるだけではなく
文字の表示内容を変えたりも出来ます。

今後はパララックス効果などの多様がありますので、使用する機会が無いかもしれません。
それでも使い方さえ間違えなければ役に立つ機能だと思います。
ぜひお試しください。

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(){

                function moveAnimateImage (id) {
                    $('#' + id).css({transform:'scaleX(1)'});
                }

                flg01 = false;
                flg02 = false;
                flg03 = false;
                flg04 = false;
                $(window).scroll(function () {
                    var winTop = ($(this).scrollTop() + 150);
                    if (winTop > $('#image04').offset().top) {
                        if (flg04 == false) {
                            moveAnimateImage('image04');
                            flg04 = true;
                        }
                    } else if (winTop > $('#image03').offset().top) {
                        if (flg03 == false) {
                            moveAnimateImage('image03');
                            flg03 = true;
                        }
                    } else if (winTop > $('#image02').offset().top) {
                        if (flg02 == false) {
                            moveAnimateImage('image02');
                            flg02 = true;
                        }
                    } else if (winTop > $('#image01').offset().top) {
                        if (flg01 == false) {
                            moveAnimateImage('image01');
                            flg01 = true;
                        }
                    }
                });

            });

        --></script>

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

            div#main_area {
                margin              : 10px;
            }

            div.image {
                transition          : 0.2s;
                transform           : scaleX(0);
            }
            
            div#image01 {
                margin-top          : 650px;
            }

            div#image02 {
                margin-top          : 200px;
            }

            div#image03 {
                margin-top          : 300px;
            }

            div#image04 {
                margin-top          : 100px;
                margin-bottom       : 400px;
            }


        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="text_area"><p>Pleas Scroll Down</p></div>
            <div id="image01" class="image"><img src="image_jpeg01.jpg"></div>
            <div id="image02" class="image"><img src="image_jpeg02.jpg"></div>
            <div id="image03" class="image"><img src="image_jpeg03.jpg"></div>
            <div id="image04" class="image"><img src="image_jpeg04.jpg"></div>
        </div>

    </body>
</html>

sample

sample 画面を下に Scroll していくと特定の位置で画像が表示されます。

前々回と機能自体は同様ですが表示の仕方を変更して見ました。
表示方法が変わると少しイメージが変わりますね。
# 残念ながら表示の方法の重要な部分は CSS ですけどね。

以前に「こんな感じの表示が実現できるか」と問い合わせを頂いた事があったのを思い出しました。
今度聞かれた際には堂々と「出来ますよ」と返事ができますね。

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

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

画像表示の演出

今回は scroll 時の画像表示に関する演出効果です。
色々な動作が出来るのは良いことです。
とりあえず挑戦してみます。

<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(){

                function moveAnimateImage (id) {
                    $('#' + id).css({'opacity':0}).animate(
                        {
                            opacity : 1
                        },
                        {
                            duration:500, 
                            step:function(step){
                                $(this).css({opacity:step * step, transform:'rotateY(' + (step * 360) + 'deg)'});
                            }
                        }
                    );
                }

                flg01 = false;
                flg02 = false;
                flg03 = false;
                flg04 = false;
                $(window).scroll(function () {
                    var winTop = ($(this).scrollTop() + 150);
                    if (winTop > $('#image04').offset().top) {
                        if (flg04 == false) {
                            moveAnimateImage('image04');
                            flg04 = true;
                        }
                    } else if (winTop > $('#image03').offset().top) {
                        if (flg03 == false) {
                            moveAnimateImage('image03');
                            flg03 = true;
                        }
                    } else if (winTop > $('#image02').offset().top) {
                        if (flg02 == false) {
                            moveAnimateImage('image02');
                            flg02 = true;
                        }
                    } else if (winTop > $('#image01').offset().top) {
                        if (flg01 == false) {
                            moveAnimateImage('image01');
                            flg01 = true;
                        }
                    }
                });

            });

        --></script>

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

            div#main_area {
                margin              : 10px;
            }

            div#image01 {
                transform           : rotateY(90deg);
                margin-top          : 650px;
            }

            div#image02 {
                transform           : rotateY(90deg);
                margin-top          : 200px;
            }

            div#image03 {
                transform           : rotateY(90deg);
                margin-top          : 300px;
            }

            div#image04 {
                transform           : rotateY(90deg);
                margin-top          : 100px;
                margin-bottom       : 400px;
            }


        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="text_area"><p>Pleas Scroll Down</p></div>
            <div id="image01"><img src="image_jpeg01.jpg"></div>
            <div id="image02"><img src="image_jpeg02.jpg"></div>
            <div id="image03"><img src="image_jpeg03.jpg"></div>
            <div id="image04"><img src="image_jpeg04.jpg"></div>
        </div>

    </body>
</html>

sample

sample 画面を下に Scroll していくと特定の位置で画像が表示されます。

Scroll と他の機能を追加して見ると中々面白いものがありますね。
最近は1頁でどれだけ綺麗に見せるかのページが増えている気もします。
暫くこういったものを続けてみようかなと思います。

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

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

簡易カラーピッカー(HTML5版)

以前に簡易的なカラーピッカーを作ってみました。
今回は必要のためちょっと変更してみます。
具体的に言うと画像ファイルから行うカラーピッカーです。

<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 objCanvas = document.getElementById('canvas_area');
                var datContex = objCanvas.getContext('2d');
                var imgData = new Image();
                    imgData.src = './image_jpeg03.jpg';
                    imgData.onload = function() {
                        datContex.drawImage(imgData, 0, 0, imgData.width, imgData.height);
                    };

                var cnvOffset   = $(objCanvas).offset();
                var cnvX        = 0;
                var cnvY        = 0;
                var selectColor = {};
                var pixelColor  = [];
                var setRGBa     = '';

                $('#canvas_area').on('click', function(eObj) {

                    cnvX = Math.floor(eObj.pageX - cnvOffset.left);
                    cnvY = Math.floor(eObj.pageY - cnvOffset.top);

                    selectColor = datContex.getImageData(cnvX, cnvY, 1, 1);    // 1pxData
                    pixelColor  = selectColor.data;
                    setRGBa     = 'rgba(' + pixelColor[0] + ',' + pixelColor[1] + ',' + pixelColor[2] + ',' + pixelColor[3] + ')';
                    $('#color_disp').css('backgroundColor', setRGBa);

                });

            });

        --></script>

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

            #canvas_area {
                cursor           : crosshair;
            }

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #color_disp {
                height           : 150px;
                width            : 150px;
                border           : solid 1px #000000;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
           <div id="color_disp"></div>
        </div>
        <canvas id="canvas_area" width="740" height="350"></canvas>

    </body>
</html>

sample

sampleで表示されている画像をクリックすると、クリックした箇所の色が上部の色表示エリアに表示します。

今回は微妙に困りました。
canvas で使用している getImageData ですが、いつもの開発環境(chrome)で作成していると、
ローカルでは Error が発生するんですね・・・。原因がわからなかったんで暫く悩んでしましました。
結局 Server に Uplode してからチェックするといった面倒な作業で対応しましたが、
もうちょっと融通が利いてもいいと思うんですが・・・

今回のさらなる課題としては、色彩が豊かな画像の場合、Click したときにどの Pixel を選択したかが
わかりにくい点ですね。
click ではなく mousover の方が良いんでしょうか・・・
マウスの形状を即したものするか、margin, padding でそろえるか少し考えどころですね。

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

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