Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Over The Top Form
<header class="codrops-header">
<h1>Over The Top.</h1>
</header>
<span class="thanks">Thank you !</span>
<i class="fa fa-heart"></i>
<div class="container">
<section class="content">
<span class="input input-1 input--jiro">
<input class="input__field input__field--jiro" type="text" id="input-10">
<label class="input__label input__label--jiro" for="input-10">
<span class="input__label-content input__label-content--jiro">Your name goes here</span>
</label>
<i class="fa fa-thumbs-up"></i>
</span>
<span class="input input-2 input--jiro">
<input class="input__field input__field--jiro" type="text" id="input-11">
<label class="input__label input__label--jiro" for="input-11">
<span class="input__label-content input__label-content--jiro">What about your age ?</span>
</label>
<i class="fa fa-thumbs-up"></i>
</span>
<span class="input input-3 input--jiro">
<input class="input__field input__field--jiro" type="text" id="input-12">
<label class="input__label input__label--jiro" for="input-12">
<span class="input__label-content input__label-content--jiro">We also need your email</span>
</label>
<i class="fa fa-thumbs-up"></i>
</span>
</section>
</div>
var $inputs = $('input');
$('.input-1').on('change', function() {
var tl = new TimelineLite();
var $self = $(this);
tl.to($self.find('.fa'), 0.4, {
right: '5px',
opacity: 1,
ease: Elastic.easeOut
}).to($(this), 0.4, {
left: "-450px",
rotation: -220,
opacity: 0,
y: '-100',
ease: Power1.easeOut
}).to($self.next(), 0.4, {
top: "-140px",
opacity: 1,
ease: Back.easeOut
}).to($('.container'), 0.4, {
backgroundColor: '#FFA153',
ease: Power1.easeOut
}, '-=0.4').to($('html'), 0.4, {
backgroundColor: '#FFCEA6',
ease: Power1.easeOut
}, '-=0.4');
setTimeout(function() {
$self.next().find('input').focus();
}, 1200)
})
$('.input-2').on('change', function() {
var tl = new TimelineLite();
var $self = $(this);
tl.to($self.find('.fa'), 0.4, {
right: '5px',
opacity: 1,
ease: Elastic.easeOut
}).to($(this), 0.4, {
left: "450px",
rotation: 255,
opacity: 0,
y: "100",
ease: Power1.easeOut
}).to($self.next(), 0.4, {
top: "-=140px",
opacity: 1,
ease: Back.easeOut
}).to($('.container'), 0.4, {
backgroundColor: '#48DC48',
ease: Power1.easeOut
}, '-=0.4').to($('html'), 0.4, {
backgroundColor: '#9DF39D',
ease: Power1.easeOut
}, '-=0.4');
setTimeout(function() {
$self.next().find('input').focus();
}, 1200)
})
$('.input-3').on('change', function() {
var tl = new TimelineLite();
var $self = $(this);
tl.to($self.find('.fa'), 0.4, {
right: '5px',
opacity: 1,
ease: Elastic.easeOut
}).to($(this), 0.4, {
top: "-=450px",
rotation: 255,
opacity: 0,
y: "-100",
ease: Power1.easeOut
}).to($('.container'), 0.4, {
backgroundColor: '#333333',
ease: Power1.easeOut
}, '-=0.4').to($('html'), 0.4, {
backgroundColor: '#999999',
ease: Power1.easeOut
}, '-=0.4').to($('.thanks'), 0.4, {
left: 200,
opacity: 1,
ease: Power4.easeOut
}).to($('.fa-heart'), 0.4, {
right: -210,
opacity: 1,
ease: Power4.easeOut
}, '-=0.4')
});
<script src="http://tympanus.net/Development/TextInputEffects/js/classie.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
html {
background: #FFA6A6;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
header {
top: 10px!important;
margin: 0!important;
padding:0!important;
}
body {
background: transparent;
}
.container {
background: #FF3131;
width: 800px;
height: 300px;
border-radius: 10px;
box-shadow: 0px 7px 31px -2px rgba(0,0,0,0.75);
overflow: visible;
position:relative;
}
.container input {
background: #fff;
}
.input__label-content {
color: #fff;
}
.input {
z-index:666;
&:nth-child(2),
&:nth-child(3) {
opacity: 0;
}
&:nth-child(3) {
top: -140px;
}
}
.fa-thumbs-up {
transform: scaleX(-1);
position: absolute;
right: -100%;
font-size: 3.5rem;
padding-top: 10px;
opacity:0;
}
.input-1 {
background: #EC0505;
.fa {
color: #EC0505;
}
input {
color: #EC0505;
}
}
.input-2 {
background: #EC6E05;
.fa {
color: #EC6E05;
}
input {
color: #EC6E05;
}
}
.input-3 {
background: #04BC04;
.fa {
color: #04BC04;
}
input {
color: #04BC04;
}
}
.thanks {
font-size: 3rem;
position: relative;
left:-260px;
top: 170px;
color: #fff;
z-index:420;
opacity:0;
}
.fa-heart {
font-size: 3rem;
position: relative;
right:-550px;
top: 170px;
z-index:200;
opacity: 0;
color: #fff
}
<link href="http://tympanus.net/Development/TextInputEffects/css/set2.css" rel="stylesheet" />
<link href="http://tympanus.net/Development/TextInputEffects/css/set1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway:200,500,700,800" rel="stylesheet" />
<link href="http://tympanus.net/Development/TextInputEffects/css/demo.css" rel="stylesheet" />
<link href="http://tympanus.net/Development/TextInputEffects/css/normalize.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.