I am currently developing JavaScript code that will enable the use of HTML like the example below:
<div class="box" data-vert-speed="7">ContentDiv1</div>
<div class="box" data-hori-speed="10">ContentDiv2</div>
<div class="box" data-rota-speed="5">ContentDiv3</div>
<div class="box" data-vert-speed="2.4">ContentDiv4</div>
<div class="box" data-hori-speed="1.3">ContentDiv5</div>
<div class="box" data-rota-speed="2.3">ContentDiv6</div>
The aim is to have each div perform a CSS transform based on the scrolling of the page, with the rate of transformation determined by the attribute value.
The transforms are defined as "vert" for vertical, "hori" for horizontal, and "rota" for rotation.
Currently, the JavaScript code I have only works for one type of attribute and I am struggling to make it work for all three types of attributes.
$.fn.moveItrota = function(){
var $windowr = $(window);
var instancesr = [];
$(this).each(function(){
instancesr.push(new moveItItemrota($(this)));
});
window.onscroll = function(){
var scrollTopr = $windowr.scrollTop();
instancesr.forEach(function(instr){
instr.updater(scrollTopr);
});
}
}
$.fn.moveItvert = function(){
var $windowv = $(window);
var instancesv = [];
$(this).each(function(){
instancesv.push(new moveItItemvert($(this)));
});
window.onscroll = function(){
var scrollTopv = $windowv.scrollTop();
instancesv.forEach(function(instv){
instv.updatev(scrollTopv);
});
}
}
$.fn.moveIthori = function(){
var $windowh = $(window);
var instancesh = [];
$(this).each(function(){
instancesh.push(new moveItItemhori($(this)));
});
window.onscroll = function(){
var scrollToph = $windowh.scrollTop();
instancesr.forEach(function(insth){
insth.updateh(scrollToph);
});
}
}
//Rotation Scrolling ------------------------------------------------
if ($('.box').attr('data-rota-speed')){
console.log("found a rota");
var moveItItemrota = function(elr){
this.elr = $(elr);
this.speedr = parseInt(this.elr.attr('data-rota-speed'));
console.log(this.speedr);
};
moveItItemrota.prototyper.updater = function(scrollTopr){
var posr = scrollTopr / this.speedr;
this.elr.css('transform', 'rotate(' + -posr + 'deg)');
};
$(function(){
$('[data-rota-speed]').moveItrota();
});
};
//Horizontal Scrolling ------------------------------------------------
if ($('.box').attr('data-hori-speed')){
console.log("found a hori");
var moveItItemhori = function(elh){
this.elh = $(elh);
this.speedh = parseInt(this.elh.attr('data-hori-speed'));
console.log(this.speedh);
};
moveItItemhori.prototypeh.updateh = function(scrollToph){
var posh = scrollToph / this.speedh;
this.elh.css('transform', 'translateX(' + -posh + 'px)');
};
$(function(){
$('[data-hori-speed]').moveIthori();
});
};
//Vertical Scrolling ------------------------------------------------
if ($('.box').attr('data-vert-speed')){
console.log("found a vert");
var moveItItemvert = function(elv){
this.elv = $(elv);
this.speedv = parseInt(this.elv.attr('data-vert-speed'));
console.log(this.speedv);
};
moveItItemvert.prototype.updatev = function(scrollTopv){
var posv = scrollTopv / this.speedv;
this.elv.css('transform', 'translateY(' + -posv + 'px)');
};
$(function(){
$('[data-vert-speed]').moveItvert();
});
};