paul/yavsc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YastepInDaPresentation

Browse Source 
move backgrounds with mouse postion and mobile orientation
This commit is contained in:
Paul Schneider
2015-10-22 20:57:38 +02:00
parent 441a0fed32
commit c5ae4a5c67
2 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/ChangeLog
View File

@ -1,3 +1,8 @@
2015-10-22 Paul Schneider <paul@pschneider.fr>
* parralax.js: YastepInDaPresentation
move backgrounds with mouse postion and mobile orientation
2015-10-22 Paul Schneider <paul@pschneider.fr>
* style.css: no max width for panels, it's too abstract for a

43
web/Scripts/parralax.js
View File

@ -19,8 +19,25 @@
// You should have received a copy of the GNU Lesser General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
$(document).ready(function(){
var $window = $(window);
var onPos = function (bgobj,dx,dy) {
x=$window.scrollLeft()+dx;
y=$window.scrollTop()+dy;
var speed = bgobj.data('speed');
var xPos = bgobj.attr('orgbgpx') - Math.round( x / speed);
var yPos = bgobj.attr('orgbgpy') - Math.round( y / speed);
// Put together our final background position
var coords = '' + xPos + bgobj.attr('orgbgpxu') + yPos + bgobj.attr('orgbgpyu');
// Move the background
bgobj.css({ backgroundPosition: coords });
};
var tiltLR=0;
var titleFB=0;
$('[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
@ -59,16 +76,24 @@ $(document).ready(function(){
else { $bgobj.attr('orgbgpyu','px '); }
$bgobj.attr('orgbgpx',parseInt(bgposx));
$bgobj.attr('orgbgpy',parseInt(bgposy));
$(window).scroll(function() {
var speed = $bgobj.data('speed');
var xPos = $bgobj.attr('orgbgpx') - Math.round($window.scrollLeft() / speed);
var yPos = $bgobj.attr('orgbgpy') - Math.round($window.scrollTop() / speed);
// Put together our final background position
var coords = '' + xPos + $bgobj.attr('orgbgpxu') + yPos + $bgobj.attr('orgbgpyu');
// Move the background
$bgobj.css({ backgroundPosition: coords });
// console.log($bgobj.get()[0].localName+' backgroundPosition: '+coords);
onPos($bgobj,tiltLR,titleFB);
});
if (window.DeviceOrientationEvent) {
// Create an event listener
window.addEventListener('deviceorientation', function(event) {
tiltLR = event.gamma;
titleFB = event.beta;
console.log("DeviceOrientationEvent");
onPos($bgobj,tiltLR,titleFB);
});
$(window).mousemove(function(e) {
tiltLR = e.pageX;
titleFB = e.pageY;
onPos($bgobj,tiltLR,titleFB);
});
}
});
});