Skip to main content

log in in animation with css

Percy the penguin - login animation with CSS



See the Pen Percy the penguin by Mel (@Mellydevs) on CodePen.
I was inspired by this article on medium to make a login animation when the user clicks on the password form input. As you can see from this article it can be very cool and unique I aimed to do mine in CSS and SVG.

I plan to make this more complex in the future and will write an update when I do. 




Step 1 Make Percy
Simply I made Percy in sketch using shapes and Vectors (ie pen tool) and made sure I named the arms so they were easy to find in the SVG code. 

Step 2 Animate it
Make a container for all the elements.
Add in the input field above the SVG so that I can use the + in scss to select element when we use :focus on the input.
Animate the arms from the bottom and then fade them in to make it look a wee bit nicer and land over the eyes.
This ends up being a bit more of a 'pika boo' animation rather than covering the eyes but I think it looks cute so I kept it I plan to make more complex ones in the future anyway.

Thats it! Thanks for reading. 


Labels:

Comments

Post a Comment

Popular posts from this blog

Google daydream and all its awesomeness.

Google Daydream  At Google io in 2016,  Google announced: Google daydream. A platform that can bring VR to everyone throughout the use of mobile phones and their new viewer. I was so inspired watching this I felt a need to make Daydream content. However to be able to develop this you need a Google view (£69 from Google store) and a daydream ready phone (£599 and up from Google store). I still plan to do this and will be buying a red viewer very soon (Im so excited XD) and will do an unboxing so look out for that! Then I will be saving up for the pixel phone (which is beautiful) and then onward with making awesomeness. Developing awesomeness  Its not just awesome because of the new viewer and the new pixel phone but the amount of help from google for developers is amazing they already have SDK kits for Android, Unity and Unreal. Unity and Unreal and two powerful game engines both have pros and cons but both are great for making games. I have experie...
Post a Comment
Read more

Ionic RSS feed using Feednami

Tutorial of how to make a RSS feed using Feednami which is an alternative to google api which no longer works. This is a basic example and can be improved. First go ahead and make a new ionic project $ npm install -g cordova ionic $ ionic start exampleProject blank Now find index.html and insert... <script src="https://storage.googleapis.com/feednami-static /js/feednami-client-v1.0.1.js"></script> Into the header, then in <ion-content> below Ionic Blank Starter insert a new div <div id ="feed" ng-controller="feedCtrl"> </div> Open app.js, now we are going to make the controller from Feednami that will get our rss feed. .controller('feedCntl', function(){ var url = 'http://daringfireball.net/feeds/articles' feednami.load(url,function(result){ if(result.error){ console.log(result.error) } else{ var entries = result.feed.entries for(var i = 0; i < entri...
Post a Comment
Read more

Poker chip CSS only checkbox

For this Sunday Funday project, I decided to make a poker chip checkbox out of pure CSS. DEMO The idea is that it will flip on its right edge like when people flip chips between their fingers. This can be improved by using images to get a correct dashed edge or make it more lifelike but this is CSS only. Tutorial 1. The markup We need a container to set the background and the size and width, we need the label to be clickable anywhere, input for the checkbox, top and bottom of the chip. <div class="container"> <label for="chip-checkbox"></label> <input type="checkbox" name="chip" value="1" id="chip-checkbox"> <div class="bottom-side"></div> <div class="top-side"></div> </div> 2. Hide the input input { visibility: hidden; } 3. Set the width and height of the background/container .container { width: 80px; height: 40px; bord...
Post a Comment
Read more