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
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.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Big model app Tencent Yuanbao is online! Hunyuan is upgraded to create an all-round AI assistant that can be carried anywhere
Jun 09, 2024 pm 10:38 PM
On May 30, Tencent announced a comprehensive upgrade of its Hunyuan model. The App "Tencent Yuanbao" based on the Hunyuan model was officially launched and can be downloaded from Apple and Android app stores. Compared with the Hunyuan applet version in the previous testing stage, Tencent Yuanbao provides core capabilities such as AI search, AI summary, and AI writing for work efficiency scenarios; for daily life scenarios, Yuanbao's gameplay is also richer and provides multiple features. AI application, and new gameplay methods such as creating personal agents are added. "Tencent does not strive to be the first to make large models." Liu Yuhong, vice president of Tencent Cloud and head of Tencent Hunyuan large model, said: "In the past year, we continued to promote the capabilities of Tencent Hunyuan large model. In the rich and massive Polish technology in business scenarios while gaining insights into users’ real needs
A complete guide to the activities of "Glory of Kings"
Mar 24, 2024 pm 12:36 PM
King of Glory has launched the Let’s Go Together to Flower Season event. Players who participate in the event can receive free avatar frames and many gifts. The event has a time limit and provides players with a total of four levels. Today, the editor has brought you a guide to the Let’s Go to Flower Season event. Encyclopedia, I hope it can help everyone complete the level challenge. A guide to the King of Glory's "Going to the Flowering Season" event. King of Glory, "Going to the Flowering Season" activity introduction. How to play: 1. "Going to the Flowering Season" is a card-turning activity, and players need to turn over the cards to pass the level. 2. Players can turn over cards by completing tasks and obtaining flower dew during the event. 3. Every four clearance cards in the activity panel are connected into a line (including horizontal lines, vertical lines and diagonal lines) to pass a small level. 4. Every time you clear a level, you can get corresponding rewards, and you can also get additional rewards by helping your friends turn over cards. live
Revealing my real life experience: Is it a sub-brand of OPPO?
Mar 23, 2024 pm 09:24 PM
"True Me" life experience revealed: Is it a sub-brand of OPPO? As the smartphone market continues to develop, various mobile phone brands have launched new products to meet the changing needs of consumers. Among them, a mobile phone brand called "True Me" has attracted much attention in recent years. Its high cost performance and high-quality user experience have been welcomed by many consumers. However, the life experience and brand background of the "True Me" mobile phone have always been shrouded in a veil of mystery. Recently, there was news that the "Real Me" mobile phone is a sub-brand of OPPO. This news has made a lot of noise in the mobile phone circle.
Up owners have already started to play tricks. Tencent opens up 'AniPortrait' to let photos sing and speak.
Apr 07, 2024 am 09:01 AM
AniPortrait models are open source and can be played with freely. "A new productivity tool for Xiaopozhan Ghost Zone." Recently, a new project released by Tencent Open Source received such evaluation on Twitter. This project is AniPortrait, which generates high-quality animated portraits based on audio and a reference image. Without further ado, let’s take a look at the demo that may be warned by a lawyer’s letter: Anime images can also speak easily: The project has already received widespread praise after just a few days since it was launched: the number of GitHub Stars has exceeded 2,800. Let’s take a look at the innovations of AniPortrait. Paper title: AniPortrait:Audio-DrivenSynthesisof
Return to Omaha Beach! World of Tanks launches Normandy commemoration event
May 31, 2024 pm 10:25 PM
As the D-Day invasion approaches its 80th anniversary, a whole month of World of Tanks events and specials will be centered around Operation Overlord - a new PvE mode, a themed battle pass, the release of a new Frontline mode, and a month-long The Operation Normandy token store is about to open. OPERATION MAP From June 3 to June 30, explore the beaches of Normandy and collect up to 90 Operation Normandy Tokens: 36 from this map and another 54 by completing daily tasks. Check out the interactive map and see the start dates for each event, then start earning tokens now, or unlock special token missions. Use the map to learn more about Operation Normandy related activities. Once you have obtained enough Operation Normandy tokens, you can go to the Operation Normandy token dealer
The Japanese server of "Ark of Destiny" is officially out of service today. Will the Chinese server represented by Tencent also become popular?
Mar 21, 2024 am 10:21 AM
The MMORPG client game "Ark of Destiny", which was launched in Japan in September 2020, officially closed its Japanese servers today after nearly three and a half years of operation. But Korean games and Japanese games have always been almost completely incompatible factions, with huge differences in taste and style (especially online games). This is why it has been difficult for Korean online games to gain a foothold in Japan. The suspension of the Japanese server of "Ark of Destiny" is expected. So the question is, what about the national server of "Ark of Destiny" represented by Tencent? The first thing that bears the brunt is the popularity issue that the majority of players are most concerned about. As of now, there are three types of people playing "Ark of Destiny": tycoons, ordinary players and brick-and-mortar gangsters. Needless to say, nouveau riche, any game is more enjoyable for rich people to play, "Ark of Destiny"
Tencent mobile game 'Walnut Diary' is resurrected, and 17,000 people signed up for testing! It is expected to be officially launched in mid-to-late March.
Mar 12, 2024 pm 03:28 PM
Recently, Tencent announced the restart of "Walnut Diary", which was suspended last year (at 12:00 on February 15, 2023), and started recruitment for the second test. According to official disclosures, more than 1,000 people have signed up for the 2,000-person test, and the test is expected to start in mid-to-late March. The original "Walnut Diary" is a beautiful girl companionship and development mobile game developed by Giant Network and published by Tencent Games. It was released on April 16, 2021, and the Taiwan server was released on October 14, 2021. It is claimed that "players can live and farm together with the popular emoticon girl Nanase Kurumi, and easily cultivate your Kurumi." However, the revenue of "Walnut Diary" has been poor since its launch. It was finally removed from the shelves in December 2022 and suspended in February 2023. Cute display, the protagonist Nanase
Huawei Mate60 Pro screenshot techniques revealed
Mar 22, 2024 pm 05:33 PM
With the development of smart phones, taking screenshots on mobile phones has become one of the frequently used functions in our daily lives. As a leader in the field of smartphones, Huawei Mate60Pro naturally has many unique screenshot techniques to make the user experience more convenient and efficient. This article will reveal some screenshot techniques of Huawei Mate60Pro, hoping to help you make better use of mobile phone functions and improve work and life efficiency. The first technique is to take a normal screenshot. In daily use, we often need to take screenshots and save the mobile phone screen.
