テンセントのバーバリーイベントの特殊効果を公開 page_html/css_WEB-ITnose
4月24日、アジア太平洋地域最大のバーバリー旗艦店が上海にオープンしました。バーバリーは多くの革新的なデジタル マーケティング モデルを画期的に活用し、テンセントとの協力により、参加できなかったより多くのユーザーに「並行体験」を提供し、バーバリーの革新的なデジタル マーケティングの旅を正式に開始しました。
Tencent のマーケティング ページ:
以下に示すように、雲や霧のフェードに似たエフェクトが何度も使用されています。
この魔法の特殊効果に非常に興味があったので、Chrome のレビュー要素のリソースから次の画像を見つけました (画像は白い PNG なので、誰にでもはっきり見えるように背景を黒に変更しました) 。
したがって、効果を実現する方法は明らかで、css3 の -webkit-mask を使用することで実現されます。
####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 はシーケンス フレームで構成される画像であることがわかります。アニメーションを実現するには、それをフレームごとに表示するだけで済みます。
クリックして履歴コードを表示します
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 は行のフレーム数、h は行の数です。合計、時間は各フレーム間の間隔です。
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值随循环改变。 (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 つのスプライトを追加し、完全な変換を形成するためにすべてのアニメーションを再生します分野。連続再生を実現するには、アニメーションに再生コントロールを追加する必要があります。つまり、アニメーションが完了すると、dom に対して終了イベントがトリガーされ、dom は完了イベントを受信した後に次のアニメーションを実行します。また、アニメーションの表示/非表示を制御する show と Hide を追加します。
function spriteClip(dom,w,h,time){ if(dom){ ...... //记录dom初始的display状态 this.display = this.dom.style.display; //记录动画是否播放过 this.played = false; }else{ return false; }}spriteClip.prototype.run = function(){ //如果动画已经播放过则不做任何动画 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'; //触发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函数处理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ツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
ビッグモデルアプリ 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 のゲームプレイもより豊富で、複数の機能を提供します。 、パーソナルエージェントの作成などの新しいゲームプレイ方法が追加されます。 Tencent Cloud 副社長で Tencent Hunyuan 大型モデルの責任者である Liu Yuhong 氏は、「テンセントは、最初に大型モデルを開発しようとはしません。」と述べました。 Tencent Hunyuan の大型モデルは、ビジネス シナリオにおける豊富で大規模なポーランド テクノロジーを活用しながら、ユーザーの真のニーズを洞察します。
「Glory of Kings」のアクティビティ完全ガイド
Mar 24, 2024 pm 12:36 PM
King of Glory は、「花の季節に一緒に行こう」イベントを開始しました。イベントに参加するプレイヤーは、無料のアバター フレームと多くのギフトを受け取ることができます。イベントには時間制限があり、合計 4 つのレベルがプレイヤーに提供されます。今日、編集者は「花の季節に行こう」イベントのガイドをお届けしました。百科事典、皆さんがレベル チャレンジを完了するのに役立つことを願っています。栄光の王「花の季節へ行く」イベントのご案内 栄光の王「花の季節へ行く」アクティビティ紹介 遊び方: 1.「花の季節へ行く」はカードをめくるアクティビティです。プレイヤーはレベルをクリアするためにカードを裏返す必要があります。 2. プレイヤーはイベント期間中にタスクを完了し、花露を入手することでカードをめくることができます。 3. アクティビティ パネルの 4 枚ごとのクリアランス カードが 1 つの線 (水平線、垂直線、対角線を含む) に接続されて、小さなレベルを通過します。 4. レベルをクリアするたびに、対応する報酬を獲得できます。また、友達がカードをめくるのを手伝って追加の報酬を獲得することもできます。ライブ
私の実体験を明かす：OPPOのサブブランドですか？
Mar 23, 2024 pm 09:24 PM
「True Me」の人生経験が明らかに：OPPOのサブブランドですか？スマートフォン市場が発展を続ける中、さまざまな携帯電話ブランドが消費者の変化するニーズに応える新製品を発売してきました。中でも近年注目を集めている携帯電話ブランド「True Me」は、その高いコストパフォーマンスと質の高いユーザーエクスペリエンスが多くの消費者に受け入れられています。しかし、「True Me」携帯電話の人生経験やブランド背景は常に謎のベールに包まれています。最近、携帯電話「Real Me」がOPPOのサブブランドになるというニュースがあり、携帯電話界隈では大きな話題となりました。
Up の所有者はすでに、Tencent のオープンソース「AniPortrait」を悪用し、写真に歌わせたりしゃべらせたりし始めています。
Apr 07, 2024 am 09:01 AM
AniPortrait モデルはオープンソースであり、自由に遊ぶことができます。 「Xiaopozhan Ghost Zone の新しい生産性ツール」 最近、Tencent Open Source がリリースした新しいプロジェクトが Twitter でこのような評価を受けました。このプロジェクトは AniPortrait で、オーディオと参照画像に基づいて高品質のアニメーション ポートレートを生成します。さっそく、弁護士の手紙で警告されているデモを見てみましょう: アニメ画像も簡単に語ることができます: このプロジェクトは、立ち上げからわずか数日ですでに広く賞賛されています: GitHub スターの数は、 2,800を超えました。 AniPortrait の革新性を見てみましょう。論文タイトル: AniPortrait:Audio-DrivenSynthesisof
オマハビーチに戻ります！ World of Tanks がノルマンディー記念イベントを開始
May 31, 2024 pm 10:25 PM
D デイ侵略が 80 周年に近づく中、1 か月にわたる World of Tanks のイベントとスペシャルは、新しい PvE モード、テーマ別バトル パス、新しいフロントライン モードのリリース、そして 1 か月間、オーバーロード作戦を中心に展開されます。長い ノルマンディー作戦トークンストアが間もなくオープンします。作戦マップ 6 月 3 日から 6 月 30 日まで、ノルマンディーのビーチを探索し、最大 90 個のノルマンディー作戦トークンを収集します。このマップから 36 個、毎日のタスクを完了することでさらに 54 個です。インタラクティブなマップをチェックして各イベントの開始日を確認し、今すぐトークンの獲得を開始するか、特別なトークン クエストのロックを解除してください。マップを使用して、ノルマンディー作戦関連の活動について詳しく学びましょう。十分なノルマンディー作戦トークンを入手したら、ノルマンディー作戦トークン ディーラーに行くことができます。
『運命の箱舟』の日本サーバーは本日正式にサービス停止となりましたが、テンセントに代表される中国サーバーも普及するのでしょうか？
Mar 21, 2024 am 10:21 AM
2020年9月に日本でサービスを開始したMMORPGクライアントゲーム「アーク・オブ・デスティニー」は、約3年半の運営を経て本日日本サーバーを正式に閉鎖した。しかし、韓国のゲームと日本のゲームは、趣向やスタイル（特にオンラインゲーム）に大きな違いがあり、常にほぼ完全に相容れない派閥であったため、韓国のオンラインゲームが日本で足場を築くのは困難でした。 『運命の箱舟』日本サーバーの停止が予想されます。そこで問題は、テンセントに代表される「運命の箱舟」の国家サーバーはどうなるのかということだ。まず矢面に立つのは、大多数のプレイヤーが最も懸念している人気の問題だ。現時点では、「Ark of Destiny」をプレイしている人は 3 種類います。大物、一般プレイヤー、実店舗のギャングです。成金は言うまでもなく、どんなゲームもお金持ちがプレイしたほうが楽しい「運命の方舟」
テンセントのモバイルゲーム「クルミダイアリー」が復活、テスト参加者は17,000人！正式発売は3月中旬から下旬になる見込みだ。
Mar 12, 2024 pm 03:28 PM
テンセントはこのほど、昨年停止した「くるみ日記」の再開を発表（2023年2月15日12時）し、二次試験の募集を開始した。公式発表によると、2,000人規模のテストに1,000人以上が申し込んでおり、テストは3月中旬から下旬に開始される予定だ。オリジナルの「Walnut Diary」はGiant Networkが開発し、Tencent Gamesが販売する美少女育成モバイルゲームで、2021年4月16日にリリースされ、台湾サーバーは2021年10月14日にリリースされました。 「プレイヤーは人気の絵文字少女、七瀬くるみと一緒に暮らしたり、農業をしたりして、簡単にくるみを育成できる」としている。しかし、『くるみ日記』は発売当初から収益が低迷し、2022年12月についに店頭から撤去され、2023年2月に休刊となった。かわいいディスプレイ、主人公のナナセ
Huawei Mate60 Proのスクリーンショットテクニックが公開
Mar 22, 2024 pm 05:33 PM
スマートフォンの発展に伴い、携帯電話でスクリーンショットを撮ることは日常生活で頻繁に使用される機能の1つになりました。スマートフォン分野のリーダーとして、Huawei Mate60Proは当然ながら、ユーザーエクスペリエンスをより便利かつ効率的にするための独自のスクリーンショットテクニックを多数備えています。この記事では、携帯電話の機能をより有効に活用し、仕事や生活の効率を向上させるのに役立つことを期待して、Huawei Mate60Proのスクリーンショットテクニックをいくつか公開します。最初のテクニックは、通常のスクリーンショットを撮ることです。日常的な使用では、携帯電話の画面をスクリーンショットを撮って保存する必要があることがよくあります。
