Witam.
W jakich językach/przy użyciu jakich technologii są napisane 2 poniższe strony? Przewijając w dół są bardzo ciekawe efekty.
0
0
Zapewne JS.
PS. Konik wymiata.
0
Ta pierwsza to https://github.com/Prinzhorn/skrollr
0
0
http://nowa.iet.agh.edu.pl/stronabledu404 - concrete5
http://netmasterscup.pl/ - też jakiś mało znany/autorski cms
0
Pierwszy efekt można osiągnąć na przykład tak (testowałem tylko na FF 27):
<html>
<head>
<script>
// dwie funkcje pomocnicze - kod znalazłem gdzieś na necie, bo różne przeglądarki inaczej reagują, lepiej skorzystac z jQuery.
function documentHeight()
{
var body = document.body;
var html = document.documentElement;
return Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
}
function getScrollTop()
{
if (typeof pageYOffset != 'undefined')
{
return pageYOffset;
}
else
{
var B = document.body;
var D = document.documentElement;
D = (D.clientHeight) ? D : B;
return D.scrollTop;
}
}
// logika
function pokazProcent()
{
var procentWysokosci = getScrollTop() / (documentHeight() - window.innerHeight); // (liczba od 0 do 1)
var liczbaKlatek = 13; // to jest np. 13 roznych obrazkow
var aktualnaKlatka = 1 + Math.round(procentWysokosci * (liczbaKlatek - 1)); // "dzielimy scrollbara" na 13 części - aktualnaKlatka może Ci mówić o numerze obrazka
var widok = document.getElementById("widok");
widok.innerHTML = Math.round(procentWysokosci * 100) + "%<br/>klatka " + aktualnaKlatka + " z " + liczbaKlatek;
}
window.addEventListener('scroll', pokazProcent, false);
window.addEventListener('load', pokazProcent, false);
</script>
</head>
<body>
<div id="dlugidiv" style="height: 5000px"></div>
<div id="widok" style="position: fixed; top: 50px; left: 50px;">Trwa ladowanie strony...</div>
</body>
</html>
0
Jest wiele technik w których można pisać takie rzeczy. Generalnie szukaj pod hasłem parallax.