Ciao a tutti!
Studio programmazione web ma sono ancora alle prime armi... Ho deciso di creare un sito web per la mia tesina di maturità dedicata a Steve Jobs. Per dare il via al mio sito, ho trovato uno slide to unlock su internet molto carino, e la mia domanda è: posso linkare, tramite js, ad una pagina esterna nel momento in cui il cursore dello slide to unlock superi un determinato punto? Allego codice JS e codice HTML... Non riesco proprio a capire come poter fare, e per questo mi affido a voi! Scusatemi e grazie mille!
codice:
$(function() {
$("#slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
$("#well").fadeOut();
} else {
// Apparently Safari isn't allowing partial opacity on text with background clip? Not sure.
// $("h2 span").css("opacity", 100 - (ui.position.left / 5))
}
},
stop: function(event, ui) {
if (ui.position.left < 551) {
$(this).animate({
left: 0
})
}
}
});
// The following credit: http://www.evanblack.com/blog/touch-slide-to-unlock/
$('#slider')[0].addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
curX = touch.pageX - this.offsetLeft - 73;
if(curX <= 0) return;
if(curX > 550){
$('#well').fadeOut();
}
el.style.webkitTransform = 'translateX(' + curX + 'px)';
}, false);
$('#slider')[0].addEventListener('touchend', function(event) {
this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
this.style.webkitTransform = 'translateX(0px)';
}, false);
});
codice HTML:
<div id="page-wrap">
<div id="well"> <h2><strong id="slider"></strong> <span>Iniziamo</span></h2> </div> </div>