Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2012, 16:48
Новичок на форуме
Отправить личное сообщение для ivan2006bip Посмотреть профиль Найти все сообщения от ivan2006bip
 
Регистрация: 31.07.2012
Сообщений: 9

Змея экранная... (анимация)
Всем привет!

есть длиннющая страница, с таким же длинным бекфоном...

картинка бэкфона - вертикальная линия, не всегда ровная, местами изогнута, иногда под 90градусов...

нужно ее анамировать, чтобы при прокрутке страницы вниз она как бы прорисовывалась сверху-вниз

сначала думал наложить поверх нее блок с фикс позиционированием, чтобы он как бы закрывал нижнюю часть линии, но она иногда под 90градусов изгибается, и будет не совсем тот визуальный эффект...
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2012, 23:40
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

змею подколодную -знаю, змея траншейного -знаю, о змее экранной , не , не знаю.
По русски выражай свои мысли, а не на дивном юго-восточном диалекте марсианского языка

Последний раз редактировалось dmitriymar, 01.11.2012 в 10:52.
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2012, 09:51
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Цитата:
вертикальная линия, не всегда ровная, иногда под 90градусов
Пойду чинить свой мозг...
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2012, 12:45
Новичок на форуме
Отправить личное сообщение для ivan2006bip Посмотреть профиль Найти все сообщения от ivan2006bip
 
Регистрация: 31.07.2012
Сообщений: 9

изображение линии, надеюсь все прояснит)

вот прорисовка для вертикальных и горизонтальных линий

но вот как быть с закруглением и непрямыми углами

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Line test</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

</head>

<body>

<script>
$(document).ready(function(){
$(function(){
	
	var path = new Array(
		{
			direction: 'down',
			blocks: 20,
		},
		{
			direction: 'right',
			blocks: 10,
		},
		{
			direction: 'down',
			blocks: 17,
		},
		{
			direction: 'left',
			blocks: 25,
		},
		{
			direction: 'down',
			blocks: 30,
		},
		{
			direction: 'down',
			blocks: 30,
		}
	);
	
	var drawContainer = $('body');
	
	var blockSize = 7, //px
		startX = 300, //point
		startY = 100, //poin
		startDelay = 2000, //ms
		drawSpeed = 40;
	
	var blocks = new Array(),
		lastX = startX, lastY = startY,
		delay = startDelay,
		lastIndex = 0;
	
	//draw path
	for(var i = 0; i < path.length; i++){
		for(var f = 0; f < path[i].blocks; f++){
			
			blocks[lastIndex] = $('<div />').css({
				position: 'absolute',
				top: lastY + 'px', 
				left: lastX + 'px', 
				opacity: 0,
				width: blockSize + 'px',
				height: blockSize + 'px',
				background: '#000'
			})
			.delay(delay).animate({opacity: 1}, 200)
			.appendTo(drawContainer);
		
			lastIndex ++;
			delay += drawSpeed;
						
			switch(path[i].direction){
				case 'down':
					lastY += blockSize;
					break;
					
				case 'right':
					lastX += blockSize;
					break;
					
				case 'left':
					lastX -= blockSize;
					break;
					
				case 'up':
					lastY -= blockSize;
					break;
			}
		
		}
	}
	
});
});
</script>
</body>
</html>
Изображения:
Тип файла: jpg snake.jpg (14.2 Кб, 6 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2012, 15:18
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от ivan2006bip
но вот как быть с закруглением и непрямыми углами
используя канву или svg
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2012, 22:51
Новичок на форуме
Отправить личное сообщение для ivan2006bip Посмотреть профиль Найти все сообщения от ivan2006bip
 
Регистрация: 31.07.2012
Сообщений: 9

если бы знать еще канву...
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2012, 23:20
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

ivan2006bip,
вот:
http://w3pro.ru/article/html-5-canva...chinayushchikh
http://habrahabr.ru/post/111308/
https://developer.mozilla.org/ru/doc...D0%B5_c anvas
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает анимация при загрузки ajax ArtOs Общие вопросы Javascript 0 24.05.2012 17:52
JQuery анимация 3ukk jQuery 9 07.12.2011 19:06
Анимация движения Armen Общие вопросы Javascript 8 02.08.2011 18:32
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20