Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Пример скрипта: нитка с шариками
Скрипт показывает эффект эластичного перемещения небольших картинок по экрану. В данном примере, в качестве картинок используются небольшие шарики, изображающие привязанную к курсору эластичную нить.
Исходный код этого примера:
<style>
.wrapper {
position: relative;
height: 50px;
}
.wrapper div {
position: absolute;
height: 11px;
width: 11px;
}
.wrapper div img {
display: block;
}
</style>
<div class="wrapper">
<div id="dot0" style="left:0; top:0;"><img src="bullet.gif"></div>
<div id="dot1" style="left:0; top:0;"><img src="bullet.gif"></div>
<div id="dot2" style="left:0; top:0;"><img src="bullet.gif"></div>
<div id="dot3" style="left:0; top:0;"><img src="bullet.gif"></div>
<div id="dot4" style="left:0; top:0;"><img src="bullet.gif"></div>
<div id="dot5" style="left:0; top:0;"><img src="bullet.gif"></div>
<div id="dot6" style="left:0; top:0;"><img src="bullet.gif"></div>
</div>
<script type="text/javascript">
var nDots = 7;
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;
var followmouse = true;
var dots = new Array();
init();
function init() {
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
for (i = 0; i < nDots; i++) {
dots[i].obj.style.left = dots[i].X;
dots[i].obj.style.top = dots[i].Y;
}
setTimeout(function (){setInterval("animate()", 20)}, 1000);
}
function dot(i) {
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
this.obj = document.getElementById("dot" + i);
this.style = window.getComputedStyle(this.obj);
console.log(this);
}
function MoveHandler(e) {
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
document.addEventListener('mousemove',MoveHandler);
function vec(X, Y) {
this.X = X;
this.Y = Y;
}
// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring) {
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx * dx + dy * dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() {
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}
for (i = start; i < nDots; i++) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i - 1, i, spring);
}else if (i < (nDots - 1)) {
springForce(i + 1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X) / MASS, (spring.Y + resist.Y) / MASS + GRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
height = wH();
width = wW();
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.style.left = dots[i].X;
dots[i].obj.style.top = dots[i].Y;
console.log(i,dots[i].obj.style.left,dots[i].obj.style.top);
}
}
/*
function wW(){
if(window.visualViewport && window.visualViewport.width) return window.visualViewport.width;
var de = document.documentElement;
return self.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth;
}
function wH(){
if(window.visualViewport && window.visualViewport.height) return window.visualViewport.height;
var e=document.documentElement;
return self.innerHeight||(e&&e.clientHeight)||document.body.clientHeight;
}
*/
</script>
.
Прокомментировать/Отблагодарить