LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Welcome

Sign In

Don't have an account?

CSS
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

body, input, select, textarea, button {
  font-family: "Source Sans Pro", sans-serif;
}

.card {
  width: 100%;
  max-width: 320px;
  height: 568px;
  overflow: hidden;
  position: relative;
}
.card .go-back {
  text-align: center;
  padding: 20px;
  color: white;
  position: absolute;
  top: 0;
  lefT: 0;
  color: #fff;
  font-size: 25px;
}
.card .go-back i {
  transition: 0.15s ease-in-out;
}
.card .go-back i:hover {
  text-shadow: 0px 1px 10px rgba(0, 0, 0, 0.35);
}
.card .slider {
  width: 1284px;
  transition: 0.15s ease-in-out;
}
.card .slider:after {
  content: "";
  display: table;
}
.card .slider:after {
  clear: both;
}
.card .slider .left, .card .slider .middle, .card .slider .right, .card .slider .message {
  width: 100%;
  max-width: 320px;
  height: 568px;
  float: left;
  display: flex;
  display: -webkit-flex;
  position: relative;
}
.card .slider .message {
  background: #ef5285;
  justify-content: center;
  align-items: center;
  color: white;
}
.card .slider .message .msg {
  display: none;
}
.card .slider .message .loader {
  animation: rotate 1s linear infinite;
  transform-origin: center;
  border-radius: 100%;
  width: 50px;
  height: 50px;
}
.card .slider .message .loader .loaderCirlce {
  animation: rotate 2s linear infinite;
  transform-origin: center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}
.card .slider .message .loader .path {
  stroke-dasharray: 0, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  border-radius: 100%;
  stroke: #fff;
  animation: loaderPath 5s linear infinite;
}
.card .slider p.button {
  cursor: pointer;
  transition: 0.15s ease-in-out;
}
.card .slider p.button:hover {
  text-shadow: 0px 1px 10px rgba(0, 0, 0, 0.35);
}
.card .slider .middle {
  background: #60c5ba;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 20px;
}
.card .slider .middle form {
  text-align: center;
  transition: 0.15s ease-in-out;
  widtH: 90%;
}
.card .slider .middle form .field {
  transition: 0.15s ease-in-out;
  display: block;
  widtH: 100%;
}
.card .slider .middle form .field .input {
  outline: none;
  padding: 10px 5px;
  widtH: 100%;
  display: block;
  margin: 10px 0;
  border: none;
  transition: 0.15s ease-in-out;
}
.card .slider .middle form .field .input:focus {
  box-shadow: 0px 1px 10px rgba(239, 82, 133, 0.75);
}
.card .slider .middle form .field input[type='submit'] {
  padding: 20px 40px;
  border: none;
  background: #ef5285;
  color: white;
  transition: 0.15s ease-in-out;
  outline: 0;
}
.card .slider .middle form .field input[type='submit']:hover {
  background: #eb2364;
}
.card .slider .right {
  background: #a5dff9;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 20px;
}
.card .slider .right form {
  text-align: center;
  transition: 0.15s ease-in-out;
  widtH: 90%;
}
.card .slider .right form .field {
  transition: 0.15s ease-in-out;
  display: block;
  widtH: 100%;
}
.card .slider .right form .field .input {
  outline: none;
  padding: 10px 5px;
  widtH: 100%;
  display: block;
  margin: 10px 0;
  border: none;
  transition: 0.15s ease-in-out;
}
.card .slider .right form .field .input:focus {
  box-shadow: 0px 1px 10px rgba(239, 82, 133, 0.75);
}
.card .slider .right form .field input[type='submit'] {
  padding: 20px 40px;
  border: none;
  background: #ef5285;
  color: white;
  transition: 0.15s ease-in-out;
}
.card .slider .right form .field input[type='submit']:hover {
  background: #eb2364;
}
.card .slider .left {
  flex-direction: column;
}
.card .slider .left .bg, .card .slider .left .sign_up, .card .slider .left .sign_in {
  transition: 0.15s ease-in-out;
}
.card .slider .left .bg {
  height: 100%;
  width: 100%;
  transition: 1s ease-in-out;
  background-image: url("https://images.unsplash.com/photo-1467810563316-b5476525c0f9");
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.card .slider .left .bg .welcome {
  font-size: 55px;
}
.card .slider .left .sign_in, .card .slider .left .sign_up {
  text-align: center;
}
.card .slider .left .sign_in .button, .card .slider .left .sign_up .button {
  padding: 25px 20px;
  display: block;
  width: 100%;
  color: white;
  transition: 0.15s ease-in-out;
}
.card .slider .left .sign_in .button:hover, .card .slider .left .sign_up .button:hover {
  padding: 30px 20px;
}
.card .slider .left .sign_in {
  background: #60c5ba;
}
.card .slider .left .sign_up {
  background: #a5dff9;
}

@keyframes loaderPath {
  0% {
    stroke-dasharray: 0, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
JS
$(".bg").on('mousemove', function(e){
	var pageX = e.pageX,
			pageY = e.pageY,
			offset = $(this).offset(),
			bgHeight = $(this).outerHeight(),
			bgWidth = $(this).outerWidth(),
			postionX = pageX - offset.left - bgWidth / 2,
			postionY = pageY - offset.top - bgHeight / 2,
			setCss = "transform: translate( "+postionX / 160+"px, "+postionY / 160+"px)"
		$(this).find(".welcome").attr("style", setCss);
});

$(".button").on('click', function(e){
	var $this = $(this),
			buttonTarget = $($this).attr("target"),
			targetOffset = $(buttonTarget).offset().left,
			sliderOffset = $(this).parents(".slider").offset().left,
			totalOffset = targetOffset - sliderOffset
	
	$(this).parents(".slider").css({"transform": "translate(-"+totalOffset+"px, -0)"})
});

$(".go-back").on('click', function(){
	var $this = $(this)
	$($this).parents(".slider").css({"transform": "translate(-0px, -0px)"});
	setTimeout( function(){
		$($this).parents(".slider").find("#message .msg").remove();
		$($this).parents(".slider").find("#message .loader").show();
	}, 150);
});

$("input[type='submit']").on('click', function(e){
	e.preventDefault();
	var	buttonTarget = $(this).parents(".slider").find("#message"),
			targetOffset = $(buttonTarget).offset().left,
			sliderOffset = $(this).parents(".slider").offset().left,
			totalOffset = targetOffset - sliderOffset
	
		$(this).parents(".slider").css({"transform": "translate(-"+totalOffset+"px, -0)"});
		
	setTimeout( function(){
		$(buttonTarget).append('

'+$(e.target).attr("msg")+'

'); $(buttonTarget).find(".loader").fadeOut(350, function(){ $(buttonTarget).find(".msg").fadeIn(350) }); }, 1000); });
Term
Sat, 01/13/2018 - 16:14

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv