Revealing the special effects in Tencent's burberry event page_html/css

On April 24, Burberry’s largest flagship store in the Asia-Pacific region opened in Shanghai. Burberry has made groundbreaking use of many innovative digital marketing models, and with the help of its cooperation with Tencent, it has created a "parallel experience" for more users who were unable to attend, and officially started Burberry's innovative digital marketing journey.

Tencent’s marketing page:

An effect similar to the fading of clouds and fog has been used many times, as shown below.

I was very interested in this magical special effect, so I found the following picture through Resources in the review element of chrome (since the picture is a white png, in order to let everyone see it clearly, I adjusted the background became black).

So the way to achieve the effect is obvious, it is achieved by using css3's -webkit-mask.

####Step1. Add a mask to the background

<body>    <div class="stage">        <div class="sprite1"></div>    </div></body>

Copy after login

.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%;}

Copy after login

Here for the convenience of viewing in a desktop browser, add The screen size is adjusted to 320*480 and centered. When adding background to sprite1, a mask is also added.

-webkit-mask:url('./img/Touch1.png') no-repeat;-webkit-mask-size: 100% 100%;

Copy after login

Here we set the size of the mask to 100% to observe the effect of the mask. The circled area in the picture is the part of sprite1 shown through the mask.

We see that this mask Touch1.png should be a picture composed of sequence frames. We only need to display it frame by frame to achieve animation.
Click to view the history code

Step2. Sequence frame animation

.stage .sprite1{    ......    -webkit-mask-size: 400% 300%;    -webkit-mask-position: 0% 0%;}

Copy after login

Touch1.png is an integrated picture of the sequence frame. There are 4 frames in one row and 3 rows in total. , so we set -webkit-mask-size to 400% 300%. Set -webkit-mask-postion to 0% 0% means starting from the first frame. When doing animation, you only need to modify the x and y values of -webkit-mask-position in sequence. Each time, increase x by 25% (100/4 frames per row) until 75%, and increase y by 33.33% (100/4 frames per card). Frame number 3) until 66.66%. We need to assign the position status of each frame to sprite1 at different times. We only need to use setTimeout.

We create a new spriteClip class and pass in four parameters (dom, w, h, time), where dom is used to locate the sprite1 element, w is how many frames are in a row, and h is how many frames there are in total. lines, time is the interval between each frame.

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;    }}

Copy after login

Create a new run method. Traverse w and h to calculate the time and position, and use setTimeout to set the delayed execution

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);        }    }}

Copy after login

Create a new spriteClip and run it.

var sprite1 = document.querySelector('.sprite1');var sp1 = new spriteClip(sprite1,4,3,50);sp1.run();

Copy after login

Run the code:

Click to view the history code

Step3. Add animation Control

After you have sprite1, add 3 more sprites and play all the animations in order to form a complete transition. In order to achieve sequential playback, we need to add playback controls to the animation. That is, after the animation is completed, a finish event is triggered for the dom, and the next animation is executed after the dom receives the completion event. Also add show and hide to control the display/hide of the animation.

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');});

Copy after login

Add the remaining 3 sprites below.

.......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();})......

Copy after login

Run the code:

To view all codes, please go to Github

If you have any questions or suggestions, please tweet @UED天记. I will reply in time and can also provide other special effects to discuss their implementation methods.

Revealing the special effects in Tencent's burberry event page_html/css_WEB-ITnose

Step2. Sequence frame animation

Step3. Add animation Control