정보실

웹학교

정보실

javascript 비밀번호가 맞지 않으면 자물통이 흔들리는 재미있는 애니입니다.

본문

https://codepen.io/amit7soni/pen/YGqJLr


8d3be543f3528635424e74286c7ea8f3_1529917078_0132.png
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

https://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css


HTML :

<div class="wrapper">
    <img src="https://s5.postimg.cc/9fbjl0kh3/user_pic.jpg" alt="" class="user-img" />
  <h3>R K</h3>
  <form action="#" method="#">
    <div class="pass-feild">
      <img src="https://cdn1.iconfinder.com/data/icons/mini-solid-icons-vol-2/16/51-256.png" alt="" class="ip-pass-icon" />
      <input type="password" maxlength="10" name="pass" placeholder="Password" class="ip-pass" value=""/>
       <div class="fake-pass">
          <!--<span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>-->
       </div>
      </div>
    <input type="button" class="ip-btn" value="Login"/>
    <h6>Enter any Password & click Login</h6>
    <span class="hor-line"></span>
  </form>
</div>

<!-- Start Credit -->
<div class="credit">
  Inspired By
  <a href="https://dribbble.com/shots/1486292-Login-Kick-the-wrong-password-away"  target="_blank">
    <img src="https://s5.postimg.cc/xkc92q4rr/Logo.png" alt="Dribbble Logo" class="d-logo" />
  </a>
</div>
<!-- End Credit -->


CSS : 

* {
  margin: 0;
  padding: 0;
  outline: none;
}

