Steps and example codes for WeChat scene creation

WeChat is currently the most popular social software. During holidays, many people will share their photos in Moments. Some people even make photo albums. The switching of pictures is accompanied by music. This is WeChat. Scenes.

Next, I will lead you to create a WeChat scene.

Remarks: By studying this set of tutorials, you can learn the use of touch events, multi-touch technology, the algorithm for judging the sliding direction of gesture events, CSS3 animation calling, text animation (all animations are customized), music Knowledge of playback and control, CSS3 animation control, use of web fonts, js manipulation of DOM, etc. If you encounter any problems during the learning process, you can add me on QQ: 1416759661.

The general steps are as follows:

001, effect preview

002, create Project

003, mete attribute and radial gradient

004, add image

005, position image

006, listen for touch start event

007. Monitor the touch end event

008. Determine the sliding direction

009. Swipe up to switch pictures

010. Add transition animation effect

011. Call animation and reset properties

012. Slide down to switch pictures

013. Add 3D rotation effect

014. Add text effect

015. Text movement

016, text style reset

017, text rotation effect

018, sliding text effect

019, circular music control button

020. Button rotation animation

021. Stop rotation animation

022. Control the playback and stop of music

023. Automatically call animation switching effect

Experience the effect first. Use WeChat to scan the QR code below to see the effect.

You can also click the link below to view the effect. Since it is a foreign server, it may be slow.

https://1416759661.github.io/changjing/

##Detailed code:

