Mintik
3 yıl önce

Hareketli giriş sayfası tasarımı

login form
Web sitenizdeki sıkıcı ve herkesin kullandığı tarzdan bir giriş paneli kullanmak istemiyorsanız  eğer bu örnek tam size  göre. Tushar Dhara  tarafından hazırlanmış 3D animasyonlu  giriş formu örneği. Giriş formu  örneğinin bir  tarafında e-mail ile  giriş diğer  tarafında ise  kullanıcı adı ile giriş  özelliği  bulunuyor. Form çerçevesinde  bulunan  ikonlar yardımıyla form  örneğini 180º döndürebiliyorsunuz. Örneğin bir  tarafını  giriş  formu diğer  tarafını da  isterseniz  şifremi  unuttum yada üye  ol bölümü olarak kullanırsanız  daha iyi  olur sanırım.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresi : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 JavaScript : 

<script>
$(function(){

	// Checking for CSS 3D transformation support
	$.support.css3d = supportsCSS3D();

	var formContainer = $('.loginWrapper');
	// Listening for clicks on the ribbon links
	$('.flip').click(function(e){

		// Flipping the forms
		formContainer.toggleClass('flipped');

		// If there is no CSS3 3D support, simply
		// hide the login form (exposing the recover one)
		if(!$.support.css3d){
			$('#login').toggle();
		}
		e.preventDefault();
	});

	formContainer.find('form').submit(function(e){
		// Preventing form submissions. If you implement
		// a backend, you might want to remove this code
		//e.preventDefault();
	});

	// A helper function that checks for the 
	// support of the 3D CSS3 transformations.
	function supportsCSS3D() {
		var props = [
			'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
		], testDom = document.createElement('a');

		for(var i=0; i<props.length; i++){
			if(props[i] in testDom.style){
				return true;
			}
		}

		return false;
	}
		$(this).children('span').toggleClass('checked');
	});
	//checkbox
	$('.checker').click(function(e){
});
</script>

 Css : 

/*Login page ================================================== */

.loginWrapper { width: 240px; position: absolute; left: 50%; top: 50%; margin: -124px 0 0 -120px; text-align: center; -moz-perspective: 800px; -webkit-perspective: 800px; perspective: 800px; }

/* Login hover buttons */

.logleft, .logright, .logback { background: url(img/icon-set.png) no-repeat; height: 37px; width: 37px; position: absolute; top: 36px; display: block; opacity: 0; filter: alpha(opacity=0); }
.logleft { left: 0px; background-position: 0 0; } 
.logright { right: 0px; background-position: -38px 0; } 
.logback { left: 0; background-position: -76px 0; }
.logleft:hover { background-position: 0 -39px; } 
.logright:hover { background-position: -38px -39px; } 
.logback:hover { background-position: -76px -39px; }
#login{ z-index:100; }
#recover{ z-index:1; opacity:0; filter: alpha(opacity=0); -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); transform:rotateY(180deg); }
.flipped #login{ opacity:0; filter: alpha(opacity=0); -moz-transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); }
.loginWrapper.flipped #recover{ opacity:1; filter: alpha(opacity=100); -moz-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); transform:rotateY(0deg); }
.loginWrapper form { width:100%; height:100%; position:absolute; top:0; left:0;

/* Enabling 3d space for the transforms */
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;

/* When the forms are flipped, they will be hidden */
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

/* Enabling a smooth animated transition */
-moz-transition:0.8s;
-webkit-transition:0.8s;
transition:0.8s;

/* Configure a keyframe animation for Firefox */
-moz-animation: pulse 2s infinite;

/* Configure it for Chrome and Safari */
-webkit-animation: pulse 2s infinite;
}

