telegram-crawler/data/web/telegram.org/blog/animated-backgrounds.html
2023-11-30 14:38:20 +00:00

304 lines
22 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?236" 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/similar-channels" class="side_blog_entry">
<div class="side_blog_date">Nov 30</div>
<div class="side_blog_title">Similar Channels, Reposting Stories, and 9 More Features</div>
</a><a href="/blog/giveaways" class="side_blog_entry">
<div class="side_blog_date">Nov 6</div>
<div class="side_blog_title">Giveaways in Channels and Free Premium</div>
</a><a href="/blog/reply-revolution" class="side_blog_entry">
<div class="side_blog_date">Oct 28</div>
<div class="side_blog_title">Replies 2.0, Adjustable Link Previews, Name Colors and More</div>
</a><a href="/blog/channel-stories" class="side_blog_entry">
<div class="side_blog_date">Sep 22</div>
<div class="side_blog_title">Stories in Channels, View-Once Media and More</div>
</a><a href="/blog/stories" class="side_blog_entry">
<div class="side_blog_date">Aug 14</div>
<div class="side_blog_title">Stories and 10 Years of Telegram</div>
</a><a href="/blog/shareable-folders-custom-wallpapers" class="side_blog_entry">
<div class="side_blog_date">Apr 21</div>
<div class="side_blog_title">Shareable Chat Folders, Custom Wallpapers and More</div>
</a><a href="/blog/power-saving" class="side_blog_entry">
<div class="side_blog_date">Mar 8</div>
<div class="side_blog_title">Power Saving Mode and More</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/similar-channels"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400090/1/RprIYMnvOUg.277465/d9f6381d8e3088a8f7" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Similar Channels, Reposting Stories, and 9 More Features</h4>
<div class="dev_blog_card_lead">Today&#39;s update lets you find more channels on similar topics, repost stories from friends and channels, and add video messages to stories.…</div>
</div>
<div class="dev_blog_card_date">Nov 30, 2023</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/giveaways"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400867/1/urmYJbbNk5E.288288/8288e7d1770857dcf1" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Giveaways in Channels and Free Premium</h4>
<div class="dev_blog_card_lead">Channel owners can now launch Giveaways to randomly distribute prizes among their followers. This is great if you want to promote your channel, get new subscribers or reward existing…</div>
</div>
<div class="dev_blog_card_date">Nov 6, 2023</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/reply-revolution"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400780/1/g_radu3Y0M8.287207/035dae82b433286e51" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Replies 2.0, Adjustable Link Previews, Name Colors and More</h4>
<div class="dev_blog_card_lead">Today&#39;s update lets you quote specific parts of messages when replying, send your replies to other chats, add quote formatting to any text…</div>
</div>
<div class="dev_blog_card_date">Oct 28, 2023</div>
</div></a><a class="dev_blog_card_link_wrap" href="/blog/channel-stories"><div class="dev_blog_card_wrap">
<img class="dev_blog_card_image" src="https://telegram.org/file/400780400873/1/yQiyKrn7_NE.258715/33a6d6c835c123263a" />
<div class="dev_blog_card_alltext_wrap">
<h4 class="dev_blog_card_title">Stories in Channels, View-Once Media and More</h4>
<div class="dev_blog_card_lead">Channels can start posting stories thanks to a new boost system. Stories now have reaction stickers and the option to add your own music.…</div>
</div>
<div class="dev_blog_card_date">Sep 22, 2023</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>