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
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 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
Fake Bank Statement
ReplyDeleteFake Bank Statement
Fake Bank Statement
Fake Bank Statement
Fake Bank Statement
Fake Bank Statement
Fake Bank Statement
Fake Bank Statement
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
ReplyDeleteOur experience with students enables us to determine the fastest and most effective teaching methods Online Quran Classes for Adults
ReplyDeleteNice
ReplyDeletecode vein crack
With special privileges and services, UEFA BET offers opportunities for small capitalists. Together ufa with the best websites that collect the most games With a minimum deposit starting from just 100 baht, you are ready to enjoy the fun with a complete range of betting that is available within the website
ReplyDeleteufabet , our one another option We are a direct website, not through an agent, where customers can have great confidence without deception The best of online betting sites is that our Ufa will give you the best price
หาคุณกำลังหาเกมส์ออนไลน์ที่สามารถสร้างรายได้ให้กับคุณ เรามีเกมส์แนะนำ เกมยิงปลา รูปแบบใหม่เล่นง่ายบนมือถือ คาสิโนออนไลน์ บนคอม เล่นได้ทุกอุปกรณ์รองรับทุกเครื่องมือ มีให้เลือกเล่นหลายเกมส์ เล่นได้ทั่วโลกเพราะนี้คือเกมส์ออนไลน์แบบใหม่ เกมยิงปลา
อีกทั้งเรายังให้บริการ เกมสล็อต ยิงปลา แทงบอลออนไลน์ รองรับทุกการใช้งานในอุปกรณ์ต่าง ๆ HTML5 คอมพิวเตอร์ แท็บเล็ต สมาทโฟน คาสิโนออนไลน์ และมือถือทุกรุ่น เล่นได้ตลอด 24ชม. ไม่ต้อง Downloads เกมส์ให้ยุ่งยาก ด้วยระบบที่เสถียรที่สุดในประเทศไทย
services delivery model
ReplyDeleteWhat are the benefits of Managed IT Services?
The latest technology: With a managed service provider, you’ll ensure that your business consistently uses the latest technology. IT Managed Service Providers or MSPs continually update your tech services, ensuring that your organization remains future proof.
aşk kitapları
ReplyDeleteyoutube abone satın al
cami avizesi
cami avizeleri
avize cami
no deposit bonus forex 2021
takipçi satın al
takipçi satın al
takipçi satın al
takipcialdim.com/tiktok-takipci-satin-al/
instagram beğeni satın al
instagram beğeni satın al
btcturk
tiktok izlenme satın al
sms onay
youtube izlenme satın al
no deposit bonus forex 2021
tiktok jeton hilesi
tiktok beğeni satın al
binance
takipçi satın al
uc satın al
sms onay
sms onay
tiktok takipçi satın al
tiktok beğeni satın al
twitter takipçi satın al
trend topic satın al
youtube abone satın al
instagram beğeni satın al
tiktok beğeni satın al
twitter takipçi satın al
trend topic satın al
youtube abone satın al
takipcialdim.com/instagram-begeni-satin-al/
perde modelleri
instagram takipçi satın al
instagram takipçi satın al
takipçi satın al
instagram takipçi satın al
betboo
marsbahis
sultanbet
The official app of the popular video website YouTube where you can find millions of videos. You can also upload your own video and subscribe to other YouTube channels. Also, You can search and watch your desired video. Moreover, YouTube recommends many videos on its homepage based on your interests to get you started. click here read more
ReplyDeleteSimply navigate to Control Panel > System and Security > Windows Firewall (or just type in “Firewall” in the Start Menu search box). In the Firewall control panel, select “Allow an app or feature through the Windows Firewall”; the link is seen in light blue in the screenshot above. For Completed Information visit my blog allow minecraft through firewall
ReplyDeleteThank you for sharing this wonderful blog with us.
ReplyDeleteTamil novels pdf
Ramanichandran novels PDF
srikala novels PDF
Mallika manivannan novels PDF
muthulakshmi raghavan novels PDF
Infaa Alocious Novels PDF
N Seethalakshmi Novels PDF
Sashi Murali Tamil Novels
스웨디시 마사지는 여러 아시아 국가, 특히 한국에서 사용되는 고전적인 마사지 기술입니다. 앞서 언급한 많은 이론들은 마사지 부위에 더 많은 압력이 가해질수록 마사지가 더 효과적이라는 생각에 근거합니다. 또한 스웨디시 마사지에는 신체 이완, 통증 감소, 통증 감소, 혈류 개선, 순환 개선, 이완 개선, 근육 긴장 감소 등 여러 이점이 있습니다.
ReplyDeleteI have a hard time describing my thoughts on content, but I really felt I should here. Your article is really great. I like the way you wrote this information Landlord
ReplyDelete경마사이트
경마
This is a great article thanks for sharing this informative information. I will visit your blog regularly for some latest post. I will visit your blog regularly for Some latest post. 카지노사이트
ReplyDeleteWe use our first-class military and security expertise to build individually tailored guarding bodyguard company
ReplyDeleteand intelligence operations for families, individuals, and businesses with top-notch risk control strategies.
Mua vé tại đại lý vé máy bay Aivivu, tham khảo
ReplyDeletevé máy bay đi Mỹ hạng thương gia
khi nào có vé máy bay từ mỹ về việt nam
khi nào mở lại đường bay nhật bản việt nam
vé máy bay khứ hồi từ đức về việt nam
vé máy bay từ canada về việt nam giá rẻ
Các chuyến bay từ Incheon về Hà Nội hôm nay
chuyen bay chuyen gia ve viet nam
Thanks for your efforts in sharing this post with us. This was really awesome. kindly keep continuing the great work...
ReplyDeletemoving services near me
commercial movers near me
house movers ontario
self storage company
wonderful article contains lot of valuable information. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
ReplyDeleteAlignment near me
roadside assistance services
Trailer repair
Trailer repair shop
Truck towing near me
mobile truck repair
Krasota Health and Beauty Salon, health and beauty is the priority. Since opening the salon, the focus has been to match each client up with the right combination of appropriate products and services to help them look and feel their best.
ReplyDeleteBeauty Salon Near Me
Piercing Near Me
Laser Hair Removal Near Me
Waxing Near Me
Eyelash Lift and Tint Near Me
Microblading Near Me
Permanent Makeup Near Me
Microneedling Near Me
Cryotherapy Near Me
Microdermabrasion Near Me
Waxing Near Me
Can yo please give me working link of harry potter mod apk unlimited gems game?
ReplyDeleteAn employee scheduling software that offers of saia employee login online employee scheduling is a wonderful tool for small and medium sized businesses. The software allows small business owners and managers to focus their full attention on their core operations.
ReplyDeleteMuch obliged for sharing this brilliant substance. its extremely fascinating. Numerous web journals I see these days don't actually give whatever pulls in others however the manner in which you have plainly clarified everything it's truly awesome. There are loads of posts But your method of Writing is so Good and Knowledgeable. continue to post such helpful data and view my site too...
ReplyDeleteHow to make a paper airplane | Origami paper plane | Boomerang Airplane | how to make a eagle paper airplane | Best paper airplane design for distance and speed | Nakamura lock paper airplane
Eagle paper plane | Zazoom
Hello, this is very useful information. After reading your article, I am very inspired to do the same as you. For those who are interested, you can visit India. An e visa to India is required for travel in India. It is possible to apply for an India visa online through evisa. I found this site & read about it and then used it. I received my Indian visa online in just a few days.
ReplyDeleteSuch an interesting article here.I was searching for something like that for quite a long time and at last I have found it here. rip wheeler jacket
ReplyDeleteI am glad to be here and read your very interesting article, it was very informative and helpful information for me. keep it up. luke skywalker bespin jacket
ReplyDeleteI cant taking office on focusing long adequate to research; lots less write this rosy of article. Youve outdone your self as quickly as this cloth truely. it's miles one of the greatest contents. https://wishesquotz.com/birthday-wishes-for-brother/
ReplyDeleteMmorpg oyunları
ReplyDeleteInstagram Takipçi Satın Al
tiktok jeton hilesi
TİKTOK JETON HİLESİ
antalya saç ekimi
referans kimliği nedir
instagram takipçi satın al
metin2 pvp serverlar
Takipci Satın Al
ทางเข้า joker เป็นอีกหนึ่งช่องทางการทำเงินออนไลน์ สมัยใหม่ยระดับการทำเงินออนไลน์ ที่มีเงินรางวัลโบนัสที่แตกง่าย เงินรางวัลสูงโอกาสการได้รับตัวคูณเงินรางวัลมากถึง x 5000 เท่าผ่านทางเว็ป http://www.jokerslot.ninja/login-joker/
ReplyDeletethanks for sharing valuable information
ReplyDeletetips to lose facial fat
I’ve been surfing online for more than 4 hours today, yet I never found any interesting articles like yours. It’s pretty worth it for me. We are happy to announce that Myanmar evisa are now available to travelers worldwide with effect from 1st April 2022. I hope you are excited to explore the untouched beauty of Myanmar.
ReplyDeleteสล็อตแมชชีน Pgslot ออนไลน์ที่เติบโตอย่างแข็งแกร่งในยุคนี้ มีเกมให้เลือกเล่นมากมาย พร้อมอัพเดทเกมใหม่อย่างต่อเนื่อง มีรางวัลมากมาย และรางวัลใหญ่มักจะแตกง่าย รวมทั้งให้ผู้เล่นได้ใช้บริการ 24ชั่วโมง ผ่าน https://www.pgslot168game.com/ ผ่านสล็อตออนไลน์โดยตรงที่คาสิโนออนไลน์ PG Slots ที่รวบร่วมเกมมาไว้ให้เล่นแบบเยอะแยะ
ReplyDeletesmm panel
ReplyDeletesmm panel
İs İlanlari Blog
İnstagram Takipçi Satın Al
Hirdavatci Burada
beyazesyateknikservisi.com.tr
servis
tiktok para hilesi
Very Nice Blog..Thanks for sharing with us
ReplyDeleteWeb Designing Company in Chennai
SEO Services
Digital Marketing Company in Chennai
Mobile App Development
Hurry Up Get Smart Home Automation Gadgets!
ReplyDeleteProduct Name:
Centralite Temperature and Humidity Sensor - Ezlo
Product Description:
By detecting changes in in-home temperature and humidity, Centralite's Temperature & Humidity Sensor can add a whole range of climate control features to
Tags:
ezlo plus, ezlo secure, Humidity Sensor, Sensors, Temperature Sensor, Zigbee, Centralite Store, Door & Window Sensors, Ezlo 3-Day Sale, Humidity Sensors, Sensors, Temperature Sensors
Your article is very informative and useful... This hit me directly… Thanks for sharing... I would like to tell you that The travelers with a e visa to Azerbaijan can enter the country via all sea, air, and land ports. Click and check out for find more details about evisa and process.
ReplyDeleteI am very happy to see this excellent blog with us.
ReplyDeleteIdm Crack
Highly appreciated for the uniqueness of the content. This perhaps makes readers excited to stick with the topic. Students would surely thank the blogger for coming up with innovative content to keep the readers updated to stand out from the competition.
ReplyDeleteBY
goggles4u eyeglasses, reading glasses online uk or cheap reading glasses uk
ReplyDeleteThe most popular pos system for wine and liquor establishments is Atlanticsystem. The most effective point of sale for a liquor business.
liquor store inventory management systems allow you to measure every drop of alcohol flowing through your premises, every minute and every day. It is easy to set up and allows staff to pour, while also allowing you to manage your liquor costs.
All systems can be interfaced with the existing POS system in a way that is simple, fast, accurate, and invisible to customers. Real-time reports provide visibility into stock levels and stock movements.
Atlantic System is the top point-of-sale system for liquor stores. Atlanticsystem is the most often used POS software for liquor stores.
ผู้บริการสล็อตออนไลน์ใหม่ปัจจุบันของปี 2022 กับระบบใหม่ที่ผ่านการพัฒนาที่เยี่ยมที่สุด พร้อมเปิด เกมสล็อต ออนไลน์ ได้เงินจริง ทุกค่ายดังของเว็บไซต์ ทางเข้าpigspin จัดเต็มไปด้วยเกมยอดนิยมที่มีคนนิยอมเล่นเยอะๆ มีระบบระเบียบออโต้ ฝาก-ถอน อัตโนมัติ ที่ล้ำยุค พร้อมให้บริการตรวจ 1 วัน สามารถทำรายการเพิ่มผ่านทรูวอเลท
ReplyDeleteวันนี้พวกเรามีความรู้และความเข้าใจเคล็ดวิธีดีๆวิชาความรู้ดีๆมานำเสนอให้คนที่ได้เข้ามาเล่นได้มีความรู้ความเข้าใจก่อนพนันต่างๆ
Rice Purity Test is a 100-question survey that assesses the participants' supposed degree of innocence in worldly matters.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteVery informative post thanks for sharing
ReplyDeleteSai Satcharitra Pdf
Get anyunlock download torrent serial, a powerful tool that allows you to unlock various iOS devices, bypass screen passcodes, and recover lost passwords effortlessly.
ReplyDeleteWith every word you pen, you breathe life into the pages, crafting worlds of wonder and magic. I also want to share some information with you. For seamless travel to Bahrain, complete your journey with ease through the efficient Bahrain e Visa application payment system. Simplify your visa process with secure transactions. Experience convenience and reliability with Bahrain visa application payment, ensuring a hassle-free start to your adventure.
ReplyDelete