For this task, I wanted to make some animated smoke come out of the frogs' rocket ship before the launch. My style is mostly just simple geometric shapes arranged to look like things, so using circular DIV elements to look like puffs of smoke was fine with me. I found a great starting point by Andrea Verlicchi on CodePen, and then modified it for my comic.
Here's the basic idea - puffs of smoke emanate from a given source element. They move downward and off to the side while fading away.
The puffs of smoke will be represented by rounded SPAN elements, with this CSS applied to them:
span.smokepuff { display: block; position: absolute; bottom: -35px; left: 50%; margin-left: -20px; height: 0px; width: 0px; border: 35px solid #4b4b4b; border-radius: 35px; left: -14px; opacity: 0; transform: scale(0.2); }
The above styling just makes them round, grey, and positioned absolutely in their container. I also have two animation keyframes defined, one for the down-and-left movement and one for the down-and-right movement:
@keyframes smokeL { 0% { transform: scale(0.2) translate(0, 0); } 10% { opacity: 1; transform: scale(0.2) translate(0, 5px); } 100% { opacity: 0; transform: scale(1) translate(-50px, 80px); } } @keyframes smokeR { 0% { transform: scale(0.2) translate(0, 0); } 10% { opacity: 1; transform: scale(0.2) translate(0, 5px); } 100% { opacity: 0; transform: scale(1) translate(50px, 80px); } }
The above keyframe definitions define an animation that will move the smoke puffs lower by 80 pixels and 50 pixels to either side while at the same time scaling them up and fading them out. It defines 3 steps: 0% (the start), 10% (moved a little down), and 100% (moved completely down and over). There's one for the left, smokeL, and one for the right, smokeR.
Note: if you care about being compatible with slightly older browsers, you would want copies of these with @-moz-keyframes and @-webkit-keyframes as the names as well as adding -moz-transform and -webkit-transform to them all! I left that out here to keep the example simpler!
I said this was pure CSS3 animation, but there's still a little JavaScript involved. It doesn't really do the animating, but I use some code to generate the puffs in the first place. Something like this:
function createSmoke(time, num) { var timeGap = (time / num); for( var i = 0; i < num; i++) { var delay = (timeGap * i) + 's'; var aniName = "smokeL"; if (((i+1) % 2) == 0) { aniName = "smokeR"; } var aniStyle = "animation: " + aniName + " " + duration + " " + delay + " infinite"; $('#smoker').append('<span class="smokepuff" style="' + aniStyle + '"></span>'); } }
When this function is called, you give it the length of the animation and the number of puffs of smoke you want. It figures out how much of a delay there should be between each puff's animation starting based on those two values. For example, if you want the animation to run 5 seconds and have 10 puffs of smoke, the first puff would have no delay, the second would have a delay of ( 5 / 10 ) * 1, the third a delay of (5 / 10 ) * 2, and so on. In this example, that just means add a half-second delay for each puff you generate. Also, each time through the loop, it alternates between the smokeL and smokeR animations so that every other puff moves in the opposite direction. One final piece of the total animation style is to set the repeat-count to infinite, so the puffs keep on coming! The function generates new SPAN tags with these animation styles applied and appends them to the parent element, which here is named smoker. It's just a DIV somewhere on the page - all the puffs of smoke will appear to come out of it.
![]() |
The finished animation. Don't miss it! |
I think the effect turned out great. Even though I used a little JavaScript to create the elements, doing all the animation with JavaScript would have been much, much more complicated. I may consider replacing all the old JavaScript-powered animation on Amphibian.com with CSS animation, and fix up my animation editor to go with it!
Now don't miss the smoke effect in today's comic! If you're reading this on the publication day (16 May 2016) the countdown to launch will be live! That means the last frame of the comic will change and do different things right up to the launch time! Keep watching it!
![]() |
Amphibian.com comic for 16 May 2016 |
Thanks for sharing this great blog. That is very interesting to read and I am always searching for informative blog like this.
ReplyDeleteHtml5 Training in Chennai
DOT NET Training in Chennai
Best DOT NET Training in Chennai
dot net coaching centers in chennai
best .net training institute in chennai
dot net training center in chennai
QTP Training in Chennai
LoadRunner Training in Chennai
IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes. IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble.Final Year Projects for CSE
DeleteSpring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining .
Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai
The Angular Training covers a wide range of topics including Angular Directives, Angular Services, and Angular programmability.Angular Training
This article is a very interesting and brief explanation about this topic. I eagerly waiting for your next post...
ReplyDeleteSpark Training in Chennai
Spark Training Academy
Oracle Training in Chennai
Excel Training in Chennai
Oracle DBA Training in Chennai
Embedded System Course Chennai
Tableau Training in Chennai
Power BI Training in Chennai
Social Media Marketing Courses in Chennai
Awesome informations that you have shared for us.I eagerly waiting for more updates in future.
ReplyDeleteHadoop Training in Chennai
Big data training in chennai
Big Data Course in Chennai
JAVA Training in Chennai
Python Training in Chennai
Selenium Training in Chennai
hadoop training in velachery
big data training in velachery
Hadoop Training in Adayar
Big Data Training in Adayar
Thanks for your efforts in sharing this post with us. This was really awesome. kindly keep continuing the great work.
ReplyDeleteSpoken English Classes in Chennai
Top 10 Spoken English Classes in Chennai
Best IELTS Coaching in Chennai
IELTS Coaching Centre in Chennai
English Classes in Mumbai
English Speaking Classes in Mumbai
Best IELTS Coaching in Mumbai
IELTS Coaching in Mumbai
I have been reading for the past two days about your blogs and topics, still on fetching! Wondering about your words on each line was massively effective. Techno-based information has been fetched in each of your topics. Sure it will enhance and fill the queries of the public needs. Feeling so glad about your article. Thanks…!
ReplyDeletebest software testing training in chennai
best software testing training institute in chennai with placement
software testing training
courses
software testing training and placement
software testing training online
software testing class
software testing classes in chennai
best software testing courses in chennai
automation testing courses in chennai
digital marketing training in chennai
digital marketing classes in chennai
digital marketing course in chennai
digital marketing institute in chennai
digital marketing training centers in chennai
digital marketing training institute in chennai
best digital marketing course in chennai
I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here regularly. I am quite sure I will learn much new stuff right here! Good luck for the next!
ReplyDeleteWeb Designing Training Institute in Chennai | web designing and development course | web design and programming courses
This is an fabulous article, please try to upload these such article hereafter.
ReplyDeleteLearn Best Youtube Marketing Course Training in Chennai
Learn Best AWS Developer Course Training in Chennai
Learn Best AWS Architect Course Training in Chennai
Learn Best AWS Cloud Practitioner Certification Course Training in Chennai
You are providing a post is very useful for develop my knowledge and I learn more info from your blog.
ReplyDeleteDigital Marketing Course In Kolkata
Web Design Course In Kolkata
SEO Course In Kolkata
Nice! you are sharing such helpful and easy to understandable blog. i have no words for say i just say thanks because it is helpful for me.
ReplyDeleteDot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery
I am amazed by your well comprehensible write-up. Your article seems to be the best guide for the readers. I thank you for being instructive and kind in this write-up. Web Designing Course Training in Chennai | Web Designing Course Training in annanagar | Web Designing Course Training in omr | Web Designing Course Training in porur | Web Designing Course Training in tambaram | Web Designing Course Training in velachery
ReplyDeleteI was following your blog regularly and this one is very interesting and knowledge attaining. Great effort ahead. you can also reach us for web development company in chennai website design company in chennai
ReplyDeleteFake Bank Statement
ReplyDeleteFake Bank Statement
Fake Bank Statement
Fake Bank Statement
Fake Bank Statement
Fake Bank Statement
Fake Bank Statement
Fake Bank Statement
Very interesting blog. Many blogs I see these days do not really provide anything that attracts others, but believe me the way you interact is literally awesome.You can also check my articles as well.
ReplyDeleteSecurity Guard License
Ontario Security License
Security License Ontario
Security License
Thank you..
Freelance maintenance technicians also benefit from establishing relationships with multiple clients. Working as a freelancer, you’ll gain employment experience with a variety of businesses, boosting your overall skill set and providing you with more work opportunities in the future.
ReplyDeletemaintenance technician
With such video you can be popular on tiktok. Why don't you try? Post some funny video and buy some first likes from this site https://soclikes.com/buy-tiktok-likes and see where it'll go
ReplyDeleteThe Article is good, really helpful and knowledge attaining
ReplyDeleteSofa Cleaning Services in Chennai
Sofa Renovation in Chennai
Sofa Repair in Chennai
Sofa Upholstery in Chennai
Car Seat Upholstery in Chennai
Excellent blog thanks for sharing the valuable information..it becomes easy to read and easily understand the information.
ReplyDeleteUseful article which was very helpful. also interesting and contains good information.
to know about python training course , use the below link.
Python Training in chennai
Python Course in chennai