telegram-crawler/data/web/telegram.org/blog/animated-backgrounds.html
2024-08-14 11:55:26 +00:00

304 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<title> Animated Backgrounds</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content=" Animated Backgrounds">
<meta property="og:image" content="https://telegram.org/file/464001689/5/LAdUj8JXG_c.61616/b196801953bc54ecd5">
<meta property="og:site_name" content="Telegram">
<meta property="og:description" content="In addition to Group Video Calls, this update adds animated backgrounds and message sending animations, as well as a new menu button for bots, new ways to import stickers, reminders to help keep your account safe, and more.">
<meta property="article:published_time" content="2021-06-25T12:25:47+00:00"><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:image" content="https://telegram.org/file/464001689/5/LAdUj8JXG_c.61616/b196801953bc54ecd5" />
<meta property="fb:app_id" content="254098051407226">
<meta property="vk:app_id" content="3782569">
<meta name="apple-itunes-app" content="app-id=686449807">
<meta name="telegram:channel" content="@telegram">
<link rel="canonical" href="https://telegram.org/blog/animated-backgrounds" />
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
<link href="/css/telegram.css?240" rel="stylesheet" media="screen">
</head>
<body class="preload">
<div id="fb-root"></div>
<div class="tl_page_wrap">
<div class="tl_page_head navbar navbar-static-top navbar navbar-tg">
<div class="navbar-inner">
<div class="container clearfix">
<ul class="nav navbar-nav navbar-right"><li class="dropdown top_lang_select"><a class="dropdown-toggle" onclick="return dropdownClick(this, event)" href="#"><i class="dev_top_lang_icon"></i>EN <b class="minicaret"></b></a>
<ul class="dropdown-menu"><li class="chosen "><a href="?setln=en">English</a></li><li class="long "><a href="?setln=id">Bahasa Indonesia</a></li><li class="long "><a href="?setln=ms">Bahasa Melayu</a></li><li class=""><a href="?setln=de">Deutsch</a></li><li class=""><a href="?setln=es">Español</a></li><li class=""><a href="?setln=fr">Français</a></li><li class=""><a href="?setln=it">Italiano</a></li><li class=""><a href="?setln=nl">Nederlands</a></li><li class=""><a href="?setln=uz">Ozbek</a></li><li class=""><a href="?setln=pl">Polski</a></li><li class="long "><a href="?setln=pt-br">Português (Brasil)</a></li><li class=""><a href="?setln=tr">Türkçe</a></li><li class=""><a href="?setln=be">Беларуская</a></li><li class=""><a href="?setln=ru">Русский</a></li><li class=""><a href="?setln=uk">Українська</a></li><li class=""><a href="?setln=ar">العربية</a></li><li class=""><a href="?setln=fa">فارسی</a></li><li class=""><a href="?setln=ko">한국어</a></li></ul></li><li class="navbar-twitter hidden-xs"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i> Twitter</a></li></ul>
<ul class="nav navbar-nav">
<li class=""><a href="/">Home</a></li>
<li class=""><a href="/faq">FAQ</a></li>
<li class=""><a href="/apps">Apps</a></li>
<li class="hidden-xs "><a href="//core.telegram.org/api">API</a></li>
<li class="hidden-xs "><a href="//core.telegram.org/mtproto">Protocol</a></li>
</ul>
</div>
</div>
</div>
<div class="container clearfix tl_page_container ">
<div class="tl_page">
<div class="tl_contest_page_wrap">
<div class="tl_blog_side_blog"><div class="side_blog_wrap">
<div class="side_blog">
<a href="/blog" class="side_blog_header">Recent News</a>
<div class="side_blog_entries">
<a href="/blog/superchannels-star-reactions-subscriptions" class="side_blog_entry">
<div class="side_blog_date">Aug 14</div>
<div class="side_blog_title">Super Channels, Star Reactions and Subscriptions</div>
</a><a href="/blog/w3-browser-mini-app-store" class="side_blog_entry">
<div class="side_blog_date">Jul 31</div>
<div class="side_blog_title">Telegram Browser, Mini App Store, Gifting Stars and More</div>
</a><a href="/blog/mini-app-bar-paid-media-and-more" class="side_blog_entry">
<div class="side_blog_date">Jun 30</div>
<div class="side_blog_title">Mini App Bar, Paid Media, Story Search &amp; More</div>
</a><a href="/blog/telegram-stars" class="side_blog_entry">
<div class="side_blog_date">Jun 6</div>
<div class="side_blog_title">Telegram Stars: Pay for Digital Goods and More</div>
</a><a href="/blog/message-effects-and-more" class="side_blog_entry">
<div class="side_blog_date">May 31</div>
<div class="side_blog_title">Message Effects, Hashtag Search, and More</div>
</a><a href="/blog/my-profile-and-15-more" class="side_blog_entry">
<div class="side_blog_date">Apr 25</div>
<div class="side_blog_title">My Profile, Recommended Channels and 15 More Features</div>
</a><a href="/blog/sticker-maker" class="side_blog_entry">
<div class="side_blog_date">Apr 14</div>
<div class="side_blog_title">Sticker Editor — Create Your Own Stickers</div>
</a>
</div>
</div>
</div></div>
<div id="dev_page_content_wrap" class=" ">
<div class="dev_page_bread_crumbs"></div>
<h1 id="dev_page_title"> Animated Backgrounds</h1>
<div id="dev_page_content"><div class="blog_side_image_wrap">
<picture class="dev_page_tgsticker blog_side_image js-tgsticker_image" style="width:160px;"><div style="padding-top:100%"></div><source type="application/x-tgsticker" srcset="/file/464001496/1/CQXTxZ_iHgU.9232/f78537028f317b4df9"><img src="/file/464001496/2/veuCIbdWnLc.73728.png/324328058163f218f7" /></picture>
</div>
<div class="blog_wide_image">
<a href="/file/464001871/4/7u0NxpdnH5o.185980/5122199e6534c7be30" target="_blank"><img src="/file/464001689/5/LAdUj8JXG_c.61616/b196801953bc54ecd5" srcset="/file/464001871/4/7u0NxpdnH5o.185980/5122199e6534c7be30, 1200w" title="It is not the spoon that swirls." alt="Introducing animated backgrounds and more"/></a>
</div>
<p>In addition to <a href="https://telegram.org/blog/group-video-calls">Group Video Calls</a>, this update adds <strong>animated backgrounds</strong> and <strong>message sending animations</strong>, as well as a new <strong>menu button for bots</strong>, new ways to <strong>import stickers</strong>, reminders to help keep your account safe, and more.</p>
<h3><a class="anchor" name="animated-backgrounds" href="#animated-backgrounds"><i class="anchor-icon"></i></a>Animated Backgrounds</h3>
<p>Meet <strong>animated backgrounds</strong> for chats first time in a messaging app! These multi-color gradient wallpapers are generated <strong>algorithmically</strong> and move beautifully every time you send a message.</p>
<div class="blog_video_player_wrap" style="max-width: 400px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001418/5/7BRPli9E-I8.163174/b4aab36dc2b864914d" style="max-width: 400px;" title="Gradients as in GRAND." alt="Several examples of animated backgrounds">
<source src="/file/464001887/2/N7qFVtGyero.4377739.mp4/a94c271f54bc8aad2b" type="video/mp4">
</video>
</div>
<p>Our designers added these smooth, energy-efficient animations to all <strong>default themes</strong>.</p>
<blockquote>
<p>You can find more animated backgrounds in Settings. <strong>Android:</strong> <em>Chat Settings &gt; Change Chat Background</em>. <strong>iOS:</strong> <em>Appearance &gt; Chat Background</em>.</p>
</blockquote>
<h3><a class="anchor" name="creating-amp-sharing-backgrounds" href="#creating-amp-sharing-backgrounds"><i class="anchor-icon"></i></a>Creating &amp; Sharing Backgrounds</h3>
<p>In case the default options are not enough, it&#39;s super-easy to create your own animated backgrounds. Choose <strong>three</strong> or <strong>four colors</strong> to unlock the animation, then add an optional <strong>pattern</strong> for extra style.</p>
<div class="blog_video_player_wrap" style="max-width: 400px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001500/3/0BsYrZvg1uM.296162/b9b049adbd5b2b1414" style="max-width: 400px;" title="Swirling colors proudly brought to you by the Hypnotoad!" alt="Updated theme editor">
<source src="/file/464001999/3/KR1U9m-SLiM.6345965.mp4/1865de18d88b360b6f" type="video/mp4">
</video>
</div>
<p>When ready, <strong>share</strong> your animated wallpapers with friends and family to upgrade them to a new level of messaging experience.</p>
<h3><a class="anchor" name="message-sending-animations" href="#message-sending-animations"><i class="anchor-icon"></i></a>Message Sending Animations</h3>
<p><strong>Stickers and emoji</strong> now seamlessly hop from your keyboard into the chat with lightweight <strong>animations</strong> that wont affect your battery.</p>
<p>On iOS, this also applies to <strong>media</strong> you send from the attachment panel, and even <strong>text messages</strong>. Your input text smoothly transforms into the message bubble as it flies into the chat.</p>
<div class="blog_video_player_wrap" style="max-width: 400px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001610/1/r8FLrKjHzUI.58945/59f9de158be4e9fca7" style="max-width: 400px;" title="Find a typo in this video to receive an angry look from the designer who won't re-make the whole thing AGAIN." alt="New message sending animations on iOS">
<source src="/file/464001452/3/6ecYqLIIw5s.4667273.mp4/4850b7dcacd3102f52" type="video/mp4">
</video>
</div>
<h3><a class="anchor" name="ios-semi-transparency-amp-new-app-icons" href="#ios-semi-transparency-amp-new-app-icons"><i class="anchor-icon"></i></a>iOS: Semi-Transparency &amp; New App Icons</h3>
<p>On iOS, backgrounds are now <strong>partially visible</strong> through the header and the footer in chats, giving the interface a classy new look.</p>
<p>Two new gradient <strong>app icons</strong> are available in <em>Settings &gt; Appearance</em> in addition to the classic blue and black versions:</p>
<div class="blog_image_wrap blog_medium_image_wrap">
<a href="/file/464001538/1/CQLVwNFon-A.41944/dd78b583b41efb9064" target="_blank"><img src="/file/464001538/1/CQLVwNFon-A.41944/dd78b583b41efb9064" title="Isn't that what they call an 'iconic' update?" alt="Two new app icons on iOS" srcset="/file/464001538/1/CQLVwNFon-A.41944/dd78b583b41efb9064 , 2x" /></a>
</div>
<p>We also added a <strong>Telegram Features</strong> button at the bottom of the Settings menu on iOS, which opens the <a href="https://t.me/TelegramTips/233">Telegram Tips</a> channel. Tips are available in <a href="https://t.me/TelegramTips/266">10 languages</a>, including the newly added <a href="https://t.me/TelegramTips/266">Turkish version</a>.</p>
<blockquote>
<p>The same button was already on Android, you can find it in the <a href="https://telegram.org/blog/payments-2-0-scheduled-voice-chats#tips-and-new-android-animations">side menu</a>.</p>
</blockquote>
<h3><a class="anchor" name="login-info-reminders" href="#login-info-reminders"><i class="anchor-icon"></i></a>Login Info Reminders</h3>
<p>It is essential to keep your Telegram <strong>phone number</strong> up to date to ensure you can always log in to your account. If your phone number has changed, you can quickly update it right from the new <strong>reminder</strong> in Settings on iOS.</p>
<div class="blog_image_wrap blog_medium_image_wrap">
<a href="/file/464001302/2/lWCyANgnMiw.85187/c7d5b7cd3f93aafff4" target="_blank"><img src="/file/464001302/2/lWCyANgnMiw.85187/c7d5b7cd3f93aafff4" title="Three things to remember: 1. Think big thoughts 2. Laugh a lot 3. Always keep your Telegram phone number up to date. " alt="Reminder about keeping your phone number up to date" srcset="/file/464001302/2/lWCyANgnMiw.85187/c7d5b7cd3f93aafff4 , 2x" /></a>
</div>
<p>Android users will get these reminders in the next update, for now they can simply update their phone number by <strong>tapping</strong> on it in Settings.</p>
<!--Another reminder will help you practice your **Two-Step Verification password**.-->
<p>Users on all platforms will receive a <strong>notification</strong> from Telegram each time their Two-Step Verification settings are <strong>changed</strong>.</p>
<blockquote>
<p>Two-Step Verification on Telegram lets you set up an <strong>additional password</strong>, which you will need to enter every time you log in to your account.</p>
</blockquote>
<h3><a class="anchor" name="bot-menu" href="#bot-menu"><i class="anchor-icon"></i></a>Bot Menu</h3>
<p>We made it easier to communicate with bots, adding a special menu button that lets you browse and send commands. Bots can also change the <strong>placeholder</strong> in the input field to give you a better idea of what kind of message they are expecting.</p>
<div class="blog_video_player_wrap" style="max-width: 400px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001419/2/XyMVWySgacc.86708/744e19403bd2f3428b" style="max-width: 400px;" title="Who'll be the first to say 'but dolphins are not fish'?" alt="New bot menu button">
<source src="/file/464001166/3/vI1QCxRW7Yc.3947785.mp4/98848ff44541f3c32d" type="video/mp4">
</video>
</div>
<blockquote>
<p>Bot developers can now create commands that <strong>change</strong> based on a users <strong>interface language</strong> and <strong>chat type</strong>, as well as special commands that only appear in specific chats or for <strong>admins</strong>.</p>
<p>More info is available in the <a href="https://core.telegram.org/bots/api">Bot API documentation</a>.</p>
</blockquote>
<h3><a class="anchor" name="importing-stickers" href="#importing-stickers"><i class="anchor-icon"></i></a>Importing Stickers</h3>
<p>The <a href="https://t.me/stickers">@stickers</a> bot can help you <strong>create new sticker packs</strong> as well as get <strong>usage stats</strong> for your stickers.</p>
<p>Today we&#39;re giving third-party developers the tools to make apps that help people generate <strong>new custom unique stickers</strong> and <strong>import</strong> their creations to Telegram <strong>in one tap</strong>.</p>
<div class="blog_video_player_wrap" style="max-width: 400px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001267/2/U7MtqT21q4E.76558/a7a73d214c36478ed3" style="max-width: 400px;" title="Think outside the fox." alt="Importing stickers to Telegram">
<source src="/file/464001715/1/YPZWHRfqpXI.3577036.mp4/bb24535cb655a57cd7" type="video/mp4">
</video>
</div>
<blockquote>
<p>If you are a developer interested in making apps that help users create stickers and publish them on Telegram, check out the new <a href="https://core.telegram.org/import-stickers">Sticker Importing Manual</a>.</p>
</blockquote>
<p>Remember, if you simply want Telegram users to install the stickers <em>you</em> made, you don&#39;t need any apps! Just upload your stickers using our <a href="https://t.me/stickers">bot</a>, then <strong>share the link</strong> to your pack with others.</p>
<h3><a class="anchor" name="new-animated-emoji" href="#new-animated-emoji"><i class="anchor-icon"></i></a>New animated emoji</h3>
<p>This update is all about motion, so we couldn&#39;t go without new animated emoji. As always, simply send a message with a <strong>single emoji</strong> to get one of these in a chat:</p>
<div class="blog_video_player_wrap" style="max-width: 400px; margin: 20px auto 20px;">
<video class="blog_video_player tl_blog_vid_autoplay" onclick="videoTogglePlay(this)" autoplay loop controls muted poster="/file/464001522/2/S41EPr1jjfo.63301/7287d01dd9ce6c2504" style="max-width: 400px;" title="Should have picked a stickier nose." alt="New animated emoji">
<source src="/file/464001038/4/-M5p-fh1uBI.3605822.mp4/a35119e5615c290df5" type="video/mp4">
</video>
</div>
<p>Time to try out the new features — while we get back to building more of what you asked for, plus a few surprises we have in mind. Stay tuned.</p>
<blockquote>
<p><a href="https://telegram.org/blog/group-video-calls">Read on to learn about Group Video Calls, if you haven&#39;t already.</a></p>
</blockquote>
<div><br></div>
<p><em>June 25, 2021<br>The Telegram Team</em></p>
</div>
</div>
<div class="tl_main_share clearfix">
<a href="https://t.me/share/url?url=https%3A%2F%2Ftelegram.org%2Fblog%2Fanimated-backgrounds&text=Introducing%20animated%20backgrounds%2C%20message%20sending%20animations%2C%20group%20video%20calls%2C%20and%20more." class="tl_telegram_share_btn" id="tl_telegram_share_btn" data-text="Introducing animated backgrounds, message sending animations, group video calls, and more." data-url="https://telegram.org/blog/animated-backgrounds"><i class="tl_telegram_share_icon"></i><span class="tl_telegram_share_label" target="_blank">Forward</span></a>
<a href="https://twitter.com/share" class="tl_twitter_share_btn" id="tl_twitter_share_btn" data-text="Introducing animated backgrounds, message sending animations, group video calls, and more." data-url="https://telegram.org/blog/animated-backgrounds" data-via="Telegram">Tweet <span class="tl_twitter_share_cnt"></span></a>
</div>
</div>
<div class="tl_main_recent_news_wrap tlb_other_news_wrap tl_blog_list_page_wrap">
<h3 class="tl_main_recent_news_header">
<a href="/blog">Other News</a>
</h3>
<div class="tl_main_recent_news_cards clearfix">
<a class="dev_blog_card_link_wrap" href="/blog/superchannels-star-reactions-subscriptions"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400436/1/AFpKVW0u5fw.267441/5fd61b6d2531113c45" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Super Channels, Star Reactions and Subscriptions</h4>
<div class="dev_blog_card_lead">Today is Telegram&#39;s 11th anniversary. Meet Star Reactions and Star Subscriptions that let users support content creators, paid media for…</div>
</div>
<div class="dev_blog_card_date">Aug 14, 2024</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/w3-browser-mini-app-store"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400778/4/yJDJIfzD2yk.228129/e8b08c158413db534e" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Telegram Browser, Mini App Store, Gifting Stars and More</h4>
<div class="dev_blog_card_lead">Today&#39;s update brings a new in-app browser that supports multiple tabs and makes Web3 available to almost a billion users, a Mini App Store…</div>
</div>
<div class="dev_blog_card_date">Jul 31, 2024</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/mini-app-bar-paid-media-and-more"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400026/1/xwmW8Qofk5M.263566/16218cb12e7549e76b" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Mini App Bar, Paid Media, Story Search &amp; More</h4>
<div class="dev_blog_card_lead">Our June update adds a way to minimize mini apps into a compact bar, helps content creators monetize their channels with paid photos and…</div>
</div>
<div class="dev_blog_card_date">Jun 30, 2024</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/telegram-stars"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400431/1/-u0XrknOtfw.232636/60f98efd626b95d010" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Telegram Stars: Pay for Digital Goods and More</h4>
<div class="dev_blog_card_lead">Over 400 million users interact with bots and mini apps on Telegram every month to buy products, access services, play games, and much…</div>
</div>
<div class="dev_blog_card_date">Jun 6, 2024</div>
</div></a>
</div>
</div>
</div>
</div>
</div>
<div class="footer_wrap">
<div class="footer_columns_wrap footer_desktop">
<div class="footer_column footer_column_telegram">
<h5>Telegram</h5>
<div class="footer_telegram_description"></div>
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
</div>
<div class="footer_column">
<h5><a href="/faq">About</a></h5>
<ul>
<li><a href="/faq">FAQ</a></li>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/press">Press</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="/apps#mobile-apps">Mobile Apps</a></h5>
<ul>
<li><a href="/dl/ios">iPhone/iPad</a></li>
<li><a href="/android">Android</a></li>
<li><a href="/dl/web">Mobile Web</a></li>
</ul>
</div>
<div class="footer_column">
<h5><a href="/apps#desktop-apps">Desktop Apps</a></h5>
<ul>
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
<li><a href="//macos.telegram.org/">macOS</a></li>
<li><a href="/dl/web">Web-browser</a></li>
</ul>
</div>
<div class="footer_column footer_column_platform">
<h5><a href="//core.telegram.org/">Platform</a></h5>
<ul>
<li><a href="//core.telegram.org/api">API</a></li>
<li><a href="//translations.telegram.org/">Translations</a></li>
<li><a href="//instantview.telegram.org/">Instant View</a></li>
</ul>
</div>
</div>
<div class="footer_columns_wrap footer_mobile">
<div class="footer_column">
<h5><a href="/faq">About</a></h5>
</div>
<div class="footer_column">
<h5><a href="/blog">Blog</a></h5>
</div>
<div class="footer_column">
<h5><a href="/apps">Apps</a></h5>
</div>
<div class="footer_column">
<h5><a href="//core.telegram.org/">Platform</a></h5>
</div>
<div class="footer_column">
<h5><a href="/press">Press</a></h5>
</div>
</div>
</div>
<script src="/js/main.js?47"></script>
<script src="/js/tgsticker.js?31"></script>
<script>initScrollVideos(true);
mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
twitterCustomShareInit();
blogSideImageInit();
backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>