notazof/yavsc
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases 3 Packages Wiki Activity Actions

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
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> 2015-10-22 Paul Schneider <paul@pschneider.fr>
* style.css: no max width for panels, it's too abstract for a * style.css: no max width for panels, it's too abstract for a

41
web/Scripts/parralax.js
View file

@ -19,8 +19,25 @@
// You should have received a copy of the GNU Lesser General Public License // 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/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
$(document).ready(function(){ $(document).ready(function(){
var $window = $(window); 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(){ $('[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object var $bgobj = $(this); // assigning the object
@ -61,14 +78,22 @@ $(document).ready(function(){
$bgobj.attr('orgbgpy',parseInt(bgposy)); $bgobj.attr('orgbgpy',parseInt(bgposy));
$(window).scroll(function() { $(window).scroll(function() {
var speed = $bgobj.data('speed'); onPos($bgobj,tiltLR,titleFB);
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);
}); });
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);
});
}
}); });
}); });