テンセントのバーバリーイベントの特殊効果を公開 page_html/css_WEB-ITnose
Jun 24, 2016 pm 12:02 PM
4月24日、アジア太平洋地域最大のバーバリー旗艦店が上海にオープンしました。バーバリーは多くの革新的なデジタル マーケティング モデルを畫期的に活用し、テンセントとの協(xié)力により、參加できなかったより多くのユーザーに「並行體験」を提供し、バーバリーの革新的なデジタル マーケティングの旅を正式に開始しました。
Tencent のマーケティング ページ:
以下に示すように、雲(yún)や霧のフェードに似たエフェクトが何度も使用されています。
この魔法の特殊効果に非常に興味があったので、Chrome のレビュー要素のリソースから次の畫像を見つけました (畫像は白い PNG なので、誰にでもはっきり見えるように背景を黒に変更しました) 。
したがって、効果を実現(xiàn)する方法は明らかで、css3 の -webkit-mask を使用することで実現(xiàn)されます。
####Step1. 背景にマスクを追加します
<body> <div class="stage"> <div class="sprite1"></div> </div></body>
.stage{ width: 320px; height: 480px; position: absolute; left: 50%; top: 50%; margin-top:-240px; margin-left:-160px; background: url('./img/bg.jpg') no-repeat; background-size: auto 100%;}.stage .sprite1{ width: 100%; height: 100%; background: url('./img/bg2.jpg') no-repeat; background-size: auto 100%; -webkit-mask:url('./img/Touch1.png') no-repeat; -webkit-mask-size: 100% 100%;} ここでは、デスクトップブラウザで見やすいように、畫面サイズを 320*480 に調整して中央に配置しています。 sprite1 に背景を追加すると、マスクも追加されます。
-webkit-mask:url('./img/Touch1.png') no-repeat;-webkit-mask-size: 100% 100%; ここでは、マスクの効果を観察するためにマスクのサイズを 100% に設定します。畫像の丸で囲んだ部分がマスク越しに表示された sprite1 の部分です。
このマスク Touch1.png はシーケンス フレームで構成される畫像であることがわかります。アニメーションを実現(xiàn)するには、それをフレームごとに表示するだけで済みます。
クリックして履歴コードを表示します
Step2. シーケンスフレームアニメーション
.stage .sprite1{ ...... -webkit-mask-size: 400% 300%; -webkit-mask-position: 0% 0%;} Touch1.png は 1 行に 4 つのフレームがあり、合計 3 行ありますので、-webkit-mask を設定します。 -サイズを 400% 300% に変更します。 -webkit-mask-postion を 0% に設定します。 0% は、最初のフレームから開始することを意味します。アニメーションを実行するときは、-webkit-mask-position の x 値と y 値を順番に変更するだけで済みます。x を 75% まで 25% (行あたり 100/4 フレーム) ずつ増加させ、y を 1 ずつ増加させます。 33.33% (カードあたり 100/4 フレーム)、66.66% まで。 setTimeout を使用するだけで、各フレームの位置ステータスを異なる時點で sprite1 に割り當てることができます。
新しい spriteClip クラスを作成し、4 つのパラメーター (dom、w、h、time) を渡します。ここで、dom は要素 sprite1 を見つけるために使用され、w は行のフレーム數(shù)、h は行の數(shù)です。合計、時間は各フレーム間の間隔です。
function spriteClip(dom,w,h,time){ if(dom){ this.dom = dom; this.w = w ||0; this.h = h ||0; this.time = time || 0; }else{ return false; }} 新しい run メソッドを作成します。 w と h をトラバースして時間と位置を計算し、setTimeout を使用して遅延実行を設定します
spriteClip.prototype.run = function(){ for(var w=0;w<this.w;w++){ for(var h =0;h<this.h;h++){ //這里使用閉包以免w,h值隨循環(huán)改變。 (function(w,h,self){ //計算時間 var time = (h*self.time*self.w+w*self.time); setTimeout(function(){ //計算位置 self.dom.style.webkitMaskPosition = (100/(self.w-1))*w+'% '+(100/(self.h-1))*h+'%'; },time); })(w,h,this); } }} 新しい spriteClip を作成して実行します。
var sprite1 = document.querySelector('.sprite1');var sp1 = new spriteClip(sprite1,4,3,50);sp1.run(); コードを実行します:
クリックして履歴コードを表示します
ステップ 3. アニメーション コントロールを追加します
sprite1 で、さらに 3 つのスプライトを追加し、完全な変換を形成するためにすべてのアニメーションを再生します分野。連続再生を実現(xiàn)するには、アニメーションに再生コントロールを追加する必要があります。つまり、アニメーションが完了すると、dom に対して終了イベントがトリガーされ、dom は完了イベントを受信した後に次のアニメーションを実行します。また、アニメーションの表示/非表示を制御する show と Hide を追加します。
function spriteClip(dom,w,h,time){ if(dom){ ...... //記錄dom初始的display狀態(tài) this.display = this.dom.style.display; //記錄動畫是否播放過 this.played = false; }else{ return false; }}spriteClip.prototype.run = function(){ //如果動畫已經(jīng)播放過則不做任何動畫 if(this.played) return false; //標記為已播放完成 this.played = true; //讓dom顯示 this.show(); for(var w=0;w<this.w;w++){ for(var h =0;h<this.h;h++){ (function(w,h,self){ var time = (h*self.time*self.w+w*self.time); setTimeout(function(){ ...... if(w >= self.w-1 && h>=self.h-1){ //動畫結束 var event = document.createEvent('HTMLEvents'); event.initEvent('finish', true, true); event.eventType = 'message'; event.content = 'finish'; //觸發(fā)finish事件 self.dom.dispatchEvent(event); } },time); })(w,h,this); } }}//隱藏domspriteClip.prototype.hide = function(){ this.dom.style.display = 'none';}//顯示domspriteClip.prototype.show = function(){ this.dom.style.display = this.display;}//接收finish時間并用callback函數(shù)處理spriteClip.prototype.finish = function(callback){ this.dom.addEventListener('finish',callback);}var sprite1 = document.querySelector('.sprite1');var sp1 = new spriteClip(sprite1,4,3,50);//在做動畫之前讓sprite隱藏sp1.hide();document.addEventListener('touchend',function(){ //手指抬起后運行動畫 sp1.run();});document.addEventListener('click',function(){ //點擊后運行動畫 sp1.run();});sp1.finish(function(){ //動畫完成 console.log('finish');}); 殘りの 3 つのスプライトを以下に追加します。
.......stage .sprite2{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url('./img/bg2.jpg') no-repeat; background-size: auto 100%; -webkit-mask:url('./img/Touch2.png') no-repeat; -webkit-mask-size: 400% 300%; -webkit-mask-position: 0% 0%;}.stage .sprite3{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url('./img/bg2.jpg') no-repeat; background-size: auto 100%; -webkit-mask:url('./img/Touch3.png') no-repeat; -webkit-mask-size: 400% 300%; -webkit-mask-position: 0% 0%;}.stage .sprite4{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url('./img/bg2.jpg') no-repeat; background-size: auto 100%; -webkit-mask:url('./img/Touch4.png') no-repeat; /* Touch4是4*5 */ -webkit-mask-size: 400% 500%; -webkit-mask-position: 0% 0%;}......<div class="stage"> <div class="sprite1"></div> <div class="sprite2"></div> <div class="sprite3"></div> <div class="sprite4"></div></div>.....//新建4個spritevar sprite1 = document.querySelector('.sprite1');var sprite2 = document.querySelector('.sprite2');var sprite3 = document.querySelector('.sprite3');var sprite4 = document.querySelector('.sprite4');var sp1 = new spriteClip(sprite1,4,3,80);var sp2 = new spriteClip(sprite2,4,3,80);var sp3 = new spriteClip(sprite3,4,3,80);var sp4 = new spriteClip(sprite4,4,5,80);sp1.hide();sp2.hide();sp3.hide();sp4.hide();document.addEventListener('touchend',function(){ sp1.run();});document.addEventListener('click',function(){ sp1.run();});sp1.finish(function(){ //sprite1結束后運行sprite2 sp2.run();});sp2.finish(function(){ //sprite2結束后運行sprite3 sp3.run();});sp3.finish(function(){ //sprite3結束后運行sprite4 sp4.run();})...... 実行中のコード:
すべてのコードを表示するには、Github にアクセスしてください
ご質問やご提案がございましたら、 @UED天記 までツイートしてください。微博。時間內に返信させていただきます。また、その他の特殊効果を提供して、その実裝方法を検討することもできます。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8517
17
1742
16
1596
56
1536
28
1396
31
ビッグモデルアプリ Tencent Yuanbao がオンラインになりました! Hunyuan がアップグレードされ、どこにでも持ち運べるオールラウンドな AI アシスタントが作成されました
Jun 09, 2024 pm 10:38 PM
5月30日、TencentはHunyuanモデルの包括的なアップグレードを発表し、Hunyuanモデルに基づくアプリ「Tencent Yuanbao」が正式にリリースされ、AppleおよびAndroidアプリストアからダウンロードできるようになりました。前のテスト段階のフンユアン アプレット バージョンと比較して、Tencent Yuanbao は、日常生活シナリオ向けの AI 検索、AI サマリー、AI ライティングなどのコア機能を提供し、Yuanbao のゲームプレイもより豊富で、複數(shù)の機能を提供します。 、パーソナルエージェントの作成などの新しいゲームプレイ方法が追加されます。 Tencent Cloud 副社長で Tencent Hunyuan 大型モデルの責任者である Liu Yuhong 氏は、「テンセントは、最初に大型モデルを開発しようとはしません?！工仁訾伽蓼筏俊?Tencent Hunyuan の大型モデルは、ビジネス シナリオにおける豊富で大規(guī)模なポーランド テクノロジーを活用しながら、ユーザーの真のニーズを洞察します。
「Glory of Kings」のアクティビティ完全ガイド
Mar 24, 2024 pm 12:36 PM
King of Glory は、「花の季節(jié)に一緒に行こう」イベントを開始しました。イベントに參加するプレイヤーは、無料のアバター フレームと多くのギフトを受け取ることができます。イベントには時間制限があり、合計 4 つのレベルがプレイヤーに提供されます。今日、編集者は「花の季節(jié)に行こう」イベントのガイドをお屆けしました。百科事典、皆さんがレベル チャレンジを完了するのに役立つことを願っています。栄光の王「花の季節(jié)へ行く」イベントのご案內 栄光の王「花の季節(jié)へ行く」アクティビティ紹介 遊び方: 1.「花の季節(jié)へ行く」はカードをめくるアクティビティです。プレイヤーはレベルをクリアするためにカードを裏返す必要があります。 2. プレイヤーはイベント期間中にタスクを完了し、花露を入手することでカードをめくることができます。 3. アクティビティ パネルの 4 枚ごとのクリアランス カードが 1 つの線 (水平線、垂直線、対角線を含む) に接続されて、小さなレベルを通過します。 4. レベルをクリアするたびに、対応する報酬を獲得できます。また、友達がカードをめくるのを手伝って追加の報酬を獲得することもできます。ライブ
Tencent 2025 キャンパスの募集開始: 卒業(yè)期間が 1 年から 2 年に延長
Aug 07, 2024 pm 08:17 PM
8月7日の當サイトのニュースによると、テンセントの2025年のキャンパス採用は昨日正式に開始され、2024年のインターン採用と「青雲(yún)計畫」AI大型モデル採用特別プロジェクトに続き、再び「登録拡大」のシグナルを発した。過去2年間に比べ採用規(guī)模が大きくなっただけでなく、卒業(yè)時期の幅もさらに拡大しました。報道によると、テンセントの2025年のキャンパス採用では、テクノロジー、製品、市場、デザイン、機能の5つの主要カテゴリーで70以上のポジションが募集される予定だという。今年、テンセントのキャンパス採用には多くの変更が加えられる予定で、キャンパス採用の卒業(yè)期間は 1 年から 2 年に拡大されます。 2024年1月から2025年12月までに卒業(yè)する學生（卒業(yè)証明書は中國本土で有効、學位証明書は香港、マカオ、臺灣および海外地域で有効）は、テンセントの公式採用ウェブサイトおよび「テンセント」を通じて応募できます。
私の実體験を明かす：OPPOのサブブランドですか？
Mar 23, 2024 pm 09:24 PM
「True Me」の人生経験が明らかに：OPPOのサブブランドですか？スマートフォン市場が発展を続ける中、さまざまな攜帯電話ブランドが消費者の変化するニーズに応える新製品を発売してきました。中でも近年注目を集めている攜帯電話ブランド「True Me」は、その高いコストパフォーマンスと質の高いユーザーエクスペリエンスが多くの消費者に受け入れられています。しかし、「True Me」攜帯電話の人生経験やブランド背景は常に謎のベールに包まれています。最近、攜帯電話「Real Me」がOPPOのサブブランドになるというニュースがあり、攜帯電話界隈では大きな話題となりました。
テンセントのモバイルゲーム「クルミダイアリー」が復活、テスト參加者は17,000人！正式発売は3月中旬から下旬になる見込みだ。
Mar 12, 2024 pm 03:28 PM
テンセントはこのほど、昨年停止した「くるみ??日記」の再開を発表（2023年2月15日12時）し、二次試験の募集を開始した。公式発表によると、2,000人規(guī)模のテストに1,000人以上が申し込んでおり、テストは3月中旬から下旬に開始される予定だ。オリジナルの「Walnut Diary」はGiant Networkが開発し、Tencent Gamesが販売する美少女育成モバイルゲームで、2021年4月16日にリリースされ、臺灣サーバーは2021年10月14日にリリースされました。 「プレイヤーは人気の絵文字少女、七瀬くるみと一緒に暮らしたり、農(nóng)業(yè)をしたりして、簡単にくるみを育成できる」としている。しかし、『くるみ日記』は発売當初から収益が低迷し、2022年12月についに店頭から撤去され、2023年2月に休刊となった。かわいいディスプレイ、主人公のナナセ
Up の所有者はすでに、Tencent のオープンソース「AniPortrait」を悪用し、寫真に歌わせたりしゃべらせたりし始めています。
Apr 07, 2024 am 09:01 AM
AniPortrait モデルはオープンソースであり、自由に遊ぶことができます。 「Xiaopozhan Ghost Zone の新しい生産性ツール」 最近、Tencent Open Source がリリースした新しいプロジェクトが Twitter でこのような評価を受けました。このプロジェクトは AniPortrait で、オーディオと參照畫像に基づいて高品質のアニメーション ポートレートを生成します。さっそく、弁護士の手紙で警告されているデモを見てみましょう: アニメ畫像も簡単に語ることができます: このプロジェクトは、立ち上げからわずか數(shù)日ですでに広く賞賛されています: GitHub スターの數(shù)は、 2,800を超えました。 AniPortrait の革新性を見てみましょう。論文タイトル: AniPortrait:Audio-DrivenSynthesisof
『運命の箱舟』の日本サーバーは本日正式にサービス停止となりましたが、テンセントに代表される中國サーバーも普及するのでしょうか？
Mar 21, 2024 am 10:21 AM
2020年9月に日本でサービスを開始したMMORPGクライアントゲーム「アーク?オブ?デスティニー」は、約3年半の運営を経て本日日本サーバーを正式に閉鎖した。しかし、韓國のゲームと日本のゲームは、趣向やスタイル（特にオンラインゲーム）に大きな違いがあり、常にほぼ完全に相容れない派閥であったため、韓國のオンラインゲームが日本で足場を築くのは困難でした。 『運命の箱舟』日本サーバーの停止が予想されます。そこで問題は、テンセントに代表される「運命の箱舟」の國家サーバーはどうなるのかということだ。まず矢面に立つのは、大多數(shù)のプレイヤーが最も懸念している人気の問題だ。現(xiàn)時點では、「Ark of Destiny」をプレイしている人は 3 種類います。大物、一般プレイヤー、実店舗のギャングです。成金は言うまでもなく、どんなゲームもお金持ちがプレイしたほうが楽しい「運命の方舟」
Go プログラミングの難易度が明らかに: 実際の難易度はどれくらいですか?
Mar 10, 2024 am 10:48 AM
Go プログラミングの難易度が明らかに: 実際の難易度はどれくらいですか?近年、クラウドコンピューティング、ビッグデータ、人工知能などの技術の発展に伴い、プログラミング言語も常に更新されています。中でも、近年注目を集めているプログラミング言語として、そのシンプルさと効率性から、Go言語が徐々にプログラマーの間で頭角を現(xiàn)してきました。しかし、多くの初心者にとって、Go 言語の學習は課題に満ちています。では、Go 言語はどれくらい難しいのでしょうか?この記事では、具體的なコード例を組み合わせて、Go 言語プログラミングの難しさを明らかにします。 Go 言語の利點と
