Home >Web Front-end >HTML Tutorial >Revealing the special effects in Tencent's burberry event page_html/css_WEB-ITnose
Revealing the special effects in Tencent's burberry event page_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:02:031087browse
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>
.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%;} 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%; 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%;} 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; }} 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); } }} Create a new spriteClip and run it.
var sprite1 = document.querySelector('.sprite1');var sp1 = new spriteClip(sprite1,4,3,50);sp1.run(); 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');}); 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();})...... 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.