Scroll down item fall script?
3 posters
Page 1 of 1
Scroll down item fall script?
I have seen a cool script on a site and would like to ask if someone could make something similar?
Here is the site: http://www.origo.hu/index.html
If you scroll down on the left side a christmas tree fades in and as you scroll down and down ornaments fall on it and gifts appear around it. =o
Any help is appreciated!
Here is the site: http://www.origo.hu/index.html
If you scroll down on the left side a christmas tree fades in and as you scroll down and down ornaments fall on it and gifts appear around it. =o
Any help is appreciated!
Last edited by Fédra on December 13th 2014, 9:01 am; edited 1 time in total
Guest- Guest
Re: Scroll down item fall script?
Hi Fédra,
Something like this ?
Don't mind the flat graphics, I needed something to work with while I was putting it together.
Go to Administration Panel > Modules > JavaScript codes management > Create a new script
Title : Your choice
Placement : Your choice
You can edit a few things in the script.
1. ) If you see any image, you can replace it with your own if you like. Just check to the left for its name, so you know what it is.
2. ) position : This just changes the position of the decoration from right to left and vice versa.
Something like this ?
Don't mind the flat graphics, I needed something to work with while I was putting it together.
Go to Administration Panel > Modules > JavaScript codes management > Create a new script
Title : Your choice
Placement : Your choice
- Code:
$(function() {
var position = 'right', // left or right ; position of the the decoration
y_thn = window.pageYOffset,
// create a bunch of objects
// you can change the images below if you like
tree = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/tree10.png', 0, 200),
lights = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/lights10.png', 0, 200),
deco1 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l110.png', 45, 0),
deco2 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l210.png', 60, 30),
deco3 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l310.png', 30, 100),
deco4 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l410.png', 60, 70),
deco5 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l510.png', 75, 125),
deco6 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l610.png', 20, 155),
deco7 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l710.png', 85, 145),
deco8 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l810.png', 55, 190);
function Dynamic(img, x,y) {
// create the image, then apply its source and style
this.el = document.createElement('IMG');
this.el.src = img, this.el.setAttribute('style','position:fixed;'+position+':'+x+'px;top:'+y+'px;opacity:0;');
/* -- START fade -- */
// n refers to the amount of opacity you want to add or subtract
this.fadeIn = function(n) {
var opa = opaN(this.el);
if (opa >= 1) return this.el.style.opacity = 1;
this.el.style.opacity = opa + n
};
this.fadeOut = function(n) {
var opa = opaN(this.el);
if (opa <= 0) return this.el.style.opacity = 0;
this.el.style.opacity = opa - n
};
/* -- END fade -- */
/* -- START movement_Y -- */
// s refers to the value you want to stop at
this.up = function(s) {
var top = topN(this.el);
if (top <= s) return this.el.style.top = s + 'px';
this.el.style.top = top - 5 + 'px'
};
this.down = function(s) {
var top = topN(this.el);
if (top >= s) return this.el.style.top = s + 'px';
this.el.style.top = top + 5 + 'px'
};
/* -- END movement_Y -- */
document.body.appendChild(this.el); // add the image to the document body
};
window.onscroll = function() {
var y_now = window.pageYOffset; // get y on scroll for comparison to y_thn
/* -- START scroll down -- */
if (y_now > y_thn) {
// tree and lights
tree.fadeIn(0.05);
lights.fadeIn(0.04);
// decorations
deco1.fadeIn(0.04), deco1.down(225);
deco2.fadeIn(0.04), deco2.down(255);
deco3.fadeIn(0.04), deco3.down(325);
deco4.fadeIn(0.04), deco4.down(295);
deco5.fadeIn(0.04), deco5.down(350);
deco6.fadeIn(0.04), deco6.down(390);
deco7.fadeIn(0.04), deco7.down(380);
deco8.fadeIn(0.04), deco8.down(425);
y_thn = y_now;
}
/* -- END scroll down -- */
/* -- START scroll up -- */
if (y_now < y_thn) {
// tree and lights
tree.fadeOut(0.05);
lights.fadeOut(0.04);
// decorations
deco1.fadeOut(0.04), deco1.up(0);
deco2.fadeOut(0.04), deco2.up(30);
deco3.fadeOut(0.04), deco3.up(100);
deco4.fadeOut(0.04), deco4.up(70);
deco5.fadeOut(0.04), deco5.up(125);
deco6.fadeOut(0.04), deco6.up(155);
deco7.fadeOut(0.04), deco7.up(145);
deco8.fadeOut(0.04), deco8.up(190);
y_thn = y_now;
}
/* -- END scroll up -- */
};
function opaN(el) { return Number(el.style.opacity) }
function topN(el) { return Number(el.style.top.replace(/(px|%)/,'')) }
});
You can edit a few things in the script.
1. ) If you see any image, you can replace it with your own if you like. Just check to the left for its name, so you know what it is.
2. ) position : This just changes the position of the decoration from right to left and vice versa.
Re: Scroll down item fall script?
Wow, this is awesome. How do we get these deco8.down(425) etc numbers?
Tonight- Forumember
- Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia
Re: Scroll down item fall script?
To create a new dynamic element declare a variable in the script like :
The numbers after the image are X and Y coordinates. ( they go by pixels )
I have some comments above the methods in the script already, but. For fadeIn(n) and fadeOut(n), n refers to the amount of opacity you want to add or subtract. For example :
For the up(s) and down(s) methods, s refers to the coordinate you want to stop at. For example :
Literally myDeco will go up to top:0px; and go no further. Down is the same, it will go down to top:255px; and wont go past that value.
- Code:
var myDeco = new Dynamic('example.gif', 25, 0);
The numbers after the image are X and Y coordinates. ( they go by pixels )
I have some comments above the methods in the script already, but. For fadeIn(n) and fadeOut(n), n refers to the amount of opacity you want to add or subtract. For example :
- Code:
var fadeInt = window.setInterval(function() {
if (Number(myDeco.el.style.opacity) >= 1) return window.clearInterval(fadeInt);
myDeco.fadeIn(0.01);
},15);
For the up(s) and down(s) methods, s refers to the coordinate you want to stop at. For example :
Literally myDeco will go up to top:0px; and go no further. Down is the same, it will go down to top:255px; and wont go past that value.
- Code:
window.onscroll = function() {
myDeco.down(255);
}
Re: Scroll down item fall script?
Woah, thank you sooo much! It's perfect!!
From my side it's completed, I don't know if the others still have any questions....
Thank you, thank you!
From my side it's completed, I don't know if the others still have any questions....
Thank you, thank you!
Guest- Guest
Re: Scroll down item fall script?
You're welcome
Topic archived
If there are any questions about the decoration you can create a new topic.
Topic archived
If there are any questions about the decoration you can create a new topic.
Similar topics
» One Piece RP - Rise and Fall
» Profile/Item Question
» Mask the item if it is empty
» Suggested Script (Need Someone that can read script)
» register Script (I Need The Script)
» Profile/Item Question
» Mask the item if it is empty
» Suggested Script (Need Someone that can read script)
» register Script (I Need The Script)
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum