Показать сообщение отдельно
 11.09.2013, 23:33  
По умолчанию Re: Создание сайтов на Joomla 1.5/2.5, Качественно, недорого!
#15
  Duke_Cheb Duke_Cheb вне форума
  The Scarecrow
 Аватар для Duke_Cheb
Детали профиля (+/-)
Ответов: 5,851
Регистрация: 26.03.2012
Спасибо:1,633/856
Не понравилось:33/2
Репутация: 5587

Основной текст статичный и привязан к скроллингу, третий (задний бэкграунд) тоже - просто заливка цветом #1A1A1A, а первый и второй бэкграунды через css в конце <body> прописаны.
Код, содранный прямо с этого сайта:
+ Нажмите здесь, чтобы увидеть полный текст
<div class="parallax">
<div data-speed="0.7">
<span class="p p1"></span>
<span class="p p2"></span>
<span class="p p3"></span>
<span class="p p4"></span>
<span class="p p5"></span>
<span class="p p6"></span>
</div>
<div data-speed="1.5">
<span class="l l2"></span>
<span class="l l4"></span>
<span class="l l6"></span>
</div>
<div data-speed="2">
<span class="l l1"></span>
<span class="l l3"></span>
<span class="l l5"></span>
</div>

</div>
Стили в css (для каждой красной линии свой) прописаны примерно так:
.parallax .l4 **
background-image: url("../img/z/l4.png");
height: 124px;
top: 990px;
**
data-speed - атрибут скорости анимации, берется из библиотеки JQuerry соответствующего плагина.

