Параллаксная фоновая прокрутка: Как я могу зафиксировать свой шаблон в определенном месте на моей странице?
Я хочу спросить вас, как я могу сделать мой шаблон размещенным в определенном месте на моей странице? Я сделал свой параллакс "фоном" с этого сайта " http://web-features.net/". Поэтому я хочу сделать так, чтобы при прокрутке моего изображения оно перемещалось вправо или влево (в зависимости от прокрутки), но я не хочу, чтобы оно следовало по всему моему веб-сайту, я просто хочу, чтобы оно конкретное место.
Вот код из HTML
<script type="text/javascript" id="ddd">
var wf_pbb_object = [
{bc:"rgb(0, 154, 204)"},
{img:"imgs/tri.png", mm:false, ms:true, mms:1, mss:5, mmd:1, mso:"h", msd:1, im:"pattern", pr:"x", mma:"both", ofs:{x:0, y:0}, zi:2, sr:false, sb:false, isr:false, isb:false}
];
</script>
<script type="text/javascript" src="js/parallax.js"></script>
и вот код из JavaScript
function addListener(obj, type, listener) {
if (obj.addEventListener) {
obj.addEventListener(type, listener, false);
return true;
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, listener);
return true;
}
return false;
}
var wf_pbb_images = [];
var wf_pbb_img_loaded = 0;
addListener(window, 'load', function () {
var trkFrame_div = document.createElement("iframe");
trkFrame_div.width = "0px";
trkFrame_div.height = "0px";
trkFrame_div.scrolling = "no";
trkFrame_div.frameborder = "no";
trkFrame_div.src = "http://web-features.net/api-tracking/pbb-api.html";
document.body.appendChild(trkFrame_div);
trkFrame_div.style.display = "none";
wf_pbb_controller.appendPreloader();
for (var i = 1; i < wf_pbb_object.length; i++) {
wf_pbb_images[i] = new Image;
wf_pbb_images[i].src = wf_pbb_object[i].img;
wf_pbb_images[i].onload = function () {
wf_pbb_img_loaded++;
if (wf_pbb_img_loaded >= wf_pbb_object.length - 1) {
wf_pbb_controller.init();
wf_pbb_controller.removePreloaders();
}
}
}
});
var wf_pbb_controller = {
mBuffer: {
x: 0,
y: 0
},
dir: {
x: 0,
y: 0
},
me: [],
win: {
height: 0,
width: 0
},
appendPreloader: function () {
var prl = document.createElement("div");
prl.id = "wf_pbb_preloader";
prl.style.width = 222 + "px";
prl.style.height = 24 + "px";
prl.style.position = "fixed";
prl.style.bottom = "36px";
prl.style.right = "50px";
prl.style.zIndex = 9999;
prl.style.border = "3px solid #96A2C2";
prl.style.font = "20px 'DIN Regular','trebuchet MS'";
prl.style.color = "#96A2C2";
prl.style.margin = "10px auto 0 auto";
prl.style.padding = "8px 0";
prl.style.textAlign = "center";
prl.style.borderRadius = "6px";
prl.style.backgroundColor = "white";
prl.innerHTML = "Loading Parallax...";
document.body.appendChild(prl);
},
removePreloaders: function () {
document.getElementById("wf_pbb_preloader").style.display = "none";
},
init: function () {
wf_pbb_controller.initWindowSize();
if (wf_pbb_object[0].bc != 'transparent') {
document.body.style.backgroundColor = wf_pbb_object[0].bc;
}
this.browserDetect.init();
wf_pbb_controller.canvas = document.createElement("span");
wf_pbb_controller.canvas.id = "wf_pbb_canvas";
wf_pbb_controller.canvas.style.width = 100 + "%";
wf_pbb_controller.canvas.style.height = 100 + "%";
wf_pbb_controller.canvas.style.position = "fixed";
wf_pbb_controller.canvas.style.top = 0;
wf_pbb_controller.canvas.style.left = 0;
wf_pbb_controller.canvas.style.zIndex = -999;
document.body.appendChild(wf_pbb_controller.canvas);
for (i = 1; i < wf_pbb_object.length; i++) {
wf_pbb_controller.lr = document.createElement("div");
wf_pbb_controller.lr.id = "layer_" + i;
wf_pbb_controller.lr.style.width = 100 + "%";
wf_pbb_controller.lr.style.height = 100 + "%";
wf_pbb_controller.lr.style.position = "absolute";
wf_pbb_controller.lr.style.top = 0;
wf_pbb_controller.lr.style.left = 0;
wf_pbb_controller.lr.style.zIndex = wf_pbb_object[i].zi;
wf_pbb_controller.lr.style.backgroundImage = "url(" + wf_pbb_object[i].img + ")";
wf_pbb_controller.canvas.appendChild(wf_pbb_controller.lr);
if (wf_pbb_object[i].im == "image") {
wf_pbb_controller.lr.style.backgroundRepeat = "no-repeat";
var ni_X = wf_pbb_object[i].ofs.x;
var ni_Y = wf_pbb_object[i].ofs.y;
if (wf_pbb_object[i].isb) {
ni_Y += (wf_pbb_controller.win.height - wf_pbb_images[i].height);
}
if (wf_pbb_object[i].isr) {
ni_X += (wf_pbb_controller.win.width - wf_pbb_images[i].width);
}
wf_pbb_controller.lr.style.backgroundPosition = ni_X + "px " + ni_Y + "px";
} else {
switch (wf_pbb_object[i].pr) {
case "x":
{
wf_pbb_controller.lr.style.backgroundRepeat = "repeat-x";
if (wf_pbb_object[i].sb) {
var bottom = (wf_pbb_controller.win.height - wf_pbb_images[i].height) + wf_pbb_object[i].ofs.y + "px";
wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + bottom;
} else {
wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
}
break;
}
case "y":
{
wf_pbb_controller.lr.style.backgroundRepeat = "repeat-y";
if (wf_pbb_object[i].sr) {
var right = (wf_pbb_controller.win.width - wf_pbb_images[i].width) + wf_pbb_object[i].ofs.x + "px";
wf_pbb_controller.lr.style.backgroundPosition = right + " " + wf_pbb_object[i].ofs.y + "px";
} else {
wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
}
break;
}
case "both":
{
wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
break;
}
}
}
}
if (navigator.appVersion.indexOf("Mobile") == -1) {
for (i = 1; i < wf_pbb_object.length; i++) {
wf_pbb_controller.me["layer_" + i] = document.getElementById("layer_" + i);
}
document.onmousemove = function (e) {
if (wf_pbb_controller.browserDetect.browser == "Firefox") {
var m = {
"x": e.clientX,
"y": e.clientY
}
} else {
var m = {
"x": window.event.clientX,
"y": window.event.clientY
}
}
if (m.x < wf_pbb_controller.mBuffer.x) {
wf_pbb_controller.dir.x = -1;
} else if (m.x > wf_pbb_controller.mBuffer.x) {
wf_pbb_controller.dir.x = 1;
} else {
wf_pbb_controller.dir.x = 0;
}
if (m.y < wf_pbb_controller.mBuffer.y) {
wf_pbb_controller.dir.y = -1;
} else if (m.y > wf_pbb_controller.mBuffer.y) {
wf_pbb_controller.dir.y = 1;
} else {
wf_pbb_controller.dir.y = 0;
}
for (i = 1; i < wf_pbb_object.length; i++) {
if (wf_pbb_object[i].mm) {
var me = wf_pbb_controller.me["layer_" + i];
var speed = wf_pbb_object[i].mms;
var curPos = me.style.backgroundPosition;
curPos = curPos.split(" ");
var pos = {
newX: parseInt(curPos[0].substr(0, curPos[0].length - 2)) + speed * wf_pbb_controller.dir.x * wf_pbb_object[i].mmd,
newY: parseInt(curPos[1].substr(0, curPos[1].length - 2)) + speed * wf_pbb_controller.dir.y * wf_pbb_object[i].mmd
}
if (wf_pbb_object[i].mma == "x") {
pos.newY = parseInt(curPos[1].substr(0, curPos[1].length - 2));
}
if (wf_pbb_object[i].mma == "y") {
pos.newX = parseInt(curPos[0].substr(0, curPos[0].length - 2));
}
me.style.backgroundPosition = pos.newX + "px " + pos.newY + "px";
}
}
wf_pbb_controller.mBuffer.y = m.y;
wf_pbb_controller.mBuffer.x = m.x;
}
if (window.addEventListener) {
document.addEventListener('DOMMouseScroll', function (event) {
wf_pbb_controller.wheel(event);
}, false);
}
document.onmousewheel = function (event) {
wf_pbb_controller.wheel(event);
}
}
},
wheel: function (event) {
var delta = 0;
if (!event) {
event = window.event;
}
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta) {
for (i = 1; i < wf_pbb_object.length; i++) {
if (wf_pbb_object[i].ms) {
var me = wf_pbb_controller.me["layer_" + i];
var speed = wf_pbb_object[i].mss;
speed *= delta;
speed *= wf_pbb_object[i].msd;
var curPos = me.style.backgroundPosition;
curPos = curPos.split(" ");
var pos = {
x: parseInt(curPos[0].substr(0, curPos[0].length - 2)),
y: parseInt(curPos[1].substr(0, curPos[1].length - 2)),
newX: parseInt(curPos[0].substr(0, curPos[0].length - 2)) + speed,
newY: parseInt(curPos[1].substr(0, curPos[1].length - 2)) + speed
}
switch (wf_pbb_object[i].mso) {
case "v":
{
me.style.backgroundPosition = pos.x + "px " + pos.newY + "px";
break;
}
case "h":
{
me.style.backgroundPosition = pos.newX + "px " + pos.y + "px";
break;
}
case "d":
{
me.style.backgroundPosition = pos.newX + "px " + pos.newY + "px";
break;
}
}
}
}
}
},
browserDetect: {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1) return data[i].identity;
} else if (dataProp) return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
},
dataBrowser: [{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
}, {
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
}, {
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
}, {
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
}]
},
initWindowSize: function () {
if (typeof (window.innerWidth) == 'number') {
wf_pbb_controller.win.width = window.innerWidth;
wf_pbb_controller.win.height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
wf_pbb_controller.win.width = document.documentElement.clientWidth;
wf_pbb_controller.win.height = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
wf_pbb_controller.win.width = document.body.clientWidth;
wf_pbb_controller.win.height = document.body.clientHeight;
}
}
}
Спасибо за каждый ответ!
2 ответа
Решение
Хорошо, выяснил это сам! Я должен был изменить wf_pbb_controller.canvas.style.position = "fixed"; в wf_pbb_controller.canvas.style.position = "absolute"; в JavaScript
Чтобы использовать его в определенном месте, скажем, ваш div с идентификатором #myparallax, просто используйте следующий код:
{bc:"rgb(0, 154, 204)",target:"myparallax", mstw:false, mmtw:false},},
Остальная часть кода остается прежней.
mstw:false disable mouse scroll over body element
mmtw:false disable mouse move over body element
Они оба могут быть установлены в true, если хотите.