ホームページ >ウェブフロントエンド >htmlチュートリアル >テンセントのバーバリーイベントの特殊効果を公開 page_html/css_WEB-ITnose
テンセントのバーバリーイベントの特殊効果を公開 page_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:02:031062ブラウズ
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天记 までツイートしてください。微博。時間内に返信させていただきます。また、その他の特殊効果を提供して、その実装方法を検討することもできます。