html {
  height: 100%;
  background-color: #4D4339;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF4D4339', endColorstr='#FF362F2A');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIzMSUiIHN0b3AtY29sb3I9IiM0ZDQzMzkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNjJmMmEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -moz-radial-gradient(center, ellipse cover, #4d4339 31%, #362f2a 100%);
  background-image: -webkit-radial-gradient(center, ellipse cover, #4d4339 31%, #362f2a 100%);
  background-image: radial-gradient(ellipse cover at center, #4d4339 31%, #362f2a 100%);
}

body {
  font-family: Verdana;
  color: #66594d;
}

div.wrapper {
  position: relative;
  width: 340px;
  height: 467px;
  background: #EAE4DA;
  margin: 25px auto;
  -moz-border-radius: 11px;
  -webkit-border-radius: 11px;
  border-radius: 11px;
  -moz-box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.7);
  text-align: center;
}
div.wrapper .user-img {
  width: 120px;
  height: 120px;
  margin-top: 35px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  border: 8px solid #f7efee;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
}
div.wrapper h3 {
  font-size: 18px;
  font-weight: normal;
  text-transform: uppercase;
  margin-top: 20px;
}
div.wrapper form {
  margin-top: 30px;
}
div.wrapper form div.pass-feild {
  position: relative;
}
div.wrapper form img.ip-pass-icon {
  position: absolute;
  width: 24px;
  opacity: 0.2;
  margin: 16px;
  z-index: 999;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  -webkit-transform-origin: top center;
  transform-origin: top center;
}
div.wrapper form .ip-pass-icon-anim {
  -moz-animation: swingLock 2s ease forwards;
  -webkit-animation: swingLock 2s ease forwards;
  animation: swingLock 2s ease forwards;
}
div.wrapper form input.ip-pass {
  width: 180px;
  padding: 10px 30px;
  padding-left: 44px;
  padding-bottom: 11px;
  font-size: 31px;
  letter-spacing: 1px;
  color: #51514d;
  background-color: #fffaf2;
  border: 1px solid #bebab2;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
}
div.wrapper form div.fake-pass.show:before {
  -moz-animation: showWp 0.3s ease forwards;
  -webkit-animation: showWp 0.3s ease forwards;
  animation: showWp 0.3s ease forwards;
}
div.wrapper form div.fake-pass {
  position: absolute;
  display: none;
  top: 3px;
  left: -2px;
  margin-left: 89px;
  padding-top: 21px;
  padding-left: 3px;
  background: #fffaf2;
  width: 205px;
  height: 32px;
  text-align: left;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  overflow: hidden;
}
div.wrapper form div.fake-pass:before {
  position: absolute;
  content: "Wrong Password";
  font-size: 18px;
  color: #cc3a22;
  opacity: 0;
  margin-left: -2px;
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
div.wrapper form div.fake-pass .dot {
  position: relative;
  width: 11px;
  height: 11px;
  background: #51514d;
  margin-right: 0.429em;
  top: -3px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  display: inline-block;
}
div.wrapper form div.fake-pass .dot-anim {
  -moz-animation: kickPassword 0.3s 0.3s ease-out forwards;
  -webkit-animation: kickPassword 0.3s 0.3s ease-out forwards;
  animation: kickPassword 0.3s 0.3s ease-out forwards;
}
div.wrapper form input.ip-btn {
  width: 258px;
  padding: 12px 40px;
  margin-top: 20px;
  font-size: 21px;
  background: #cb7446;
  border: 1px solid #a2592c;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
  font-weight: lighter;
  color: #fff;
  text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
}
div.wrapper form input.ip-btn:hover {
  background: #b2653c;
  cursor: pointer;
}
div.wrapper form h6 {
  font-size: 9px;
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.5);
}
div.wrapper form span.hor-line {
  position: relative;
  width: 100%;
  height: 1px;
  background: #ccc7bd;
  border-bottom: 1px solid #fff7eb;
  display: block;
  margin-top: 25px;
  text-align: center;
}
div.wrapper form span.hor-line:after, div.wrapper form span.hor-line:before {
  position: absolute;
  content: "";
  width: 30px;
  height: 2px;
  left: 50%;
  margin-left: -15px;
  background: #f5efe7;
  border-bottom: 1px solid #ccc7bd;
  display: block;
}
div.wrapper form span.hor-line:before {
  top: 20px;
}
div.wrapper form span.hor-line:after {
  top: 30px;
}

@-moz-keyframes kickPassword {
  0% {
    -moz-transform: translate(0px, 0px) scale(1, 1);
    transform: translate(0px, 0px) scale(1, 1);
  }
  50% {
    -moz-transform: translate(50px, -10px) scale(1.5, 1);
    transform: translate(50px, -10px) scale(1.5, 1);
    opacity: 1;
  }
  100% {
    -moz-transform: translate(220px, 25px) scale(2.5, 1);
    transform: translate(220px, 25px) scale(2.5, 1);
    opacity: 0;
  }
}
@-webkit-keyframes kickPassword {
  0% {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    transform: translate(0px, 0px) scale(1, 1);
  }
  50% {
    -webkit-transform: translate(50px, -10px) scale(1.5, 1);
    transform: translate(50px, -10px) scale(1.5, 1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(220px, 25px) scale(2.5, 1);
    transform: translate(220px, 25px) scale(2.5, 1);
    opacity: 0;
  }
}
@keyframes kickPassword {
  0% {
    -moz-transform: translate(0px, 0px) scale(1, 1);
    -ms-transform: translate(0px, 0px) scale(1, 1);
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    transform: translate(0px, 0px) scale(1, 1);
  }
  50% {
    -moz-transform: translate(50px, -10px) scale(1.5, 1);
    -ms-transform: translate(50px, -10px) scale(1.5, 1);
    -webkit-transform: translate(50px, -10px) scale(1.5, 1);
    transform: translate(50px, -10px) scale(1.5, 1);
    opacity: 1;
  }
  100% {
    -moz-transform: translate(220px, 25px) scale(2.5, 1);
    -ms-transform: translate(220px, 25px) scale(2.5, 1);
    -webkit-transform: translate(220px, 25px) scale(2.5, 1);
    transform: translate(220px, 25px) scale(2.5, 1);
    opacity: 0;
  }
}
@-moz-keyframes swingLock {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  10% {
    -moz-transform: rotate(40deg);
    transform: rotate(40deg);
  }
  20% {
    -moz-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  30% {
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -moz-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  50% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  60% {
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  90% {
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes swingLock {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
  20% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  30% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  60% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  90% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes swingLock {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  10% {
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
  20% {
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  30% {
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  50% {
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  60% {
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  90% {
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes showWp {
  0% {
    opacity: 0;
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@-webkit-keyframes showWp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes showWp {
  0% {
    opacity: 0;
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
::-webkit-input-placeholder {
  position: relative;
  font-size: 18px;
  top: -5px;
}

::-moz-input-placeholder {
  position: relative;
  font-size: 18px;
  top: -5px;
}

::-moz-placeholder {
  position: relative;
  font-size: 18px;
  top: -5px;
}

::-o-input-placeholder {
  position: relative;
  font-size: 18px;
  top: -5px;
}

::-ms-input-placeholder {
  position: relative;
  font-size: 18px;
  top: -5px;
}

/* Start Credit Style */
div.credit {
  position: absolute;
  padding: 0px 10px;
  padding-bottom: 8px;
  height: 15px;
  right: 10px;
  top: 10px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.6);
  font-size: 7px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.3);
  cursor: default;
}
div.credit:hover {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
div.credit img {
  position: relative;
  width: 14px;
  margin-left: 3px;
  top: 4px;
}

/* End Credit Style */


JS : 

//$(".ip-pass").focus();
$(".ip-btn").on("click", function() {
     //$(".fake-pass .dot").addClass("dot-anim");
     var _dotString = "",
       _delay = 0,
       _totalDuration = 0;
     var _passLength = $(".ip-pass").val().length;
     _passLength = (_passLength > 10) ? 10 : _passLength;
     for (var i = 0; i < _passLength; i++) {
       _dotString += "<span class='dot'></span>";
     }
     setTimeout(function() {
       $(".fake-pass").html(_dotString).show();
       $(".ip-pass").val("");
       $(".ip-pass-icon").addClass("ip-pass-icon-anim");
       $(".fake-pass .dot").each(function(i) {
         _totalDuration += (i * 30) + 300;
         if (i != 0) {
           _delay = (i * 0.03) + 0.3 + "s";
           $(this).css("animation-delay", _delay);
         }
       }).addClass("dot-anim");

     }, 700);
     setTimeout(function(){
            $("div.fake-pass").addClass("show");
            $(".fake-pass").html("");
            $(".fake-pass .dot").removeClass("dot-anim");
            setTimeout(function(){
              $("div.fake-pass").fadeOut("slow",function(){
                $(this).removeClass("show");
                $(".ip-pass-icon").removeClass("ip-pass-icon-anim");
                $(".ip-pass").focus();
              });
            },800)
          }, 1700);
   });


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 122회 ]  작성일18-06-25 18:00

웹학교