preface

Many online wedding photography companies, or wedding companies, or some H5 production platform, can do some wedding invitations, but such wedding invitations are all the same. Nothing special, just pictures. At the behest of someone, I made an H5 wedding invitation. With some knowledge and tips, here is a simple summary!

Apply perspective effect in transform

Transform, Rotate, and Scale3D are used in animation writing. If not, take a look at animate. CSS, which lists some commonly used animation effects. Today I’m going to focus on perspective, the implementation of perspective effects.

Perspective Animation perspective effects

The perspective effect is larger in the near and smaller in the far. In my invitation letter, the picture is vertically flipped, using perspective. Make the image pivot.

@-webkit-keyframes rotater { 0% { -webkit-transform: perspective(1200px) rotateY(-120deg); transform: perspective(1200px) rotateY(-120deg); } 100% { -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); } } @keyframes rotater { 0% { -webkit-transform: perspective(1200px) rotateY(-120deg); transform: perspective(1200px) rotateY(-120deg); } 100% { -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); }}Copy the code

Perspective () can specify the perspective distance; the smaller the value, the larger the display and the closer it is to you.

@font face application of special fonts

@font face in addition to using the font icon, we can also use some special fonts in our web pages, if you feel that the user’s computer or mobile phone does not have this font, you can specify. (However, if you have a large font, it will slow down your loading speed. Special fonts can slow down the loading speed of web pages. Therefore, many web pages are recommended to be displayed in a font that is commonly used on your computer.)

If I want to use pen font in my web page, ordinary users do not have pen font, example is as follows:

@font-face { font-family: GB; SRC: local("gangbiziti"), // Check whether there is a local URL ("gangbiziti. Woff2 "), URL ("gangbiziti. Woff "), URL ("gangbiziti. }Copy the code

@font-face can also specify the name of a font. If you think ‘Microsoft Yahei ‘is too hard to remember in English, you can specify a short version.

@font-face {
  font-family: YH;
  src: local("Microsoft Yahei");
}Copy the code

So we use it directly:

.font {
    font-family: YH;
}Copy the code

For some Chinese and English comparison of fonts, I introduced it in my blog a long time ago, please see: www.haorooms.com/post/IE_jia…

We recommend using English fonts.

Trigger of the slide event

With the help of a web page is on the slide, down, left, right or click, here I have good articles before, www.haorooms.com/post/webapp…

Interested can have a look!

RequestAnimationFrame animation

About requestAnimationFrame can search a lot of related articles on the net, one of the primitive also good, is www.paulirish.com/2011/reques…

This way, we don’t have to use window.settimout () or window.setinterval () to animate elements by constantly updating their state and position. With requestAnimationFrame directly

Here’s a quick example:

html:

<div id="test" style="width:1px; height:17px; background:#0f0;" >0%</div> <input type="button" value="Run" id="run"/>Copy the code

Js:

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;

function step(timestamp) {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);
}, false);Copy the code

Browser incompatible degradation solutions

(function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && ! window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (! window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (! window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } ());Copy the code

Image preloading

Because the picture in the web page is very large, many, in the case of poor network speed, open the speed is very slow, how to do this?

The invitation letter picture display page initially only loaded the first few, when clicking to view, secretly preloaded! Image preloading, which I mentioned in my previous article! And then when you swipe, you formally load the image. (The current test down, the effect is a little better, but still a little slow! To be optimized.)

Music and video controls

About music control, some time ago, I wrote HTML5 Audio to achieve high imitation of wechat voice playback effect, and wrote some ways of music control, you can have a look if you are interested!

The video control is similar to the music control, except that I need to get the state after the video has finished playing, using the following code:

html:

<video class="vido" id="vidoid" poster="images/photo/video.jpg">
  <source src="media/move.mp4" type="video/mp4">
</video>Copy the code

js

$("#vidoid").bind('ended',function () {}) var md= document.getelementById ("vidoid"); If (md.ended){console.log(" end "); } md.addEventListener("ended",function(){console.log(" end "); })Copy the code

Listen for ended events to check whether the video ends. However, in wechat, different mobile phones have different effects. Some mobile phones will stop on the end page after playing, and you must click to close it.

The realization of typing effect

Typing effect, I use is typed. Js, more easy to use, is also more mature, but there are many CSS3 or other implementation:

Simple JS implementation:

var s = 'Hello World! Hello haorooms! Hello haorooms! '; var con = $('#haorooms'); var index = 0; var length = s.length; var tId = null; function start(){ con.text(''); tId=setInterval(function(){ con.append(s.charAt(index)); if(index++ === length){ clearInterval(tId); index = 0; start() } },100); } start();Copy the code

Css3 implementation, of course, this implementation is more silly, but can also deal with simple requirements!

html:

<p class="typing">
  CSS3 timing-function steps
</p>Copy the code

css:

.typing{ width:250px; white-space:nowrap; overflow:hidden; -webkit-animation: type 3s steps(50, end) infinite; animation: type 3s steps(50, end) infinite; } @-webkit-keyframes type{ from { width: 0; } } @keyframes type{ from { width: 0; }}Copy the code

Similar to my previous frame-by-frame animation!

So much for today! Welcome to leave a message!