nbsp;html><meta><meta><meta><meta><meta><meta><meta><title></title><style>
            @font-face {font-family:yyjcwfont;src:url(font/hand.ttf);}
            @-webkit-keyframes musicrotate {from {
                    -webkit-transform: rotate(0);}to {-webkit-transform: rotate(360deg);}}
            
            @keyframes dhfadein {from {
                    width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;z-index: 1;}to {width: 100%;height: 100%;top: 0;left: 0;opacity: 1;transform: rotate(720deg) rotateY(360deg);z-index: 100;}}
            
            
            @keyframes dhfadein-p1 {from {
                    width: 1%;height: 1%;left:-100%;top:-100%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:50%;font-size:3rem;opacity:1;color: #1477E2;transform: rotateX(360deg) rotateY(720deg);text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}
            
            @keyframes dhfadein-p2 {from {
                    width: 1%;height: 1%;left:200%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:60%;font-size:3rem;opacity:1;color: #1477E2;transform: rotateX(360deg) rotateY(720deg);text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}
            
            @keyframes dhfadein-p3 {from {
                    width: 1%;height: 1%;left:-100%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:70%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}
            
            @keyframes dhfadein-p4 {from {
                    width: 1%;height: 1%;left:200%;top:90%;position: absolute;bottom: 0;opacity: 0;}to {width: 100%;left:10%;top:80%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}    
            
            @keyframes dhfadein-p5 {from {
                    width: 1%;height: 1%;left:50%;bottom:-100%;position: absolute;bottom: 0;opacity: 0;}to {width:10%;left:80%;top:10%;font-size:3rem;opacity:1;color: #1477E2;/*transform: rotateX(360deg) rotateY(720deg);*/text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
                    z-index: 100;}}    
            
            
            
            
            
            
            * {margin: 0;padding: 0;}
            html,
            body {width: 100%;height: 100%;}
            ul {width: 100%;height: 100%;list-style: none;overflow: hidden;position: relative;background:radial-gradient(white,#FC7D08);display: none;}
            ul li {width: 1%;height: 1%;display: block;position: absolute;top: 50%;left: 50%;opacity: 0.5;/*    animation: dhfadein 3s 1 forwards;*/}
            ul li img {width: 100%;height: 100%;display: block;margin: 0 auto;opacity: 1;}
            p{font-family: yyjcwfont;}
            ul li p.text1 {width: 1%;height: 1%;left:-100%;top:-100%;position: absolute;bottom: 0;opacity: 0;}ul li p.text2 {width: 1%;height: 1%;left:200%;position: absolute;bottom: 0;opacity: 0;}ul li p.text3 {width: 1%;height: 1%;left:-100%;position: absolute;bottom: 0;opacity: 0;}ul li p.text4 {width: 1%;height: 1%;left:200%;top:90%;position: absolute;bottom: 0;opacity: 0;}ul li p.text5 {width: 1%;height: 1%;left:50%;bottom:-100%;position: absolute;bottom: 0;opacity: 0;}
            .musicbox {background-image: url(images/m.jpg);background-position: 0 0;width:38px;height:38px;overflow: hidden;background-repeat: no-repeat;background-size: contain;border-radius:19px;position: absolute;z-index: 102;top: 10px;right:10px;cursor: pointer;animation:musicrotate 1s linear infinite;box-shadow: 0 0 15px 2px blue;}
            div.closeroate{animation-play-state: paused;}
            .loding{position: absolute;left: 0;top: 0;line-height: 30px;padding: 10px;color:green;}</style><div>加载中<img  src="/static/imghwm/default1.png" data-src="images/wait.gif" class="lazy" alt="Steps and example codes for WeChat scene creation" >
</div>

• 

  两情若是久长时，

  又岂在朝朝暮暮！

• 

  当你老了，

  头白了，

  睡思昏沉，

  依然爱慕你的美丽！

  思念直到永远

• 

  两情若是久长时，

  又岂在朝朝暮暮！

• 

  轻轻的我走了，

  正如我轻轻的来！

  我挥一挥衣袖，

  不带走一片云彩！

• 

  CSS3教程上线啦

  QQ：1416759661！

• 

  当你老了，

  头白了，

  睡思昏沉，

  依然爱慕你的美丽！

  思念直到永远

• 

  两情若是久长时，

  又岂在朝朝暮暮！

• 

  轻轻的我走了，

  正如我轻轻的来！

  我挥一挥衣袖，

  不带走一片云彩！

• 

  CSS3教程上线啦

  QQ：1416759661！

<script></script><script>// $(function(){// // });// $(window).load(function(){// $(".loding").hide();// $("ul").show();// }); window.addEventListener(&#39;load&#39;, function(){ $(".loding").hide(); $("ul").show(); }, false); var audio = document.getElementById("audioPlay");var musicbox=document.getElementById("musicbox"); document.getElementById("musicbox").onclick=function(e){if(this.className=="musicbox") { audio.pause(); musicbox.className="musicbox closeroate"; }else{ audio.loop = true; audio.play(); this.className="musicbox"; } }; var timer1=setInterval(function(){ sliderNext(); },13000); sliderNext();var container = document.getElementById("mybox");var start_x;var start_y;var end_x;var end_y; container.addEventListener("touchstart", function(event) { clearInterval(timer1);if(event.targetTouches.length == 1) {var touch = event.targetTouches[0]; start_x = touch.pageX; start_y = touch.pageY; }; }, { passive: false}); container.addEventListener("touchmove", function(event) { event.preventDefault();if(event.targetTouches.length == 1) {var touch = event.targetTouches[0]; move_x = touch.pageX; move_y = touch.pageY; }; }, { passive: false}); container.addEventListener("touchend", function(event) {if(event.changedTouches.length == 1) {var touch = event.changedTouches[0]; end_x = touch.pageX; end_y = touch.pageY; };var x=end_x-start_x;var y=end_y-start_y; if(Math.abs(x) > Math.abs(y) && x > 0){ console.log(&#39;向右&#39;); }else if(Math.abs(x) > Math.abs(y) && x < 0){ console.log(&#39;向左&#39;); }else if(Math.abs(x) < Math.abs(y) && y > 0){ console.log(&#39;向下&#39;); sliderPre(); }else if(Math.abs(x) < Math.abs(y) && y < 0){ console.log(&#39;向上&#39;); sliderNext(); } timer1=setInterval(function(){ sliderNext(); },13000); }, { passive: false}); function sliderNext() { var lastli = $("li:last-child")[0]; $("li:last-child").prependTo($("ul")); $("li").removeAttr("style"); lastli = $("li:last-child")[0]; lastli.style.webkitAnimation = "dhfadein 3s 1 forwards"; $("p").removeAttr("style"); lastli.addEventListener(&#39;webkitAnimationEnd&#39;, function () {//console.log(&#39;Li动画执行完毕！&#39;); $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"}); $(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"}); $(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"}); $(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"}); $(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"}); }, false); }function sliderPre() { $("p").removeAttr("style"); $("li:first-child").appendTo($("ul")); $("li").removeAttr("style"); var lastli = $("li:last-child")[0]; lastli.style.webkitAnimation = "dhfadein 3s 1 forwards"; lastli.addEventListener(&#39;webkitAnimationEnd&#39;, function () {//console.log(&#39;Li动画执行完毕！&#39;); $(lastli).find("p").eq(0).css({"animation":"dhfadein-p1 3s 1 forwards"}); $(lastli).find("p").eq(1).css({"animation":"dhfadein-p2 3s 1 forwards"}); $(lastli).find("p").eq(2).css({"animation":"dhfadein-p3 3s 1 forwards"}); $(lastli).find("p").eq(3).css({"animation":"dhfadein-p4 3s 1 forwards"}); $(lastli).find("p").eq(4).css({"animation":"dhfadein-p5 3s 1 forwards"}); }, false); } </script>

The above is the detailed content of Steps and example codes for WeChat scene creation. For more information, please follow other related articles on the PHP Chinese website!