Муха повзає по екрану
Публікації→Анімації і ефектиЕфект мухи яка повзає по веб-сторінці реалізується за допомогою зображення мухи та зміни позиції на екрані. Обертання мухи здійснюється за допомогою CSS стилю transform.
function Flyy(options={options}){
const DEFAULT_OPTIONS={ speed: 1, delta:200, size_resistance: 50, maxSmallTurnDeg:10, maxLargeTurnDeg:150, maxWiggleDeg:5};
this.options={};
for(var a in DEFAULT_OPTIONS)this.options[a]=(a in options?options[a]:DEFAULT_OPTIONS[a]);
this.img=document.createElement('img');
document.body.appendChild(this.img);
this.img.src="/_images/fly.gif";
this.img.style.position='fixed';
this.toggle_stationary_counter=10,
this.edge_test_counter=10,
this.large_turn_counter=0,
this.small_turn_counter=0,
this.near_edge=false,
this.top=150,
this.left=150,
this.angle_deg=10,
this.angle_rad=10,
this.direct={1:270, 2:90, 4:0, 8:180, 5:315, 9:225, 6:45, 10:135},
this.random=function(min, max, plusminus){
if (min == max) return min;
var result=Math.round(min-0.5+(Math.random()*(max-min+1)));
if(plusminus)return Math.random()>0.5?result:-result;
return result;
}
this.bug_near_window_edge=function(){
this.near_edge=0;
if(this.top<this.options.size_resistance)
this.near_edge|=1;
else if(this.top>document.documentElement.clientHeight-this.options.size_resistance)
this.near_edge|=2;
if(this.left<this.options.size_resistance)
this.near_edge|=4;
else if(this.left>document.documentElement.clientWidth-this.options.size_resistance)
this.near_edge|=8;
return this.near_edge;
}
this.onmove=function(){
if(--this.edge_test_counter<=0&&this.bug_near_window_edge()){
this.angle_deg%=360;
if(this.angle_deg<0)this.angle_deg+=360;
if(Math.abs(this.direct[this.near_edge]-this.angle_deg)>15){
var angle1=this.direct[this.near_edge]-this.angle_deg;
var angle2=(360-this.angle_deg)+this.direct[this.near_edge];
this.large_turn_angle_deg=(Math.abs(angle1)<Math.abs(angle2)?angle1:angle2);
this.edge_test_counter=10;
this.large_turn_counter=100;
this.small_turn_counter=30;
}
}
if(--this.large_turn_counter<=0){
this.large_turn_angle_deg =this.random(1, this.options.maxLargeTurnDeg, true);
this.large_turn_counter=Math.round(Math.random() * 40);
}
if (--this.small_turn_counter<=0){
this.angle_deg+=this.random(1, this.options.maxSmallTurnDeg);
this.small_turn_counter=Math.round(Math.random() * 10);
}else{
var dangle=this.random(1, this.options.maxWiggleDeg, true);
if ((this.large_turn_angle_deg > 0 && dangle < 0) || (this.large_turn_angle_deg < 0 && dangle > 0)){
dangle=-dangle;
}
this.large_turn_angle_deg-=dangle;
this.angle_deg+=dangle;
}
this.angle_rad=this.angle_deg*(Math.PI/180);
var dx = Math.cos(this.angle_rad) * this.options.speed * (this.options.delta / 100);
var dy = -Math.sin(this.angle_rad) * this.options.speed * (this.options.delta / 100);
this.left+=dx;
this.top +=dy;
this.img.style.top=this.top+'px';
this.img.style.left=this.left+'px';
this.img.style.transform='rotate('+(90-this.angle_deg)+'deg)';
setTimeout(this.onmove.bind(this), 50);
}
this.onmove();
}
var f=new Flyy({speed:1.2});
Бігаюча муха по екрану яка зупиняється і через певний час продовжує повзати.
function Fly(){
this.rand=function(min,max){
return Math.round(Math.random()*(max-min)+min);
}
this.e=function(b,a){
var c=Math.round(b+Math.random()*a);
return 0.5<Math.random()?c:-c
}
this.c=90;
this.v=Math.PI/180;
this.r=this.c*this.v;
this.f=0;
this.q={1:270,2:90,4:0,8:180,5:315,9:225,6:45,10:135};
this.d=0;
this.u=10;
this.m=0;
this.l=0;
this.el=document.createElement("img");
this.el.src="/_images/fly.gif";
this.el.style.position="fixed";
this.el.style.cursor='point';
this.el.style.zIndex="100";
this.top=this.e(50,document.documentElement.clientHeight- 50);
this.top=0<this.top?this.top:-this.top;
this.left=this.e(50,document.documentElement.clientWidth-50);
this.left=0<this.left?this.left:-this.left;
this.el.style.top=this.top+"px";
this.el.style.left=this.left+"px";
this.el._this=this;
this.el.onmousemove=function(){
this._this.next();
}
document.body.appendChild(this.el);
this.m=Math.round(10*Math.random());
this.l=Math.round(40*Math.random());
this.c=this.e(0,360);
this.onstep=function(){
if(this.j>0){
this.j--;
var b,k;
if(b=0>=--this.u)this.d=0;
if(50>this.top)this.d|=1;
if(50>this.left)this.d|=4;
if(b=0>=--this.u)this.d=0;
if(50>this.left)this.d|=4;
if(50>this.top)this.d|=1;
if(this.top>document.documentElement.clientHeight-50)this.d|=2;
if(50>this.left)this.d|=4;
if(this.left>document.documentElement.clientWidth-50)this.d|=8;
b=this.d;
if(b&&(this.c%=360,0>this.c&&(this.c+=360),15<Math.abs(this.q[this.d]-this.c))){
b=this.q[this.d]-this.c;
k=360-this.c+this.q[this.d];
this.f=Math.abs(b)<Math.abs(k)?b:k;
this.u=10;
this.l=100;
this.m=30;
}
if(0>=--this.l){
this.f=this.e(1,150);
this.l=Math.round(40*Math.random());
}
if(0>=--this.m){
this.c+=this.e(1,10);
this.m=Math.round(10*Math.random());
}else{
b=this.e(1,5);
if(0<this.f&&0>b||0>f&&0<b)b=-b;
this.f-=b;
this.c+=b;
}
this.r=this.c*this.v;
b=2*Math.cos(this.r);
k=2*-Math.sin(this.r);
this.el.style.top=(this.top+=k)+"px";
this.el.style.left=(this.left+=b)+"px";
this.el.style.transform="rotate("+(90-this.c)+"deg)";
this.timer=setTimeout(this.onstep.bind(this), 100);
}
else{
this.j=this.rand(100,500);
this.timer=setTimeout(this.onstep.bind(this), this.rand(5000,200000));
}
}
this.next=function(){
if(this.timer)clearTimeout(this.timer);
this.j=this.rand(100,500);
this.onstep();
}
this.next();
}
var f=new Fly();
Адмін 2021-02-18 18:12:56 Коментарів 3
Alsk Alsk # 2021-07-31 13:37:04ха, прикольно.
Alsk Alsk # 2021-07-31 13:39:12це у себе на сайті можна використовувати?
Адмін # 2021-08-17 22:16:42так можна.
Тільки зареєстровані користувачі можуть писати коментарі.