Создание сайтов на Joomla 1.5/2.5, Качественно, недорого!

Duke_Cheb · 11.09.2013, 23:33

Основной текст статичный и привязан к скроллингу, третий (задний бэкграунд) тоже - просто заливка цветом #1A1A1A, а первый и второй бэкграунды через css в конце <body> прописаны.
Код, содранный прямо с этого сайта:

+ Нажмите здесь, чтобы увидеть полный текст

Стили в 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("− ");
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.

Результаты опроса: Ваш выбор?
Joomla 1.5	1	20.00%
Joomla 2.5	3	60.00%
Другое	1	20.00%
Голосовавшие: 5. Вы ещё не голосовали в этом опросе

Похожие темы
Тема	Автор	Разделы	Ответы	Последний ответ
Создание сайтов по смешным ценам!	hotsman	Программисты и компьютеры в ПМР	29	11.07.2018 11:54
Ввод и вывод Webmoney, LR. Быстро, качественно, недорого!	Nextus	Бесплатные рекламные объявления	2	12.03.2013 21:11
Создание сайтов для организаций	PMR	Товары и услуги	14	30.05.2012 22:37
Предлагаем создание сайтов и комплексные провдижение.	Catoinoma	Встречи и сходки	1	26.08.2010 21:52
Создание сайтов визиток	PMR	Бесплатные рекламные объявления	16	31.08.2009 17:20

Регистрация

Справка

Сообщество

Календарь

Сообщения сегодня

Сообщения за неделю

≥ Поиск ≤

Создание сайтов на Joomla 1.5/2.5, Качественно, недорого!

Фото и альбомы

Пользователи

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

Создание сайтов на Joomla 1.5/2.5, Качественно, недорого!