움직이는 인풋 버튼 애니메이션 Material Radio Button : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 버튼 > 움직이는 인풋 버튼 애니메이션 Material Radio Button 상세정보

클라우드태그

javascript

HTML

PHP

Api

2022

CSS

ASP

mysql

Slide

jquery

모듈

카운터

갤러리

현재접속자 명

움직이는 인풋 버튼 애니메이션 Material Radio Button

해피팀

네티즌

소스분류

버튼

다운로드 횟수

0 회

간단설명

버튼을 클릭하면 내부에 있던 흰색 원형 스위치가 부드러운 탄성 효과와 함께 오른쪽으로 미끄러지듯 이동합니다.

평가하기

깊이감 있는 블루톤 배경 위에 둥근 캡슐 형태의 컨테이너 배치로 깔끔하고 모던한 스타일의 버튼입니다.

아이콘이 포함되어 상태 전환에 따른 시각적 변화를 직관적으로 전달합니다.

HTML 구조

</g>

</svg>

<label>

<md-icon>

view_list

</md-icon>

</label>

<label>

<md-icon>

settings

</md-icon>

</label>

</form>

</div>

<div>

Based on <a href="https://dribbble.com/shots/2440217-Fluid-Switch" target="_blank">Leonardo Zakour</a> creation

</div>

</footer>

CSS(SCSS) 소스

@import "compass";

body {

background-color:#4085ee;

> div {

position: relative;

width: 100%;

height: 100%;

}

#page {

position: relative;

width: 100%;

height: 100%;

@include display-flex;

@include justify-content( center );

@include align-items( center );

}

.switch {

input {

display: none;

visibility: hidden;

opacity: 0;

}

.s_wrapper {

position: relative;

background-color: #1e59af;

width: 120px;

height: 60px;

@include border-radius( 40px );

form {

position: relative;

width: 100%;

height: 100%;

@include clearfix;

overflow:visible;

label {

width: 50%;

height: 100%;

float: left;

text-align: center;

display: flex;

@include justify-content( center );

md-icon {

z-index: 2;

cursor: pointer;

color:#4085ee;

}

.switch_bubble {

position: absolute;

height: 140%;

width: auto;

z-index: 0;

left: -10%;

top: -20%;

overflow: visible;

path {

fill: #FFFFFF;

}

label {

z-index: 1;

}

footer {

position: absolute;

width: 100%;

left:0;

bottom:0;

text-align:center;

padding: 16px 0;

color: #FFFFFF;

a {

color: #1e59af;

}

JS 소스

var app = angular.module('app', ['ngMaterial']);

app.controller('switch_ctrl', ['$scope', '$element', function($, iElm){

$.bubble = iElm[0].querySelector('.switch_bubble');

$.action = {

mode: "view"

};

$.bubblisity = function() {

var goo_r = "m374.46898 548.22101c0 31.09552-23.46384 46.8216-48.30342 42.30342-14.47387-2.63271-45.5056-19.85157-65.44189-27.20312-22.20319-8.18748-40.86153 1.28386-40.86153-15.1003 0-16.48716 18.89368-7.0702 41.28072-15.25421 19.8359-7.25139 50.60538-24.69441 65.0227-27.04921 25.53469-4.17062 48.30342 11.2079 48.30342 42.30342z",

goo_l = "m261.51459 548.22101c0 31.09552 25.46384 40.8216 50.30342 36.30342 14.47387-2.63271 43.5056-13.85157 63.44189-21.20312 22.20319-8.18748 40.86153 1.28386 40.86153-15.1003 0-16.48716-18.89368-7.0702-41.28072-15.25421-19.8359-7.25139-48.60538-18.69441-63.0227-21.04921-25.53469-4.17062-50.30342 5.2079-50.30342 36.30342z",

ungoo = "m375.35325 548.30017a57.266888 57.266888 0 0 1-57.26689 57.26689 57.266888 57.266888 0 0 1-57.26688-57.26689 57.266888 57.266888 0 0 1 57.26688-57.26689 57.266888 57.266888 0 0 1 57.26689 57.26689z";

if ($.action.mode == "view") {

TweenMax.to($.bubble, 0.7, {

xPercent: 0,

ease: Power3.easeInOut

});

TweenMax.to($.bubble.querySelector('path'), 0.45, {

morphSVG: goo_l,

ease: Power2.easeIn

});

TweenMax.to($.bubble.querySelector('path'), 0.55, {

morphSVG: ungoo,

delay:0.45,

ease: Elastic.easeOut.config( 0.4, 0.25)

});

} else {

TweenMax.to($.bubble, 0.7, {

xPercent: 70,

ease: Power3.easeInOut

});

TweenMax.to($.bubble.querySelector('path'), 0.45, {

morphSVG: goo_r,

ease: Power2.easeIn

});

TweenMax.to($.bubble.querySelector('path'), 0.55, {

morphSVG: ungoo,

delay:0.45,

ease: Elastic.easeOut.config( 0.4, 0.25)

});

};

}

}]);

해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.