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
Jun 24, 2016 pm 12:02 PM
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值隨循環(huán)改變。 (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狀態(tài) this.display = this.dom.style.display; //記錄動畫是否播放過 this.played = false; }else{ return false; }}spriteClip.prototype.run = function(){ //如果動畫已經(jīng)播放過則不做任何動畫 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){ //動畫結(jié)束 var event = document.createEvent('HTMLEvents'); event.initEvent('finish', true, true); event.eventType = 'message'; event.content = 'finish'; //觸發(fā)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函數(shù)處理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結(jié)束后運行sprite2 sp2.run();});sp2.finish(function(){ //sprite2結(jié)束后運行sprite3 sp3.run();});sp3.finish(function(){ //sprite3結(jié)束后運行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
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
Tencent 2025 campus recruitment starts: Graduation time expanded from one year to two years
Aug 07, 2024 pm 08:17 PM
According to news from this site on August 7, Tencent’s 2025 campus recruitment was officially launched yesterday. Following the recruitment of interns in 2024 and the “Qingyun Plan” AI large model recruitment special project, it once again issued an “enrollment expansion” signal: not only the recruitment scale is larger than the previous two years There has been a huge growth, and the graduation time range for people has also been further expanded. According to reports, Tencent’s campus recruitment in 2025 will open more than 70 positions in five major categories: technology, product, market, design, and function. There will be many changes in Tencent’s campus recruitment this year. The graduation time range for campus recruitment will be expanded from one year to two years. Students who graduate from January 2024 to December 2025 (Graduation Certificate shall prevail in Mainland China, Degree Certificate shall prevail in Hong Kong, Macao, Taiwan and overseas regions) can apply through Tencent’s official recruitment website and “Tencent
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.
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
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
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"
Go programming difficulty revealed: How difficult is it actually?
Mar 10, 2024 am 10:48 AM
Go programming difficulty revealed: How difficult is it actually? In recent years, with the continuous development of cloud computing, big data, artificial intelligence and other technologies, programming languages ????are also constantly updated. Among them, as a programming language that has attracted much attention in recent years, Go language has gradually emerged in the programmer circle due to its simplicity and efficiency. However, for many beginners, learning Go language is full of challenges. So, how difficult is the Go language? This article will combine specific code examples to reveal the difficulty of Go language programming. Go language advantages and