.loginPic { text-align: center; display: block; position: relative; overflow: hidden; }
.loginPic span { display: block; color: #5f5f5f; font-size: 14px; margin-top: 10px; font-weight: bold; text-shadow: 0 1px 1px #ffffff; }
.loginWrapper form { display: block; margin: 0 auto; width: 236px; }
.loginWrapper a { display: inline-block; }
.loginWrapper input[type=text], .loginWrapper input[type=password] { font-size: 11px; color: #858585; box-shadow: 0 0 0px 2px #ebebeb; -webkit-box-shadow: 0 0 0px 2px #ebebeb; -moz-box-shadow: 0 0 0px 2px #ebebeb; padding: 7px 27px 7px 9px; border: 1px solid #d7d7d7; width: 198px; display: inline-block; margin-top: 15px; }
.loginUsername { background: #fbfbfb  url(img/user.png) no-repeat 213px 7px; }
.loginPassword { background: #fbfbfb url(img/lockk.png) no-repeat 214px 7px; }
.loginEmail { background: #fbfbfb url(img/a.png) no-repeat 213px 7px; }
.logControl { margin-top: 15px; } url(img/icon-set.png)
.logControl:after { content: ""; display: block; clear: both; }
.logControl .memory { float: left; margin-top: 5px; }
.logControl input[type=submit] { float: right; }

/* Checkboxes */

div.checker { width: 16px; height: 16px; position: relative; display: -moz-inline-box; display: block; vertical-align: middle; zoom: 1; float: left; margin-top: 3px; margin-right: 8px; box-shadow: 0 1px 0 #fff; -webkit-box-shadow: 0 1px 0 #fff; -moz-box-shadow: 0 1px 0 #fff; }
div.checker input { width: 16px; height: 16px; opacity: 0; filter: alpha(opacity:0); display: inline-block; background: none; }
div.checker span { background: url(img/select.png) no-repeat 0 0; height: 16px; width: 16px; display: -moz-inline-box; display: inline-block; text-align: center; }
div.checker span.checked { background-position: 0 -17px; }

/* Button */

.bBlue {  border: 1px solid #3e76af; box-shadow: 0 1px 2px 0 #66b2d2 inset; -webkit-box-shadow: 0 1px 2px 0 #66b2d2 inset; -moz-box-shadow: 0 1px 2px 0 #66b2d2 inset;
	color:#fff;
background: #5ba5cb;
background: -moz-linear-gradient(top,  #5ba5cb 0%, #3a70ab 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba5cb), color-stop(100%,#3a70ab));
background: -webkit-linear-gradient(top,  #5ba5cb 0%,#3a70ab 100%);
background: -o-linear-gradient(top,  #5ba5cb 0%,#3a70ab 100%);
background: -ms-linear-gradient(top,  #5ba5cb 0%,#3a70ab 100%);
background: linear-gradient(top,  #5ba5cb 0%,#3a70ab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ba5cb', endColorstr='#3a70ab',GradientType=0 );
}
.bBlue:hover { opacity: 0.95; filter: alpha(opacity=95); -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; }
.bBlue:active { background: #4786b8; box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; -webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; -moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; }
.buttonM [class*="tablectrl"] {  font-size: 11px; color: #fff; font-weight: bold; text-shadow: 0 -1px #6f6f6f; display: inline-block; line-height: 14px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
.buttonM span { text-shadow: 0 1px 0 #6f6f6f; margin-left: 10px; }
.buttonM { padding: 7px 15px; }
.memory label{font-size:12px; position:relative;top:-18px;left:20px;}
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="loginWrapper">
	<!-- Current user form -->
    <form action="index.html" id="login">
        <div class="loginPic">
            <a href="#" title=""><img src="img/lock.png" alt=""></a>
            <div class="loginActions">
                <div><a href="#" title="Change user" class="logleft flip" style="left: 0px; opacity: 1;"></a></div>
                <div><a href="#" title="Forgot password?" class="logright" style="right: 0px; opacity: 1;"></a></div>
            </div>
        </div>

        <input type="text" name="login" placeholder="Confirm your email" class="loginEmail">
        <input type="password" name="password" placeholder="Password" class="loginPassword">

        <div class="logControl">
            <div class="memory"><div class="checker" id="uniform-remember1"><span><input type="checkbox" checked="checked" class="check" id="remember1" style="opacity: 0;"></span></div><label for="remember1">Remember me</label></div>
            <input type="submit" name="submit" value="Login" class="buttonM bBlue">
        </div>
    </form>

    <!-- New user form -->
    <form action="index.html" id="recover">
        <div class="loginPic">
            <a href="#" title=""><img src="img/lock.png" alt=""></a>
            <div class="loginActions">
                <div><a href="#" title="" class="logback flip" style="left: 0px; opacity: 1;"></a></div>
                <div><a href="#" title="Forgot password?" class="logright" style="right: 0px; opacity: 1;"></a></div>
            </div>
        </div>

        <input type="text" name="login" placeholder="Your username" class="loginUsername">
        <input type="password" name="password" placeholder="Password" class="loginPassword">

        <div class="logControl">
            <div class="memory"><div class="checker" id="uniform-remember2"><span><input type="checkbox" checked="checked" class="check" id="remember2" style="opacity: 0;"></span></div><label for="remember2">Remember me</label></div>
            <input type="submit" name="submit" value="Login" class="buttonM bBlue">
        </div>
    </form>
</div>

 

Mintik senin düşüncelerini merak ediyor. Bir yorum yaz

  1. remta dedi ki:
    2 Kasım 2020, 14:05

    Kodlama yapmak oldukça zordur. Bu işin ehli arkadaşları gerçekten tebrik ediyorum.

  2. Öztiryakiler dedi ki:
    7 Şubat 2018, 11:41

    Güzel javascript ile effectler teşekkürler.