Foros del Web - Ver Mensaje Individual

derkenuke · #18 (**permalink**) 20/08/2008, 18:47

Cita:

Iniciado por PatriciaDunas

Ahora, mi pregunta... ¿¿existen páginas en diagonal?? no digo que la barra de scroll este diagonal, pero que cuando mueves la ruedita la página se mueva diagonalmente... ¿se explica lo que digo? Bueno, es nada más una pregunta... y si no se ha implementado aun, una idea...

Tan incómodo como poco intuitivo y anti usable:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
html, body { width: 10000px; height: 10000px; }
p { width: 100%; height: 500px; background-color: #99CC00; }
</style>
</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt, risus a malesuada posuere, erat nisl feugiat lacus, ut consectetuer eros erat quis mauris. Proin volutpat posuere purus. Nulla tincidunt ante ut nibh. Donec eu felis at nunc eleifend lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tristique congue justo. Pellentesque eget lorem. Integer odio quam, pellentesque at, blandit in, vehicula quis, nibh. Proin dui. In hac habitasse platea dictumst. Proin ac nisi. Morbi cursus ipsum non nibh. Etiam placerat vestibulum nibh.</p>

<p>Aenean pede. Mauris quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ac eros ut nulla condimentum semper. Donec tincidunt. Suspendisse vitae ante. Aliquam ultrices venenatis arcu. Suspendisse potenti. Nullam eu nulla. Pellentesque est arcu, faucibus sed, tincidunt id, vestibulum vitae, orci. Fusce ac lacus vel magna auctor fermentum. Sed vulputate, risus eu fermentum volutpat, nisl lectus ullamcorper enim, ac mollis dui elit eget sem. Nulla congue eros non ante. Maecenas tellus nunc, congue quis, eleifend vel, viverra at, dui. Cras suscipit, pede et facilisis tristique, massa velit lacinia nulla, nec volutpat eros nisi id urna. Vivamus sed sapien a ligula eleifend vestibulum. Nam lobortis felis nec tortor. Vestibulum a felis et diam dignissim condimentum. Aliquam auctor. Nullam laoreet, neque in sodales gravida, metus ante ornare dui, nec pellentesque purus risus et ipsum.</p>

<p>Mauris lacus. Nam sed tortor ut elit interdum bibendum. Fusce porta tortor ac erat. Duis consequat velit nec quam. Proin viverra hendrerit nibh. Praesent eget massa quis lacus venenatis sollicitudin. Aliquam erat volutpat. Aenean rutrum, nunc eget feugiat tincidunt, dui urna luctus orci, non vestibulum orci libero adipiscing metus. Aliquam pede turpis, auctor malesuada, faucibus in, tempor eu, enim. Morbi tincidunt diam nec sem. Aliquam erat volutpat. Nulla et leo id odio sollicitudin condimentum. Nam suscipit ligula ut magna. Aliquam metus nisi, ultricies a, malesuada sit amet, euismod euismod, pede.</p>

<p>Fusce dolor pede, elementum eu, facilisis eu, dictum at, metus. Donec urna. Nam posuere, ante eget suscipit adipiscing, massa turpis sagittis sem, non pulvinar lacus tellus at nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla euismod massa ut libero. Nam molestie eros non velit. In convallis urna eu ante. Integer sodales arcu a metus. Sed condimentum tellus vitae lacus. Suspendisse tincidunt arcu auctor nisl. Aliquam urna. Fusce nisi turpis, imperdiet ac, eleifend ac, egestas et, orci. Duis auctor nisi nec ligula. Donec volutpat quam. Curabitur sit amet metus eu velit tempor semper. Sed sollicitudin gravida purus. Morbi orci.</p>

<p>Donec tempor nulla et neque pellentesque sagittis. Etiam tincidunt enim. Sed eleifend consectetuer sem. Nunc ut leo ut ante sodales fermentum. Donec egestas. Pellentesque fringilla mi nec nisl. Ut libero. Donec quis lacus sit amet ligula luctus sollicitudin. Morbi vitae nibh et diam viverra fermentum. Donec dignissim neque at turpis. Sed auctor rutrum nisl. Duis elit tellus, dignissim in, ullamcorper ut, suscipit eu, risus. Vestibulum felis. Morbi euismod lacus in ipsum. Nulla at libero. Morbi dolor. Morbi a mi.</p>

<p>Etiam massa. Curabitur convallis sollicitudin metus. Nunc purus tellus, rutrum ac, tempus tincidunt, condimentum ut, orci. Nullam nibh nisi, imperdiet eget, vulputate ut, auctor nec, ipsum. Donec at felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vitae nisl ut nisi consequat iaculis. Duis dapibus dui vitae erat. Sed justo urna, convallis quis, placerat nec, cursus nec, eros. Duis non magna vel felis ultricies elementum. Aliquam tortor. Proin tempor tincidunt diam. Pellentesque hendrerit justo sit amet pede. Praesent congue elit vitae purus. Sed vehicula nunc. In dignissim, urna sit amet sagittis laoreet, sem massa pretium nunc, nec porta pede augue non orci. Etiam mauris leo, porttitor nec, rhoncus at, viverra et, purus. Maecenas viverra, risus non lobortis euismod, risus neque interdum orci, in tincidunt nisl magna tincidunt libero.</p>

<p>Integer pellentesque tortor eu augue. Proin sed dolor eu nisi ultricies auctor. Aliquam erat nibh, semper ac, porta in, pulvinar vitae, augue. Nulla justo ligula, fermentum a, posuere et, convallis sit amet, mauris. Fusce vitae libero vitae quam fermentum auctor. Phasellus ac turpis ut odio venenatis consequat. Cras ultrices diam sed ligula. Ut ut ante eget elit consectetuer tincidunt. Etiam semper erat nec nunc. Nunc non risus quis urna rutrum sollicitudin. Sed diam mauris, condimentum eget, tincidunt at, consequat viverra, libero. Nulla massa urna, pulvinar a, varius a, accumsan a, mi. Mauris fringilla urna id metus. Integer sit amet ante. Etiam lorem risus, dignissim lobortis, laoreet vel, gravida et, elit.</p>

<p>Fusce placerat libero convallis lectus. Proin sit amet eros non lorem luctus ultricies. Nam at neque in libero condimentum faucibus. Donec in felis. Pellentesque orci. Sed a lacus. Nunc lorem massa, iaculis eget, elementum eget, aliquam quis, ipsum. Nulla sagittis pharetra tellus. Aenean eleifend erat at mi. Aliquam sollicitudin, tortor nec dignissim sodales, leo urna ullamcorper risus, mollis congue nisl magna ornare orci. Quisque nisl ipsum, lobortis vitae, gravida sed, convallis sed, nibh. Cras sollicitudin enim a eros.</p>

<p>Fusce sed leo quis mauris hendrerit vehicula. Quisque lacus leo, suscipit sed, accumsan et, mollis eget, nisi. Suspendisse commodo sagittis enim. Mauris felis sapien, adipiscing eget, sodales vitae, condimentum quis, erat. In hac habitasse platea dictumst. Sed quam elit, lacinia bibendum, feugiat vitae, elementum quis, elit. Integer id dui. Phasellus eu leo sit amet ligula tempor facilisis. Donec eleifend mi vitae nulla. Donec tellus. Aliquam lorem neque, fringilla eu, consequat id, aliquam non, ipsum. Aenean eu neque. Fusce gravida, urna eu fringilla accumsan, nisi augue congue dui, vitae convallis libero enim a purus. Proin varius nulla semper lorem. Ut vitae augue eu urna placerat tempus.</p>

<p>Praesent eros. Sed laoreet vestibulum sem. Nullam viverra volutpat mi. Nunc et velit. Integer ornare. Phasellus tincidunt, elit mattis egestas faucibus, lorem massa imperdiet risus, eget scelerisque dui risus vitae nulla. Etiam eros mi, vulputate sit amet, feugiat at, hendrerit sit amet, nunc. Pellentesque egestas magna. Sed pede eros, eleifend quis, convallis eu, auctor sit amet, neque. Etiam nec nunc ac elit tempor aliquam. Suspendisse fringilla feugiat metus. Cras auctor urna at enim pretium sollicitudin. Duis id magna. Suspendisse eros quam, eleifend id, blandit sagittis, cursus vitae, purus. Nullam cursus aliquam massa. Aliquam erat volutpat. Cras ipsum urna, placerat ut, semper sollicitudin, ornare ut, enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vel felis. </p>

<script type="text/javascript">
<!--


var estabaEn = [0,0];

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function s() {
	window.onscroll = function() { return false; }
	var scrolled = getScrollXY();
	if( scrolled[0]!=estabaEn[0] )
		window.scrollTo(scrolled[0], scrolled[0]);
	else
		window.scrollTo(scrolled[1], scrolled[1]);
	estabaEn = [].concat(scrolled);
	//setTimeout("window.onscroll = s", 1);
	window.onscroll = s
}

window.onscroll = s;

// -->
</script>

</body>
</html>

Pero por poder, se puede hacer. Si eres capaz de colocar todos los elementos en diagonal con CSS... se podría hacer un experimento...

kseso?, concluyo lo mismo que tú.