Bonjour les amis !
J'ai une animation sur des images en JavaScript et je voudrais connaître s'il vous plaît où
commence et où termine mon animation.
Merci d'avance les amis
Voilà le code :
// Detect IE
var browserIE = false;
if(whichBrs() == 'Internet Explorer') browserIE = true;
// Detect Mobile
var browserMobile = false;
if($('body').hasClass('layout-mobile')) browserMobile = true;
// Elements
var $wrapperHome = $('#wrapper-home'),
$headerHome = $('#header', $wrapperHome),
$sectionHome = $('#section', $wrapperHome),
$footerHome = $('#footer', $wrapperHome),
$imgFitHome = $('> ul > li > img', $sectionHome),
$wrapper = $('#wrapper'),
$header = $('#header', $wrapper),
$flipImg = $('.flip-image'),
$projectsListing = $('.listing-projects');
var animRunning = false,
currentScroll = -1,
svgButton;
// Load First Set
var randObject = Math.floor((Math.random()*$('> ul', $sectionHome).length));
//var randObject = $('> ul', $sectionHome).length - 1;
$('> ul', $sectionHome).eq(randObject).addClass('active').removeClass('new').show();
$('> ul.active > li', $sectionHome).each(function(){
$(this).html('<img src="'+$(this).attr('data-img-src')+'" alt="" />');
});
$('> ul.new', $sectionHome).hide().css('opacity','0');
$(window).load(function(){
/* ////////////////////////////////////////
//
// Home
//
/////////////////////////////////////// */
// Load Other Images
$('> ul > li', $sectionHome).each(function(){
if($(this).html() == '') $(this).html('<img src="'+$(this).attr('data-img-src')+'" alt="" />');
});
// Hover
$wrapperHome.each(function(){
$('a', $footerHome).on('mouseenter', function(){
$('.static', this).css('color', $('> ul.active', $sectionHome).css('background-color'));
}).on('mouseleave', function(){
$('.static', this).css('color', $('p', $headerHome).css('color'));
});
});
// Change Object
$wrapperHome.on('click', function(e){
if(e.target.tagName != 'A' && $(e.target).parents('a').length == 0 && !animRunning){
animRunning = true;
var nbNew = $('> .new', $sectionHome).length;
if(nbNew == 1){
$('> ul:not(.active)', $sectionHome).addClass('new');
nbNew = $('> .new', $sectionHome).length;
}
var randObject = Math.floor((Math.random()*nbNew));
var newArray = [];
$('> .active', $sectionHome).removeClass('active');
$('> .new', $sectionHome).each(function(){
newArray.push($(this).index());
});
$('> ul', $sectionHome).eq(newArray[randObject])
.removeClass('new')
.addClass('active')
.show()
.animate({opacity: 1}, 450, function(){
$('> ul:not(.active)', $sectionHome).css('opacity','0').hide();
animRunning = false;
});
positionContent();
}
});
// Change Frame - Desktop
if(!browserMobile){
$wrapperHome.on('mousemove', function(e){
$('> ul', $sectionHome).each(function(){
// Mouse Infos
var mouseX = e.pageX;
var pageMid = $wrapperHome.width()/2;
var mouseDistMid = Math.abs(mouseX - pageMid);
var speed = parseFloat($(this).attr('data-speed'));
// Object Infos
var nbFrames = $('> li', this).length;
var currFrame = Math.floor((mouseDistMid / speed) % nbFrames);
// Invert
if(mouseX < pageMid){
currFrame = Math.abs(currFrame - (nbFrames - 1));
}
$('> li.active', this).removeClass('active');
$('> li', this).eq(currFrame).addClass('active');
});
});
}
// Change Frame - Mobile
else {
$('html, body').scrollTop(1);
$wrapperHome.on('touchmove', function(e){
$('> ul', $sectionHome).each(function(){
e.preventDefault();
// Mouse Infos
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
var mouseX = touch.pageX;
var pageMid = $wrapperHome.width()/2;
var mouseDistMid = Math.abs(mouseX - pageMid);
var speed = parseFloat($(this).attr('data-speed'));
// Object Infos
var nbFrames = $('> li', this).length;
var currFrame = Math.floor((mouseDistMid / speed) % nbFrames);
// Invert
if(mouseX < pageMid){
currFrame = Math.abs(currFrame - (nbFrames - 1));
}
$('> li.active', this).removeClass('active');
$('> li', this).eq(currFrame).addClass('active');
});
});
}
/* ////////////////////////////////////////
//
// Projects
//
/////////////////////////////////////// */
$flipImg.each(function(){
$('.hover', this).css('background-color', '#'+$(this).attr('data-color'));
if(browserMobile) $(this).addClass('animated');
});
$('> .slider', $projectsListing).each(function(){
var object = $(this);
var delay = (object.index() + 1) * 3000;
setTimeout(function(){
flipInterval(object);
}, delay);
});
/* ////////////////////////////////////////
//
// Project
//
/////////////////////////////////////// */
$('.project-infos').each(function(){
// Change Color
var color = $(this).attr('data-color');
$('#header .logo, .btn-previous-project, .btn-next-project, .btn-back-top').css('background-color','#'+color);
$('.link-toggle a').css('color','#'+color);
// Toggle Infos
$('.btn-toggle', this).on('click', function(){
$(this).toggleClass('opened');
$(this).siblings('.content-toggle').slideToggle(450);
$(this).siblings('.link-toggle').toggleClass('opened');
return false;
});
// Back to top
$('.btn-back-top').on('click', function(){
$('html, body').animate({scrollTop: 0}, 750, 'easeInOutQuad');
return false;
});
// SVG Button
svgButton = new svgIcon( document.querySelector('.si-icon-plus'), svgIconConfig, { easing : mina.backin, size : { w : 25, h : 25 }, onLoad: function(){
$('.si-icon-plus path').css('stroke','#'+color);
}} );
});
// Video
$('.video-player').on('click', function(){
var vidData = $(this).attr('data-video-src').split('|');
var vidType = vidData[0];
var vidID = vidData[1];
var vidColor = $('.project-infos').attr('data-color');
switch(vidType){
case 'youtube':
var innerHtml = '<iframe width="560" height="315" src="//www.youtube.com/embed/'+vidID+'?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>';
break;
case 'vimeo':
var innerHtml = '<iframe src="//player.vimeo.com/video/'+vidID+'?title=0&byline=0&portrait=0&autoplay=1&color='+vidColor+'" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
break;
}
$('.video-container', this).html(innerHtml);
return false;
});
/* ////////////////////////////////////////
//
// Careers
//
/////////////////////////////////////// */
var arraySVGs = [];
$('.content-toggler > li > a').each(function(){
// SVG Button
var $object = '#'+$(this).attr('id');
var svgTemp = new svgIcon( document.querySelector($object), svgIconConfig, { easing : mina.backin, size : { w : 25, h : 25 }, onLoad: function(){
$('.si-icon-plus path').css('stroke','#fff');
}} );
arraySVGs.push(svgTemp);
}).on('click', function(){
// Open
if(!$(this).parent().hasClass('opened')){
var indexOpened = $(this).parent().siblings('.opened').index();
if(indexOpened != - 1) arraySVGs[indexOpened].toggle();
$(this).parent().siblings('.opened').find('> .si-icon').trigger('click');
$(this).parent().addClass('opened');
$(this).siblings('div').animate({height: $(this).siblings('div').children('ul').outerHeight()}, 750, 'easeInOutQuad', function(){
$(this).height('auto');
});
}
// Close
else {
$(this).parent().removeClass('opened');
$(this).siblings('div').animate({height: 0}, 750, 'easeInOutQuad');
}
return false;
});
/* ////////////////////////////////////////
//
// Init
//
/////////////////////////////////////// */
positionContent();
var maskTimeout = 1;
if(browserMobile && $wrapperHome.length == 1) maskTimeout = 2000;
setTimeout(function(){
$('#loading-mask').fadeOut(750, function(){
positionContent();
});
$('#map_canvas').each(function(){
initializeMap();
});
}, maskTimeout);
});
/* ////////////////////////////////////////////////////////////////////////////
//
// Window Functions
//
/////////////////////////////////////////////////////////////////////////// */
function flipInterval(object){
var $animated = $('img.animated', object);
var $fixed = $('img.fixed', object);
var positions = ['left','right','top','bottom'];
// Animate
$animated.attr('class','fixed');
var position = positions[Math.floor(Math.random()*4)];
$fixed.attr('class', position);
setTimeout(function(){
$fixed.addClass('animated');
}, 650);
// Call Interval
setTimeout(function(){
flipInterval(object);
}, 6000);
}
$(window).resize(function(){
positionContent();
});
$(window).scroll(function(){
scrollContent();
});
/* ////////////////////////////////////////////////////////////////////////////
//
// Position Content
//
/////////////////////////////////////////////////////////////////////////// */
function positionContent(){
// Body Class
var bodyClass = '';
if($(window).width() < 1180) bodyClass += ' layout-1180';
$wrapperHome.attr('class',bodyClass);
$wrapper.attr('class',bodyClass);
// Center Header
$headerHome.css('margin-top', - $headerHome.height()/2);
// Resize Bg Images
$('> ul > li > img', $sectionHome).each(function(){
var bg_main = $(this);
var wrapper = $(this).parent();
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Background Image
var bgMainRatio = 1280/720;
var wrapperRatio = wrapperWidth/wrapperHeight;
// Background Main
if(bgMainRatio < wrapperRatio){
bg_main
.height(wrapperHeight)
.width(wrapperHeight * bgMainRatio)
.css('left',(wrapperWidth/2 - (wrapperHeight * bgMainRatio)/2)+'px')
.css('top','0');
} else {
bg_main
.width(wrapperWidth)
.height(wrapperWidth / bgMainRatio)
.css('left','0')
.css('top',(wrapperHeight/2 - (wrapperWidth / bgMainRatio)/2)+'px');
}
});
// Resize Projects Listing
$projectsListing.each(function(){
$(this).width($(this).parent().width() + 14);
});
// Project Arrows Center
$('.btn-previous-project').each(function(){
var posLeft = ($wrapper.width() - $('.centered').width())/4 - $(this).width()/2;
var posTop = (($(window).height() - $header.height())/2 - $(this).height()/2) + $header.height();
$('.btn-previous-project').css({'left': posLeft, 'top': posTop});
$('.btn-next-project').css({'right': posLeft, 'top': posTop});
$('.btn-back-top').css({'right': -(posLeft + 43)});
$('.btn-toggle').width($('.main-nav', $header).width());
});
scrollContent();
}
function scrollContent(){
var totalScroll = $(document).height() - $(window).height();
if(browserMobile){
newScroll = $(window).scrollTop();
} else {
if(whichBrs() == 'Safari' || whichBrs() == 'Chrome'){
newScroll = $('body').scrollTop();
} else {
newScroll = $('html,body').scrollTop();
}
}
// Show Flip Images
$flipImg.each(function(){
if(newScroll + $(window).height() >= $(this).offset().top + 50 && currentScroll < newScroll) $(this).addClass('animated');
if(!browserMobile && newScroll + $(window).height() <= $(this).offset().top + 250 && currentScroll > newScroll) $(this).removeClass('animated');
});
currentScroll = newScroll;
}
/* ////////////////////////////////////////////////////////////////////////////
//
// Map
//
/////////////////////////////////////////////////////////////////////////// */
function initializeMap(){
var latlng = new google.maps.LatLng(45.502013,-73.559614);
var settings = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"stylers": [
{ "saturation": -100 }
]
},{
"featureType": "road",
"elementType": "labels.text",
"stylers": [
{ "visibility": "on" },
{ "gamma": 1.85 },
{ "lightness": 11 }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var image = new google.maps.MarkerImage('images/layout/map_pin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(32, 31),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(16, 16));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(45.502013,-73.559614),
map: map,
icon: image
});
}
/* ////////////////////////////////////////////////////////////////////////////
//
// Get Browser
//
/////////////////////////////////////////////////////////////////////////// */
function whichBrs() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("chrome") != -1) return 'Chrome';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf('\/') != -1) {
if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('\/'));
} else return 'Netscape';
} else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else return navigator.userAgent;
}
Modifié par DiegoGaby (07 Feb 2017 - 15:53)
J'ai une animation sur des images en JavaScript et je voudrais connaître s'il vous plaît où
commence et où termine mon animation.
Merci d'avance les amis
Voilà le code :
// Detect IE
var browserIE = false;
if(whichBrs() == 'Internet Explorer') browserIE = true;
// Detect Mobile
var browserMobile = false;
if($('body').hasClass('layout-mobile')) browserMobile = true;
// Elements
var $wrapperHome = $('#wrapper-home'),
$headerHome = $('#header', $wrapperHome),
$sectionHome = $('#section', $wrapperHome),
$footerHome = $('#footer', $wrapperHome),
$imgFitHome = $('> ul > li > img', $sectionHome),
$wrapper = $('#wrapper'),
$header = $('#header', $wrapper),
$flipImg = $('.flip-image'),
$projectsListing = $('.listing-projects');
var animRunning = false,
currentScroll = -1,
svgButton;
// Load First Set
var randObject = Math.floor((Math.random()*$('> ul', $sectionHome).length));
//var randObject = $('> ul', $sectionHome).length - 1;
$('> ul', $sectionHome).eq(randObject).addClass('active').removeClass('new').show();
$('> ul.active > li', $sectionHome).each(function(){
$(this).html('<img src="'+$(this).attr('data-img-src')+'" alt="" />');
});
$('> ul.new', $sectionHome).hide().css('opacity','0');
$(window).load(function(){
/* ////////////////////////////////////////
//
// Home
//
/////////////////////////////////////// */
// Load Other Images
$('> ul > li', $sectionHome).each(function(){
if($(this).html() == '') $(this).html('<img src="'+$(this).attr('data-img-src')+'" alt="" />');
});
// Hover
$wrapperHome.each(function(){
$('a', $footerHome).on('mouseenter', function(){
$('.static', this).css('color', $('> ul.active', $sectionHome).css('background-color'));
}).on('mouseleave', function(){
$('.static', this).css('color', $('p', $headerHome).css('color'));
});
});
// Change Object
$wrapperHome.on('click', function(e){
if(e.target.tagName != 'A' && $(e.target).parents('a').length == 0 && !animRunning){
animRunning = true;
var nbNew = $('> .new', $sectionHome).length;
if(nbNew == 1){
$('> ul:not(.active)', $sectionHome).addClass('new');
nbNew = $('> .new', $sectionHome).length;
}
var randObject = Math.floor((Math.random()*nbNew));
var newArray = [];
$('> .active', $sectionHome).removeClass('active');
$('> .new', $sectionHome).each(function(){
newArray.push($(this).index());
});
$('> ul', $sectionHome).eq(newArray[randObject])
.removeClass('new')
.addClass('active')
.show()
.animate({opacity: 1}, 450, function(){
$('> ul:not(.active)', $sectionHome).css('opacity','0').hide();
animRunning = false;
});
positionContent();
}
});
// Change Frame - Desktop
if(!browserMobile){
$wrapperHome.on('mousemove', function(e){
$('> ul', $sectionHome).each(function(){
// Mouse Infos
var mouseX = e.pageX;
var pageMid = $wrapperHome.width()/2;
var mouseDistMid = Math.abs(mouseX - pageMid);
var speed = parseFloat($(this).attr('data-speed'));
// Object Infos
var nbFrames = $('> li', this).length;
var currFrame = Math.floor((mouseDistMid / speed) % nbFrames);
// Invert
if(mouseX < pageMid){
currFrame = Math.abs(currFrame - (nbFrames - 1));
}
$('> li.active', this).removeClass('active');
$('> li', this).eq(currFrame).addClass('active');
});
});
}
// Change Frame - Mobile
else {
$('html, body').scrollTop(1);
$wrapperHome.on('touchmove', function(e){
$('> ul', $sectionHome).each(function(){
e.preventDefault();
// Mouse Infos
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
var mouseX = touch.pageX;
var pageMid = $wrapperHome.width()/2;
var mouseDistMid = Math.abs(mouseX - pageMid);
var speed = parseFloat($(this).attr('data-speed'));
// Object Infos
var nbFrames = $('> li', this).length;
var currFrame = Math.floor((mouseDistMid / speed) % nbFrames);
// Invert
if(mouseX < pageMid){
currFrame = Math.abs(currFrame - (nbFrames - 1));
}
$('> li.active', this).removeClass('active');
$('> li', this).eq(currFrame).addClass('active');
});
});
}
/* ////////////////////////////////////////
//
// Projects
//
/////////////////////////////////////// */
$flipImg.each(function(){
$('.hover', this).css('background-color', '#'+$(this).attr('data-color'));
if(browserMobile) $(this).addClass('animated');
});
$('> .slider', $projectsListing).each(function(){
var object = $(this);
var delay = (object.index() + 1) * 3000;
setTimeout(function(){
flipInterval(object);
}, delay);
});
/* ////////////////////////////////////////
//
// Project
//
/////////////////////////////////////// */
$('.project-infos').each(function(){
// Change Color
var color = $(this).attr('data-color');
$('#header .logo, .btn-previous-project, .btn-next-project, .btn-back-top').css('background-color','#'+color);
$('.link-toggle a').css('color','#'+color);
// Toggle Infos
$('.btn-toggle', this).on('click', function(){
$(this).toggleClass('opened');
$(this).siblings('.content-toggle').slideToggle(450);
$(this).siblings('.link-toggle').toggleClass('opened');
return false;
});
// Back to top
$('.btn-back-top').on('click', function(){
$('html, body').animate({scrollTop: 0}, 750, 'easeInOutQuad');
return false;
});
// SVG Button
svgButton = new svgIcon( document.querySelector('.si-icon-plus'), svgIconConfig, { easing : mina.backin, size : { w : 25, h : 25 }, onLoad: function(){
$('.si-icon-plus path').css('stroke','#'+color);
}} );
});
// Video
$('.video-player').on('click', function(){
var vidData = $(this).attr('data-video-src').split('|');
var vidType = vidData[0];
var vidID = vidData[1];
var vidColor = $('.project-infos').attr('data-color');
switch(vidType){
case 'youtube':
var innerHtml = '<iframe width="560" height="315" src="//www.youtube.com/embed/'+vidID+'?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>';
break;
case 'vimeo':
var innerHtml = '<iframe src="//player.vimeo.com/video/'+vidID+'?title=0&byline=0&portrait=0&autoplay=1&color='+vidColor+'" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
break;
}
$('.video-container', this).html(innerHtml);
return false;
});
/* ////////////////////////////////////////
//
// Careers
//
/////////////////////////////////////// */
var arraySVGs = [];
$('.content-toggler > li > a').each(function(){
// SVG Button
var $object = '#'+$(this).attr('id');
var svgTemp = new svgIcon( document.querySelector($object), svgIconConfig, { easing : mina.backin, size : { w : 25, h : 25 }, onLoad: function(){
$('.si-icon-plus path').css('stroke','#fff');
}} );
arraySVGs.push(svgTemp);
}).on('click', function(){
// Open
if(!$(this).parent().hasClass('opened')){
var indexOpened = $(this).parent().siblings('.opened').index();
if(indexOpened != - 1) arraySVGs[indexOpened].toggle();
$(this).parent().siblings('.opened').find('> .si-icon').trigger('click');
$(this).parent().addClass('opened');
$(this).siblings('div').animate({height: $(this).siblings('div').children('ul').outerHeight()}, 750, 'easeInOutQuad', function(){
$(this).height('auto');
});
}
// Close
else {
$(this).parent().removeClass('opened');
$(this).siblings('div').animate({height: 0}, 750, 'easeInOutQuad');
}
return false;
});
/* ////////////////////////////////////////
//
// Init
//
/////////////////////////////////////// */
positionContent();
var maskTimeout = 1;
if(browserMobile && $wrapperHome.length == 1) maskTimeout = 2000;
setTimeout(function(){
$('#loading-mask').fadeOut(750, function(){
positionContent();
});
$('#map_canvas').each(function(){
initializeMap();
});
}, maskTimeout);
});
/* ////////////////////////////////////////////////////////////////////////////
//
// Window Functions
//
/////////////////////////////////////////////////////////////////////////// */
function flipInterval(object){
var $animated = $('img.animated', object);
var $fixed = $('img.fixed', object);
var positions = ['left','right','top','bottom'];
// Animate
$animated.attr('class','fixed');
var position = positions[Math.floor(Math.random()*4)];
$fixed.attr('class', position);
setTimeout(function(){
$fixed.addClass('animated');
}, 650);
// Call Interval
setTimeout(function(){
flipInterval(object);
}, 6000);
}
$(window).resize(function(){
positionContent();
});
$(window).scroll(function(){
scrollContent();
});
/* ////////////////////////////////////////////////////////////////////////////
//
// Position Content
//
/////////////////////////////////////////////////////////////////////////// */
function positionContent(){
// Body Class
var bodyClass = '';
if($(window).width() < 1180) bodyClass += ' layout-1180';
$wrapperHome.attr('class',bodyClass);
$wrapper.attr('class',bodyClass);
// Center Header
$headerHome.css('margin-top', - $headerHome.height()/2);
// Resize Bg Images
$('> ul > li > img', $sectionHome).each(function(){
var bg_main = $(this);
var wrapper = $(this).parent();
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Background Image
var bgMainRatio = 1280/720;
var wrapperRatio = wrapperWidth/wrapperHeight;
// Background Main
if(bgMainRatio < wrapperRatio){
bg_main
.height(wrapperHeight)
.width(wrapperHeight * bgMainRatio)
.css('left',(wrapperWidth/2 - (wrapperHeight * bgMainRatio)/2)+'px')
.css('top','0');
} else {
bg_main
.width(wrapperWidth)
.height(wrapperWidth / bgMainRatio)
.css('left','0')
.css('top',(wrapperHeight/2 - (wrapperWidth / bgMainRatio)/2)+'px');
}
});
// Resize Projects Listing
$projectsListing.each(function(){
$(this).width($(this).parent().width() + 14);
});
// Project Arrows Center
$('.btn-previous-project').each(function(){
var posLeft = ($wrapper.width() - $('.centered').width())/4 - $(this).width()/2;
var posTop = (($(window).height() - $header.height())/2 - $(this).height()/2) + $header.height();
$('.btn-previous-project').css({'left': posLeft, 'top': posTop});
$('.btn-next-project').css({'right': posLeft, 'top': posTop});
$('.btn-back-top').css({'right': -(posLeft + 43)});
$('.btn-toggle').width($('.main-nav', $header).width());
});
scrollContent();
}
function scrollContent(){
var totalScroll = $(document).height() - $(window).height();
if(browserMobile){
newScroll = $(window).scrollTop();
} else {
if(whichBrs() == 'Safari' || whichBrs() == 'Chrome'){
newScroll = $('body').scrollTop();
} else {
newScroll = $('html,body').scrollTop();
}
}
// Show Flip Images
$flipImg.each(function(){
if(newScroll + $(window).height() >= $(this).offset().top + 50 && currentScroll < newScroll) $(this).addClass('animated');
if(!browserMobile && newScroll + $(window).height() <= $(this).offset().top + 250 && currentScroll > newScroll) $(this).removeClass('animated');
});
currentScroll = newScroll;
}
/* ////////////////////////////////////////////////////////////////////////////
//
// Map
//
/////////////////////////////////////////////////////////////////////////// */
function initializeMap(){
var latlng = new google.maps.LatLng(45.502013,-73.559614);
var settings = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"stylers": [
{ "saturation": -100 }
]
},{
"featureType": "road",
"elementType": "labels.text",
"stylers": [
{ "visibility": "on" },
{ "gamma": 1.85 },
{ "lightness": 11 }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var image = new google.maps.MarkerImage('images/layout/map_pin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(32, 31),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(16, 16));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(45.502013,-73.559614),
map: map,
icon: image
});
}
/* ////////////////////////////////////////////////////////////////////////////
//
// Get Browser
//
/////////////////////////////////////////////////////////////////////////// */
function whichBrs() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("chrome") != -1) return 'Chrome';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf('\/') != -1) {
if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('\/'));
} else return 'Netscape';
} else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else return navigator.userAgent;
}
Modifié par DiegoGaby (07 Feb 2017 - 15:53)
