Witam borykam się z tym zagadnieniem od 7 godzin i ciągle tylko błędy i błędy.
mam 2 pliki podlinkowane w htmlu. Jeden main.js ( u mnie index.js) i drugi tuto.js w którym w jquery napisałem pewną animację. Próbuję wywołać funkcję Tuto z pliku tuto.js jednak nie wiem jak się do tego zabrać.
W penie także dokładniejszy opis moich dotychczasowych błedów. pen zawiera koda obu plików i szerszy opis.
Tuto = function () {
alert("tuto");
var profileScreen;// = $('.profile-screen');
var phoneScreen; //= $('.phone-screen');
// var match; = phoneScreen.find('.match');
// var chatScreen; = $('.chat-screen');
var handleScrollEvent = function () {
alert("handle");
$(document).scroll(function () {
var scrollTop = $(document).scrollTop();
step1(scrollTop);
step2(scrollTop);
step3(scrollTop);
step4(scrollTop);
step5(scrollTop);
step6(scrollTop);
step7(scrollTop);
step8(scrollTop);
step9(scrollTop);
});
};
var step1 = function (scrollTop) { // postion: fixed;
if (scrollTop > 600) {
$('.phone-container').addClass('phone-container-fixed');
} else {
$('.phone-container').removeClass('phone-container-fixed');
}
if (scrollTop > 3801) {
$('.phone-container').addClass('phone-container-fixed-bot');
} else {
$('.phone-container').removeClass('phone-container-fixed-bot');
}
};
var step2 = function (scrollTop) {
var pic1 = profileScreen.find('#Girl-one-prof');
if (scrollTop > 750){
pic1.css({'left': '260px','top': '-46px','transform':'rotate('+23+'deg)', 'transition': '1s'})
}else{
pic1.css({'left': '0px', 'top': '0px','transform':'rotate('+0+'deg)', 'transition': '1s'});
}
};
var step3 = function (scrollTop) {
if (scrollTop >= 1300){
$('.party').removeClass('bum2');
} else if ((scrolled >= 1100) ){
$('.party').addClass('bum2');
} else {
$('.party').removeClass('bum2');
}
};
var step4 = function (scrollTop) {
if (scrollTop > 1700){
$('.match').removeClass('bum');
} else if (scrollTop >= 1500){
$('.match').addClass('bum');
} else {
$('.match').removeClass('bum');
}
};
var step5 = function (scrollTop) {
var czat = phoneScreen.find('.chat-screen');
if (scrollTop >= 1800){
czat.css({'left': '0px','transition':'1700ms'});
$('#phone-fot-chat').css({'z-index':'11'});
} else {
czat.css({'left': '234px','transition':'1700ms'});
$('#phone-fot-chat').css({'z-index':'1'});
}
};
var step6 = function (scrollTop) {
var czat = phoneScreen.find('.chat-screen');
var prof = phoneScreen.find('#prof');
if(scrollTop >= 2400){
czat.css({'left' : '234px', 'transition':'1700ms'});
prof.css({'right' : '0px', 'transition':'1700ms'});
$('#phone-fot-prof').css({'z-index':'11'});
} else {
prof.css({'right' : '234px', 'transition':'1700ms'});
$('#phone-fot-prof').css({'z-index':'1'});
}
};
var step8 = function (scrollTop) {
var prof = phoneScreen.find('#prof');
if(scrolled >= 2700 ){
prof.css({'top': '-2160px', 'transition' : '1700ms'})
} else {
prof.css({'top': '-1916px', 'transition' : '1700ms'})
}
};
var step9 = function (scrollTop) {
var chat1 = phoneScreen.find('#chat1');
var chat2 = phoneScreen.find('#chat2');
var chat3 = phoneScreen.find('#chat3');
var chat4 = phoneScreen.find('#chat4');
if(scrollTop >= 2000){
chat1.delay(1200).fadeIn(200, function(){
chat2.delay(200).fadeIn(200, function(){
chat3.delay(200).fadeIn(200, function(){
chat4.delay(200).fadeIn(200);
});
});
});
} else {
$('#chat1').stop(true).hide();
$('#chat2').stop(true).hide();
$('#chat3').stop(true).hide();
$('#chat4').stop(true).hide();
}
};
var init = function () {
profileScreen = $('.profile-screen');
phoneScreen = $('.phone-screen');
handleScrollEvent();
};
return {
'init': init
}
};
https://codepen.io/Krzys90/pen/geoybm w Penie zamieszczam plik index.js oraz tuto.js