About

本サイトについて

趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。

プロフィール

kght6123

佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。

 Twitter  Github

kght6123.page

マイクロインタラクション（ログインボタンだけ、、、 #JavaScript #JQuery #CSS

2022-10-01T11:54:24.882Z

マイクロインタラクション（ログインボタンだけですが、、、）を注目度Upの為に勉強しました。

<!doctype html>

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Micro Interaction - Main -</title>
    <meta name="description" content="Micro Interaction Main Screen.">
    <meta name="author" content="Koga">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <style type="text/css">
    <!--
        button {
            background-color:white;
            width: 120px;
            height: 40px;
            border: 3px green solid;
            border-radius: 20px;
            color: green;
            font-weight: bold;
        }
    //-->
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><!-- JQuery -->
    <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script><!-- JQuery Color -->
    <script type="text/javascript">
    <!--
        $.fn.extend({
            animateCss: function (animationName, animationEndFunc) {
                var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                this.addClass('animated ' + animationName).one(animationEnd, function() {
                    $(this).removeClass('animated ' + animationName);
                    if(animationEndFunc) {
                        animationEndFunc.apply(this, []);
                    }
                });
            }
        });
        $(function() {
            $("#btn").mouseenter(function(){
                    $(this).animate({backgroundColor:"green", color:"white"}, 100, "linear", function(){
                        $(this).animateCss('pulse');
                    });
                }).mouseleave(function(){
                    $(this).animate({backgroundColor:"white", color:"green"}, 100, "linear");
                    
                }).click(function(){
                    $(this).animateCss('bounceIn', function() {
                        var circleSize = "40px";
                        $("span",this).hide();
                        $(this).animate({
                            width: circleSize,
                            height: circleSize,
                            borderRadius: "50%",// 50%でも40pxでも良い
                            backgroundColor:"white",
                            color:"green"}, 200, "swing", function(){
                                // 0.75秒後に元に戻す。
                                setTimeout(function(_this) {
                                        $(_this).animate({backgroundColor:"green", color:"white", width:"120px", height:"40px", borderRadius:"20px"}, 200, "swing");
                                        $("span", _this).html("OK").show();
                                    }, 750, this);
                                
                            });
                    });
                    
                });
        });
    //-->
    </script>
</head>
<body>
    <div style="padding:10px;width:500px;height:100px;background-color:gray;position:relative;">
        <button id="btn" style="margin: auto;top: 0; bottom: 0; left: 0; right: 0; position: absolute;"><span>Log In</span></button>
    </div>
</body>
</html>
関連タグ
前の記事へ
（マルチキャストDNS（mDNS）の活用 #RaspberryPi #Avahi #Mac #Bonjour） 次の記事へ
（時間帯でダークカラーに切り替え #Wordpress #PHP #子テーマ）