月別アーカイブ: 2014年12月

画像表示の演出

今回は 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 人がこの 投稿 は役に立ったと言っています。

文字列を切り取って表示

今回は説明文などの概要の表示です。
全文が指定の文字数より長い場合には、指定文字数に切り取って表示してみます。

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

                max_length = 10;
                $('#input_text').keyup(function () {

                    wText = $(this).val();
                    if (max_length < wText.length) {
                        wText = wText.slice(0, max_length) + '...';
                    }

                    $('#disp_text').empty().append(wText);
                });

            });

        --></script>

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

            #main_area {
                margin              : 10px;
            }

            #input_text {
                width               : 400px;
            }

            #disp_text {
                width               : 400px;
                background-color    : #ccffcc;
                padding             : 2px;
                margin-top          : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="input_text"></textarea>
            <div id="disp_text"></div>
        </div>

    </body>
</html>

sample

sample で text に文字列を入力すると、10文字以上になった場合に
省略表示を行い、末尾に「…」を追加して表示します。

普段は php で文字列の処理を行っていますが、実際に jQuery で文字列の
切り取りができれば、以前の記事なども対応できます。
意外と色々できそうですね。

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

                function exeImageMove (id) {

                    $('#main_area .thumbnail').appendTo('#thumb_area');

                    backImage = 'none';
                    switch (id){
                        case 'thumb01':
                            backImage = 'image_jpeg01.jpg';
                            break;
                        case 'thumb02':
                            backImage = 'image_jpeg02.jpg';
                            break;
                        case 'thumb03':
                            backImage = 'image_jpeg03.jpg';
                            break;
                        case 'thumb04':
                            backImage = 'image_jpeg04.jpg';
                            break;
                    }
                    $('#back_area').css('background-image', 'url(' + backImage +')');

                    $('#' + id).appendTo('#main_area');

                }

                $('div#thumb_area div.thumbnail').click(function () {
                    exeImageMove($(this).attr('id'));
                });
                exeImageMove('thumb01');

            });

        --></script>

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

            div {
                margin              : 10px;
            }

            div#back_area {
                width               : 960px;
                height              : 350px;
                background-repeat   : no-repeat;
                background-position : center;
                background-size     : cover;
            }

            div.thumbnail {
                position            : relative;
                float               : left;
                width               : 220px;
                height              : 80px;
                background-repeat   : no-repeat;
                background-position : center;
                background-size     : cover;
                border              : solid 5px #0000ff;
            }

            div#thumb01 {
                background-image    : url('icon_jpeg09.jpg');
            }
            div#thumb02 {
                background-image    : url('icon_jpeg05.jpg');
            }
            div#thumb03 {
                background-image    : url('icon_jpeg17.jpg');
            }
            div#thumb04 {
                background-image    : url('icon_jpeg18.jpg');
            }

            div#thumb_area {
                width               : 960px;
                height              : 120px;
            }
            
            div#main_area div.thumbnail {
                float               : right;
                width               : 440px;
                height              : 160px;
                margin-top          : 30px;
                border              : solid 5px #000000;
            }

        --></style>

    </head>
    <body>

        <div id="back_area">
            <div id="thumb_area">
                <div id="thumb01" class="thumbnail"></div>
                <div id="thumb02" class="thumbnail"></div>
                <div id="thumb03" class="thumbnail"></div>
                <div id="thumb04" class="thumbnail"></div>
            </div>
            <div id="main_area"></div>
        </div>

    </body>
</html>

sample

sample の青色の枠に選択された thumbnail を click すると
選択した thumbnail を右下に拡大して表示すると共に背景の変更を行います。

どうでしょう、中々目を引くと思いますが・・・
thumbnail のサイズや背景をデザイン的に考慮するとそれなりに使えると思います。
デザイン的に綺麗にすることは前提ですが、誰かに使ってもらえるといいなぁ。

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

                function get_geolocation(){
                    if (navigator.geolocation) {
                        // Get Current Position
                        navigator.geolocation.getCurrentPosition(
                            function (position) {
                                $('#data_latitude').empty().append(position.coords.latitude);
                                $('#data_longitude').empty().append(position.coords.longitude);
                            },
                            function (error) {
                                // Error Geolocation
                                alert('Error Geolocation');
                            }
                        );
                    } else {
                        // Not Geolocation
                        alert('Not Geolocation');
                    }
                }

                $('#get_gps').click(function(){
                    get_geolocation();
                });

            });

        --></script>

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

            div, dt, dd {
                margin           : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <button id="get_gps">Get GPS</button>
            <dl>
                <dt>latitude</dt>
                <dd id="data_latitude"></dd>
                <dt>longitude</dt>
                <dd id="data_longitude"></dd>
            </dl>
        </div>

    </body>
</html>

sample

sample ではbutton を click すると現在座標が取得できます。
座標を取得するのは navigator.geolocation を使用しているので jQuery とは直接関係はありません。
まぁ、その辺はご容赦ください。

座標を取得できると色々便利ですね。
blog の comment 欄などに着けて今日の行き先などを登録するなど使い方は色々ありそうですね。

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

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