Например, для блока:
<div id="elem" data-speed="0.800">
какая-то HTML-разметка
</div>
В JS-плагине прописывается:
var count = $(#elem).data('speed');
И в переменную speed запишется значение 0.800


P.S. Если кому-то, не дай бог, уж совсем интересно, вот вся использованная здесь библиотека:

1-я половина:
+ Нажмите здесь, чтобы увидеть полный текст
"use strict";
/*
if($varTempSave)
**
var $varTempSave = 1;
***/
$(function() **
$('h1.h1-link:contains("Настенные котлы")').empty().prepend('<a href="/cat/household-equipment/wall-boilers/">Настенные котлы</a>');
$('h1.h1-link:contains("Напольные котлы")').empty().prepend('<a href="/cat/household-equipment/5/">Напольные котлы</a>');
$('h1.h1-link:contains("Конденсационные котлы")').empty().prepend('<a href="/cat/household-equipment/6/">Конденсационные котлы</a>');
$("line_ok").prepend("&minus; ");
parallaxBackground(**
selector : '.parallax'
**);
tempControl(**
selector : '#temp-control',
preload : ['/static/img/h1.png'],
set : $varTempSave
**);
boilerSplash(**
selector : '#boiler-splash'
**);
topMenu(**
selector: '#top-menu',
animation : **
duration : 300,
easing : 'swing'
**
**);
productsPage(**
selector : '.products'
**);
tabs(**
selector : '.tabs-block'
**);
pageBlock(**
selector : '.page-block'
**);
cities(**
selector : '.cities-wrap'
**);
selects(**
selector : 'select.stylized'
**);
Popup.setupAjaxLinks();
newsView.show();
popupFiles(**
selector : 'a.sPopup'
**);
**);
function parallaxBackground(options) **
var opt = $.extend(**
selector : '.parallax'
**, options);
var $layers = $(opt.selector).find('div');
if (!$layers.length) return;
var d = [];
for (var i = 0; i < $layers.length; i++) **
var l = $layers[i],
h = l.scrollHeight;
$(document.createElement('div')).html(l.innerHTML) .css(**
top : h,
height : h
**).appendTo(l);
$layers.eq(i).css(**
height : '100%'
**);
d.push(**
el : l,
h : h,
k : $layers.eq(i).data('speed') || 1
**);
**
var $w = $(window).scroll(scrollHandler);
function scrollHandler() **
var orig = $w.scrollTop(), t = 0, e = null;
for (var i = 0; i < d.length; i++) **
e = d[i];
t = orig * e.k;
if (t > e.h) **
t = t % e.h;
**
e.el.scrollTop = t;
**
**
**
function supportsVml() **
if (typeof supportsVml.supported == "undefined") **
var a = document.body.appendChild(document.createElement(' div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
**
return supportsVml.supported
**
function boilerSplash(options) **
var opt = $.extend(**
radius : 78,
fadeDuration : 120
**, options);
var $wrap = $(opt.selector);
if (!$wrap.length) return;
var _s2 = 1/Math.sqrt(2),
r = opt.radius;;
var $back = $wrap.find('.back'),
$front = $wrap.find('.front');
var src = $front.css('background-image').match(/url\(['"]?([^'"\)]+)['"]?\)/)[1];
var offset = $front.offset(),
W = $front.width(),
H = $front.height(),
x1 = offset.left - r, x2 = offset.left + W + r,
y1 = offset.top - r, y2 = offset.top + H + r,
hover = false;
var img = new Image();
var moveHandler = null;
var c = document.createElement('canvas');
if (c.getContext) **
var ctx = c.getContext('2d');
c.width = $front.width();
c.height = $front.height();
$front.append(c);
moveHandler = function(e) **
var x = e.pageX,
y = e.pageY;
if ((x > x1) && (x < x2) && (y > y1) && (y < y2)) **
hover = true;
ctx.clearRect(0, 0, c.width, c.height);
ctx.save();
ctx.beginPath();
ctx.arc(x - offset.left, y - offset.top, r, 0, Math.PI * 2, true);
ctx.fillStyle = 'black';
ctx.fill();
ctx.globalCompositeOperation = 'source-out';
ctx.drawImage(img, 0, 0);
ctx.restore();
** else if (hover) **
hover = false;
ctx.clearRect(0, 0, c.width, c.height);
ctx.drawImage(img, 0, 0);
**
**;
** else if (supportsVml()) **
var doc = window.document;
doc.createStyleSheet().addRule(".vml", "behavior:url(#default#VML)");
var createNode = null;
try **
!doc.namespaces.vml && doc.namespaces.add("vml", "urn:schemas-microsoft-com:vml");
createNode = function (tagName) **
return doc.createElement('<vml:' + tagName + ' class="vml">');
**;
** catch (e) **
createNode = function (tagName) **
return doc.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="vml">');
**;
**
var v = createNode('shape');
v.coordorigin = '0 0';
v.coordsize = '1 1';
v.path = 'm0,0 l' + W + ',0' + ' l' + W + ',' + H + ' l0,' + H + ' x e';
v.stroked = false;
v.style.position = 'absolute';
v.style.zIndex = 999;
v.style.left = '0px';
v.style.top = '0px';
v.style.width = 1;
v.style.height = 1;
var fill = createNode('fill');
fill.type = 'tile';
fill.src = src;
v.appendChild(fill);
$front.append(v);
moveHandler = function(e) **
var x = e.pageX,
y = e.pageY,
a;
if ((x > x1) && (x < x2) && (y > y1) && (y < y2)) **
x -= offset.left;
y -= offset.top;
v.path = 'ar' + (x-r) + ',' + (y-r) + ',' + (x+r) + ',' + (y+r) + ',' + (x+r) + ',' + y + ',' + (x-r) + ',' + y + ' ' +
'l0,' + y + ' ' +
'l0,0 ' +
'l' + W + ',0 ' +
'l' + W + ',' + H + ' ' +
'l0,' + H + ' ' +
'l0,' + y + ' ' +
'l' + (x-r) + ',' + y + ' ' +
'at' + (x-r) + ',' + (y-r) + ',' + (x+r) + ',' + (y+r) + ',' + (x-r) + ',' + y + ',' + (x+r) + ',' + y + ' ' +
'x e';
if ((x-r < 0) || (y-r < 0)) **
fill.position = -Math.min(x-r, 0)/(W + r - x) + ',' + (-Math.min(y-r, 0)) /(H + r - y);
** else **
fill.position = '0,0';
**
** else if (hover) **
fill.position = '0,0';
v.path = 'm0,0 l' + W + ',0' + ' l' + W + ',' + H + ' l0,' + H + ' x e';
**
**;
**
if (moveHandler) **
img.onload = function() **
hover = true;
$front.css(** 'background-image' : 'none' **);
$(document.body).mousemove(moveHandler).trigger('m ousemove');
**;
img.src = src;
**
**
function tempControl(options) **
var opt = $.extend(**
classes : ['t-cold', 't-norm', 't-hot'],
fallbackContainer : '#footer'
**, options);
var $el = $(opt.selector);
if (opt.preload) **
$.each(opt.preload, function(i, src) **
var img = new Image;
img.src = src;
**);
**
if (!$el.length) **
$el = $('<div class="t-control" id="temp-control"><div></div></div>').appendTo(opt.fallbackContainer);
**
var offset = $el.offset(), w = $el.width() / 3, cur = 1, cl = opt.classes;;
var $body = $(document.body).addClass(cl[cur]);
for (var i = 0; i < opt.classes.length; i++) **
$el.append('<ins class="' + cl[i].split('-')[1] + '"></ins>');
**
var $ins = $el.find('ins').click(select);
$el.find('div').click(selectNext);
set(opt.set);
function select(e) **
e.stopImmediatePropagation();
e.preventDefault();
set($ins.index(this));
**
function selectNext(e) **
e.stopImmediatePropagation();
e.preventDefault();
set(cur+1);
**
function set(newIndex) **
if (newIndex > cl.length - 1) **
newIndex = newIndex % cl.length;
**
if (cur !== newIndex) **
$body.removeClass(cl[cur]).addClass(cl[newIndex]);
cur = newIndex;
**
ajaxSaveStatus(newIndex);
**
function ajaxSaveStatus(newIndex)
**
$.get('/ajax/tempsave/', ** 'status' : newIndex**, function(data)**
**);
**
**
function topMenu(options) **
var opt = $.extend(**
spy : true,
spyOffset : 20,
recalcInterval : 1000
**, options);
var $menu = $(opt.selector);
if (!$menu.length) return;
var top = $menu.offset().top, h = $menu.height();
var $w = $(window).scroll(function() **
if ($w.scrollTop() > top) **
$menu.addClass('fixed');
** else **
$menu.removeClass('fixed');
**
**);
var _scroll = $.browser.webkit ? document.body : document.documentElement;
$menu.find('.top a').click(function(e) **
e.preventDefault();
scroll(0);
**);
if (opt.spy) **
var o = [];
var $links = $menu.find('ul a').each(function() **
var hash = this.href.split('#')[1];
if (hash) **
var $o = $('a[name="' + hash + '"], a[id="' + hash + '"]');
if ($o.length) **
o.push(this._o = **
item : this,
$o : $o,
top : $o.offset().top - h - opt.spyOffset
**);
**
**
$(this).click(clickHandler);
**);
if (o.length) **
window.setInterval(function() **
for (var i = 0; i < o.length; i++) **
o[i].top = o[i].$o.offset().top - h - opt.spyOffset
**
**, opt.recalcInterval);
o.sort(function(a, b) **
if (a.top > b.top)
return -1;
if (a.top < b.top)
return 1;
if (a.top = b.top)
return 0;
**);
var $w = $(window).scroll(function() **
var t = $w.scrollTop();
if (document.documentElement.scrollHeight - document.documentElement.clientHeight == t) **
$links.removeClass('active');
$(o[0].item).addClass('active');
return;
**
for (var i = 0; i < o.length; i++) **
if (t >= o[i].top) **
$links.removeClass('active');
$(o[i].item).addClass('active');
return;
**
**
$links.removeClass('active');
**).trigger('scroll');
**
**
function scroll(pos) **
if (!opt.animation) **
$w.scrollTop(pos);
** else **
$(_scroll).stop().animate(**
scrollTop : pos
**, opt.animation.duration, opt.animation.easing);
**
**

Жирно-синим выделена строка, которая, как раз и отвечает за атрибут data-speed.
________________
If you're playing Rock 'n' Roll, play It without lies.
Always be as brave and proud, like an eagle in the sky!
If you want to be remembered, there is one thing you should do:
When you play your music, gotto keep It true
!
© "Majesty"

Последний раз редактировалось Duke_Cheb; 12.09.2013 в 00:40.
  Вверх