This is a simple form with an awesome block animation in the background. Of course we need GASP to make it smoothly.
A Pen by Ignacio Correia on CodePen.
| #copy <a href="https://twitter.com/igcorreia" target="_blank">Crafted by: <b>@igcorreia</b><br/>Searching for a Dribbble invite :)</a> | |
| .mask | |
| .modal | |
| .circle(style='background: url("http://s3-us-west-2.amazonaws.com/s.cdpn.io/9589/profile/profile-512_1.jpg")') | |
| .login | |
| h1 Login | |
| form(method="post") | |
| input(type="text",name="u",placeholder="Username",required="required") | |
| input(type="password",name="p",placeholder="Password",required="required") | |
| button(type="submit",class="btn btn-primary btn-block btn-large") Let me in. | |
| - for (var x = 0; x < 10; x++) | |
| .vertical(class='vertical'+x) | |
| - var image = 0 | |
| - for (var y = 0; y < 6; y++) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/sports/'+y+'")', | |
| class='horizontal'+x+y+0) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/nature/'+y+'")', | |
| class='horizontal'+x+y+1) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/business/'+y+'")', | |
| class='horizontal'+x+y+2) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/people/'+y+'")', | |
| class='horizontal'+x+y+3) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/technics/'+y+'")', | |
| class='horizontal'+x+y+4) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/people/'+y+'")', | |
| class='horizontal'+x+y+5) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/fashion/'+y+'")', | |
| class='horizontal'+x+y+6) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/city/'+y+'")', | |
| class='horizontal'+x+y+7) | |
| .horizontal(style='background: url("//lorempixel.com/200/200/animals/'+y+'")', | |
| class='horizontal'+x+y+8) | |
| /* | |
| * Hi and Welcome to Codepen! | |
| * | |
| * My name is Ignacio and I am looking for a Dribble invitation. | |
| * Please contact me via twitter if you have 1, | |
| * I would like to have 1 hehe :) | |
| * | |
| * I will keep publishing examples to help push the web foward. | |
| * PLEASE Like, Heart or Share if you like, and don't forget to follow. | |
| * Thanks. | |
| * | |
| * Now let's animate it :) | |
| */ | |
| $(document).ready(function(){ | |
| var $v01 = $('.vertical0') | |
| ,$v02 = $('.vertical1') | |
| ,$v03 = $('.vertical2') | |
| ,$v04 = $('.vertical3') | |
| ,$v05 = $('.vertical4') | |
| ,$v06 = $('.vertical5') | |
| ,$v07 = $('.vertical6') | |
| ,$v08 = $('.vertical7') | |
| ,$v09 = $('.vertical8') | |
| ,$v10 = $('.vertical9') | |
| ,$login= $('.modal') | |
| ,speed = 60 | |
| ,tl = new TimelineLite({onComplete:restart}); | |
| tl.fromTo($v01,speed*0.70,{y:-250} ,{y:-750} ,'sync') | |
| .fromTo($v02,speed*0.75,{y:-950} ,{y:-1250},'sync') | |
| .fromTo($v03,speed*0.95,{y:-1000},{y:-1850},'sync') | |
| .fromTo($v04,speed*0.75,{y:-1250},{y:-1750},'sync') | |
| .fromTo($v05,speed*0.85,{y:-1100},{y:-2000},'sync') | |
| .fromTo($v06,speed*0.65,{y:-900},{y:-1950},'sync') | |
| .fromTo($v07,speed*0.70,{y:-1300},{y:-2100},'sync') | |
| .fromTo($v08,speed*0.95,{y:-850},{y:-1460},'sync') | |
| .fromTo($v09,speed*0.55,{y:-1000},{y:-1750},'sync') | |
| .fromTo($v10,speed*0.80,{y:-1200},{y:-1600},'sync') | |
| .fromTo($login,1,{scale:0,autoAlpha:0},{scale:1,autoAlpha:1, ease:Elastic.easeInOut},'sync'); | |
| tl.play(); | |
| function restart(){ | |
| tl.stop(); | |
| tl.restart(); | |
| } | |
| }); | |
| @link:#fff; | |
| @transition:all 0.3s ease-in-out 0s; | |
| @linkhover:#fff; | |
| body{ | |
| margin: 0;padding: 0;background: #000; | |
| color:#fff;height: 100%;min-height: 100%; | |
| overflow: hidden; | |
| font-family: 'Open Sans', sans-serif; | |
| #copy{ | |
| position:absolute; | |
| bottom:0; | |
| height: 40px; | |
| width: 100%; | |
| text-align:center; | |
| text-transform:uppercase; | |
| line-height: 14px; | |
| font-size:10px; | |
| font-weight:400; | |
| z-index:10; | |
| a{ | |
| color:@link; | |
| text-decoration:none; | |
| transition:@transition; | |
| b{ | |
| font-weight: 700; | |
| } | |
| &:hover{ | |
| color:@linkhover | |
| } | |
| } | |
| } | |
| .mask { | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| background: rgba(0, 0, 0, 0.75); | |
| z-index: 1; | |
| box-shadow: 0 0 500px #000 inset,0 0 300px #000 inset,0 0 200px #000 inset; | |
| .modal{ | |
| opacity:0; | |
| width: 300px; | |
| height: 320px; | |
| background:rgba(00,00,00,0.75); | |
| //background-image: -webkit-radial-gradient(cover, #DFDFDF, #B5B5B5); | |
| border-radius: 5px; | |
| box-shadow:/*0 0 100px #000000, 0 0 50px #000000,*/ 0 0 10px #000000, 0 0 0 1px rgba(47, 47, 47, 0.5) inset; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50% ,-50%); | |
| .circle{ | |
| background: #0d0d0d; | |
| width: 120px; | |
| height: 120px; | |
| border-radius:50%; | |
| position:relative; | |
| left:50%; | |
| overflow:hidden; | |
| transform: translate(-50% ,-50%); | |
| box-shadow: 0 0 8px #0a0a0a,0 0 0 1px #0a0a0a; | |
| background-repeat: no-repeat; | |
| background-position:center center; | |
| background-size:cover!important; | |
| } | |
| .login{ | |
| h1{ | |
| margin: 0; | |
| padding: 0; | |
| margin-top: -30px; | |
| text-align: center; | |
| font-family: arial; | |
| color: #fff; | |
| text-shadow: 0 0 10px rgba(0,0,0,0.3); | |
| letter-spacing: 1px; | |
| text-align: center; | |
| } | |
| input { | |
| width: 260px; | |
| margin-left: 10px; | |
| margin-top: 15px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: none; | |
| outline: none; | |
| padding: 10px; | |
| font-size: 13px; | |
| color: #fff; | |
| text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(0, 0, 0, 0.3); | |
| border-radius: 4px; | |
| box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2); | |
| -webkit-transition: box-shadow 0.5s ease; | |
| -moz-transition: box-shadow 0.5s ease; | |
| -o-transition: box-shadow 0.5s ease; | |
| -ms-transition: box-shadow 0.5s ease; | |
| transition: box-shadow 0.5s ease; | |
| } | |
| input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); } | |
| button{ | |
| background: transparent; | |
| text-align: center; | |
| border: solid 2px #fff; | |
| margin:25px 15px 0; | |
| width: 275px; | |
| color:#fff; | |
| line-height: 25px; | |
| border-radius:20px 20px 20px 20px; | |
| } | |
| } | |
| } | |
| } | |
| .vertical{ | |
| float:left; | |
| width: 10%; | |
| overflow: hidden; | |
| .horizontal{ | |
| width: 100%; | |
| height: 150px; | |
| position:relative; | |
| box-shadow: -1px 1px 0 1px rgba(00,00,00,1) inset, | |
| 0 0 50px rgba(00,00,00,0.5) inset; | |
| overflow: hidden; | |
| text-align:center; | |
| background-repeat: no-repeat; | |
| background-position:center center; | |
| background-size:cover!important; | |
| } | |
| } | |
| } | |