• Meta

  Added 10 months ago

• Categories

  • Modal
  • Ajax
  • Animation
  • Scrolling

• Links of interest

  1. Original Source
  2. At Twitter: @readymag

/*
тохе дать градиенты потюнить
снизу надпись (пока не надо)
фон затемнять
ie 7,8?
*/


function homepageInitialize() {

  var oldAngle, curAngle = 0,
    lineHeight = 0,
    scrollHeight = 0,
    touchScrollTop = 0,
    crumplesTotalHeightOnStopAngle = 0,
    $window = $(window),
    $wrappers = $(".crumpled-line-wrapper"),
    $gradients = $(".crumpled-gradient"),
    $lines = $(".crumpled-line"),
    $stub = $(".homepage-height-stub"),
    $box = $(".homepage-crumpled-box"),
    is3d = Modernizr.csstransforms3d,
    isTouch = Modernizr.touch,
    scrollTimer, scrollTimerCurPos, scrollTimerTargetPos;

  var PERSPECTIVE = 1300,
    STOPANGLE = 70;

  if (is3d) {
    $wrappers.css({
      '-webkit-perspective': PERSPECTIVE + 'px',
      '-moz-perspective': PERSPECTIVE + 'px',
      '-ms-perspective': PERSPECTIVE + 'px',
      '-o-perspective': PERSPECTIVE + 'px',
      'perspective': PERSPECTIVE + 'px'
    });
  } else {
    $wrappers.css('position', 'relative');
  }

  $window.resize(onResize);
  if (!isTouch) $window.scroll(onScroll);
  if (isTouch) $window.RMDrag({
    'move': onScroll,
    //_.throttle(onScroll, 30),
    'end': onScrollEnd,
    'silent': false,
    'type': 'touch',
    'preventDefault': true
  });
  onResize();

  maxGalleryInd = $('.homepage-content-center-block-ipad-gallery-image').length - 1;
  curGalleryInd = maxGalleryInd;

  if (!isTouch) $('.homepage-content-center-block-ipad-gallery-open').add($('.homepage-content-center-block-anno span')).on('click', startMag);
  else {
    $('.homepage-content-center-block-ipad-gallery-open').replaceWith('<a href="/mag/1/" target="_blank" class="homepage-content-center-block-ipad-gallery-open" style="display:block;text-decoration:none">Open</a>');
    $('.homepage-content-center-block-anno span').replaceWith('<a href="/mag/1/" target="_blank" style="color:black">our first mag</a>');
    $('.homepage-content-center-block-ipad-gallery-open').add($('.homepage-content-center-block-anno a')).on('touchstart', function(e) {
      e.stopPropagation();
    });
  }



  $('.homepage-content-center-block-anno a, .homepage-content-bottom-block-social-mail a, .homepage-content-bottom-block-social-fb-link, .homepage-content-bottom-block-social-tweet-link').on('touchstart', function(e) {
    e.stopPropagation();
  });


  //twitter button
  !
  function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = "//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
    }
  }(document, "script", "twitter-wjs");

  //facebook button
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));


  //mail form prepare

  var $form = $(".homepage-content-bottom-block-mail-form");
  var $input = $(".homepage-content-bottom-block-mail-input");
  var $submit = $(".homepage-content-bottom-block-mail-submit");

  $form.addClass('homepage-content-bottom-block-mail-input-empty');

  var inputFocused = true; //из-за хрома, он при переключении окон послвает блюр и фокус дважды

  $input.bind("blur", function() {
    if (!inputFocused) return;
    inputFocused = false;
    var q = $.trim($(this).val());
    if (q == "") {
      $(this).val($(this).attr("data-placeholder"));
      $form.addClass('homepage-content-bottom-block-mail-input-empty');
    } else $form.removeClass('homepage-content-bottom-block-mail-input-empty');
  }).bind("focus", function() {
    if (inputFocused) return;
    inputFocused = true;
    if ($form.hasClass("homepage-content-bottom-block-mail-input-empty")) {
      $(this).val("");
      $form.removeClass('homepage-content-bottom-block-mail-input-empty');
    }
  }).bind('input propertychange', checkEmail).bind('keypress keyup keydown', function(e) {
    e.stopPropagation()
  }).bind('keyup', function(e) {
    e.stopPropagation();
    if (e.keyCode == 13) onSubmit();
  }).blur();

  $submit.bind('click', onSubmit);

  $submit.add($input).on('touchstart', function(e) {
    e.stopPropagation()
  });

  $window.on('touchstart', function(e) {
    if (inputFocused) {
      $input.blur();
      e.stopPropagation();
    }
  });

  setInterval(galleryStep, 4000);


  $('.scroll-hover-wrapper').on('mouseenter', function() {
    $('.scroll-wrapper').addClass('scroll-hover');
  }).on('mouseleave', function() {
    $('.scroll-wrapper').removeClass('scroll-hover');
  }).on('click', function() {
    fullScroll();
  }).on('touchstart', function(e) {
    e.stopPropagation();
  });

  //functions

  function applyTransform(obj, str) {
    obj.css({
      '-webkit-transform': str,
      '-moz-transform': str,
      '-ms-transform': str,
      '-o-transform': str,
      'transform': str
    });
  }

  function calcPerspectiveDimensions(angle) {
    var t = 0,
      b = lineHeight,
      rad = angle * Math.PI / 180,
      cosAngle = Math.cos(rad),
      sinAngle = Math.sin(rad);
    t -= lineHeight / 2;
    b -= lineHeight / 2;
    t = cosAngle * t * PERSPECTIVE / (PERSPECTIVE + sinAngle * t);
    b = cosAngle * b * PERSPECTIVE / (PERSPECTIVE + sinAngle * b);
    t += lineHeight / 2;
    b += lineHeight / 2;
    return [t, b];
  }

  function applyRotation() {

    if (Math.abs(oldAngle - curAngle) < 0.001) return;

    var perspectiveDimensions = calcPerspectiveDimensions(curAngle);

    var marginTop = lineHeight - perspectiveDimensions[1];
    var marginBottom = perspectiveDimensions[0];
    var startOffset = -marginTop - 1;
    var ind = 0;
    var dir = -1;

    $wrappers.each(function() {
      applyTransform($(this), 'translateY(' + startOffset + 'px)', 'top', startOffset + 'px');
      startOffset += lineHeight - (ind == 1 ? marginBottom : marginTop) * 2 - 2;
      ind = 1 - ind;
    })

    $lines.each(function() {
      applyTransform($(this), 'rotateX(' + (curAngle * dir) + 'deg)');
      dir *= -1;
    });

    $gradients.css('opacity', curAngle / 90);

    oldAngle = curAngle;
  }

  function onResize() {
    lineHeight = Math.ceil($window.height() / $lines.length) + (is3d ? 2 : 0);
    scrollHeight = $window.height() * 2;
    if (!isTouch) $stub.height(scrollHeight);
    $wrappers.css({
      'height': lineHeight + 'px'
    })
    $lines.css({
      'line-height': (lineHeight * 0.85) + 'px',
      'font-size': (lineHeight * 0.8) + 'px'
    })

    if (is3d) {
      var perspectiveDimensions = calcPerspectiveDimensions(STOPANGLE);
      crumplesTotalHeightOnStopAngle = (perspectiveDimensions[1] - perspectiveDimensions[0] - 2) * $lines.length + 1;
    } else {
      crumplesTotalHeightOnStopAngle = lineHeight * $lines.length;
    }

    oldAngle = undefined;
    onScroll();

    var mt = ($window.height() - 672) / 2;
    mt = Math.min(Math.max(mt, 0), 108);
    $('.homepage-content-center-block-txt').css('margin-top', mt + 'px');
  }

  function onScroll(e) {
    var scrollTop = $window.scrollTop();

    if (isTouch) {
      var dY = 0;
      if (e) dY = e.deltaY;
      scrollTop = Math.max(Math.min(touchScrollTop - dY, scrollHeight / 2), 0);
    }

    var percent = 2 * scrollTop / scrollHeight;
    if (is3d) {
      curAngle = 2 * STOPANGLE * percent;
      if (curAngle >= STOPANGLE) {
        curAngle = STOPANGLE;
        var topOffset = -crumplesTotalHeightOnStopAngle * (percent - 0.5) * 2;
        applyTransform($box, 'translateY(' + topOffset + 'px)');
      } else {
        applyTransform($box, 'translateY(0px)');
      }
      applyRotation();
    } else {
      var topOffset = -crumplesTotalHeightOnStopAngle * percent;
      $box.css('top', topOffset + 'px');
    }
  }

  function onScrollEnd(e) {
    var dY = 0;
    if (e) dY = e.deltaY;
    touchScrollTop -= dY;
    touchScrollTop = Math.max(Math.min(touchScrollTop, scrollHeight / 2), 0);
  }


  function fullScrollStep() {
    console.log(scrollTimerCurPos);
    if (isTouch) {
      scrollTimerCurPos -= 30;
      if (scrollTimerCurPos <= scrollTimerTargetPos) {
        scrollTimerCurPos = scrollTimerTargetPos;
        clearInterval(scrollTimer);
      }
      onScroll({
        deltaY: scrollTimerCurPos
      });
      onScrollEnd({
        deltaY: scrollTimerCurPos
      });
    } else {
      scrollTimerCurPos += 30;
      if (scrollTimerCurPos >= scrollTimerTargetPos) {
        scrollTimerCurPos = scrollTimerTargetPos;
        clearInterval(scrollTimer);
      }
      $window.scrollTop(scrollTimerCurPos);
    }
  }

  function fullScroll() {
    if (isTouch) {
      scrollTimerCurPos = -touchScrollTop;
      scrollTimerTargetPos = touchScrollTop - scrollHeight / 2;
    } else {
      scrollTimerCurPos = $window.scrollTop();
      scrollTimerTargetPos = scrollHeight / 2;
    }
    scrollTimer = setInterval(fullScrollStep, 30);
  }

  function checkEmail() {

    function isValidEmail(email, strict) {
      if (!strict) email = email.replace(/^\s+|\s+$/g, '');
      return (/^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i).test(email);
    }

    $form.toggleClass('homepage-content-bottom-block-mail-input-valid', isValidEmail($input.val()) && !$form.hasClass("homepage-content-bottom-block-mail-input-empty"));
  }

  function onSubmit(e) {
    if (!$form.hasClass('homepage-content-bottom-block-mail-input-valid')) return;

    $.post('/api/emailme/', {
      'email': $input.val()
    }, function(response) {
      if (response == 'ok') {
        $form.addClass('homepage-content-bottom-block-mail-input-submitted');
        $input.remove();
      } else {
        console.error(response);
      }
    });
  }



  function galleryStep() {
    var nextGalleryInd = curGalleryInd - 1;
    if (nextGalleryInd < 0) {
      nextGalleryInd = maxGalleryInd;
      $('.homepage-content-center-block-ipad-gallery-image').eq(nextGalleryInd).fadeIn(500);
    } else $('.homepage-content-center-block-ipad-gallery-image').eq(nextGalleryInd).fadeIn(0);
    $('.homepage-content-center-block-ipad-gallery-image').eq(curGalleryInd).fadeOut(500);
    curGalleryInd--;
    if (curGalleryInd < 0) curGalleryInd = maxGalleryInd;
  }

  function startMag() {
    var $layer = $('.homepage-content-center-block-ipad-gallery-open');
    var x = $layer.offset().left;
    var y = $layer.offset().top - $(window).scrollTop();
    var w = $layer.width();
    var h = $layer.height();

    $layer.appendTo('body').empty().css({
      position: 'fixed',
      left: x + 'px',
      top: y + 'px',
      width: w + 'px',
      height: h + 'px',
      background: '#000',
      opacity: 0.8

    });

    $layer.animate({
      left: 0,
      top: 0,
      width: $(window).width(),
      height: $(window).height(),
      opacity: 1
    }, 500, function() {
      window.location.href = '/mag/1/';
    });
  }

}

/*
тохе дать градиенты потюнить
снизу надпись (пока не надо)
фон затемнять
ie 7,8?
*/


function homepageInitialize() {

	var oldAngle,
		curAngle = 0,
		lineHeight = 0,
		scrollHeight = 0,
		touchScrollTop = 0,
		crumplesTotalHeightOnStopAngle = 0,
		$window = $(window),
		$wrappers = $(".crumpled-line-wrapper"),
		$gradients = $(".crumpled-gradient"),
		$lines = $(".crumpled-line"),
		$stub = $(".homepage-height-stub"),
		$box = $(".homepage-crumpled-box"),
		is3d = Modernizr.csstransforms3d,
		isTouch = Modernizr.touch,
		scrollTimer,
		scrollTimerCurPos,
		scrollTimerTargetPos;

	var PERSPECTIVE = 1300,
		STOPANGLE = 70;

	if (is3d) {
		$wrappers.css({
			'-webkit-perspective': PERSPECTIVE + 'px',
			'-moz-perspective': PERSPECTIVE + 'px',
			'-ms-perspective': PERSPECTIVE + 'px',
			'-o-perspective': PERSPECTIVE + 'px',
			'perspective': PERSPECTIVE + 'px'
		});
	} else {
		$wrappers.css('position', 'relative');
	}

	$window.resize(onResize);
	if (!isTouch) $window.scroll(onScroll);
	if (isTouch) $window.RMDrag({
		'move'	: onScroll,//_.throttle(onScroll, 30),
		'end'	: onScrollEnd,
		'silent': false,
		'type'  : 'touch',
		'preventDefault' : true
	});
	onResize();

	maxGalleryInd = $('.homepage-content-center-block-ipad-gallery-image').length - 1;
	curGalleryInd = maxGalleryInd;

	if (!isTouch)
		$('.homepage-content-center-block-ipad-gallery-open').add($('.homepage-content-center-block-anno span')).on('click', startMag);
	else {
		$('.homepage-content-center-block-ipad-gallery-open').replaceWith('<a href="/mag/1/" target="_blank" class="homepage-content-center-block-ipad-gallery-open" style="display:block;text-decoration:none">Open</a>');
		$('.homepage-content-center-block-anno span').replaceWith('<a href="/mag/1/" target="_blank" style="color:black">our first mag</a>');
		$('.homepage-content-center-block-ipad-gallery-open').add($('.homepage-content-center-block-anno a')).on('touchstart', function(e) {
			e.stopPropagation();
		});
	}



	$('.homepage-content-center-block-anno a, .homepage-content-bottom-block-social-mail a, .homepage-content-bottom-block-social-fb-link, .homepage-content-bottom-block-social-tweet-link').on('touchstart', function(e) {
		e.stopPropagation();
	});


	//twitter button
	!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

	//facebook button
	(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));


	//mail form prepare

	var $form = $(".homepage-content-bottom-block-mail-form");
	var $input = $(".homepage-content-bottom-block-mail-input");
	var $submit = $(".homepage-content-bottom-block-mail-submit");

	$form.addClass('homepage-content-bottom-block-mail-input-empty');

	var inputFocused = true; //из-за хрома, он при переключении окон послвает блюр и фокус дважды

	$input
		.bind("blur", function () {
			if (!inputFocused) return;
			inputFocused = false;
			var q = $.trim($(this).val());
			if (q == "") {
				$(this).val($(this).attr("data-placeholder"));
				$form.addClass('homepage-content-bottom-block-mail-input-empty');
			} else
				$form.removeClass('homepage-content-bottom-block-mail-input-empty');
		})
		.bind("focus", function () {
			if (inputFocused) return;
			inputFocused = true;
			if ($form.hasClass("homepage-content-bottom-block-mail-input-empty")) {
				$(this).val("");
				$form.removeClass('homepage-content-bottom-block-mail-input-empty');
			}
		})
		.bind('input propertychange', checkEmail)
		.bind('keypress keyup keydown', function(e) {e.stopPropagation()})
		.bind('keyup', function(e) {
			e.stopPropagation();
			if (e.keyCode == 13) onSubmit();
		})
		.blur();

	$submit.bind('click', onSubmit);

	$submit.add($input).on('touchstart', function(e) {e.stopPropagation()});

	$window.on('touchstart', function(e) {
		if (inputFocused) {
			$input.blur();
			e.stopPropagation();
		}
	});

	setInterval(galleryStep, 4000);


	$('.scroll-hover-wrapper')
		.on('mouseenter', function() {
			$('.scroll-wrapper').addClass('scroll-hover');
		})
		.on('mouseleave', function() {
			$('.scroll-wrapper').removeClass('scroll-hover');
		})
		.on('click', function() {
			fullScroll();
		})
		.on('touchstart', function(e) {
			e.stopPropagation();
		});

	//functions

	function applyTransform(obj, str) {
		obj.css({
			'-webkit-transform': str,
			'-moz-transform': str,
			'-ms-transform': str,
			'-o-transform': str,
			'transform': str
		});
	}

	function calcPerspectiveDimensions(angle) {
		var t = 0,
			b = lineHeight,
			rad = angle * Math.PI / 180,
			cosAngle = Math.cos(rad),
			sinAngle = Math.sin(rad);
		t -= lineHeight / 2;
		b -= lineHeight / 2;
		t = cosAngle * t * PERSPECTIVE / (PERSPECTIVE + sinAngle * t);
		b = cosAngle * b * PERSPECTIVE / (PERSPECTIVE + sinAngle * b);
		t += lineHeight / 2;
		b += lineHeight / 2;
		return [t, b];
	}

	function applyRotation() {

		if (Math.abs(oldAngle - curAngle) < 0.001) return;

		var perspectiveDimensions = calcPerspectiveDimensions(curAngle);

		var marginTop = lineHeight - perspectiveDimensions[1];
		var marginBottom = perspectiveDimensions[0];
		var startOffset = -marginTop - 1;
		var ind = 0;
		var dir = -1;

		$wrappers.each(function() {
			applyTransform($(this), 'translateY(' + startOffset + 'px)', 'top', startOffset + 'px');
			startOffset += lineHeight - (ind == 1 ? marginBottom : marginTop) * 2 - 2;
			ind = 1 - ind;
		})

		$lines.each(function() {
			applyTransform($(this), 'rotateX(' + (curAngle * dir) + 'deg)');
			dir *= -1;
		});

		$gradients.css('opacity', curAngle / 90);

		oldAngle = curAngle;
	}

	function onResize() {
		lineHeight = Math.ceil($window.height() / $lines.length) + (is3d ? 2 : 0);
		scrollHeight = $window.height() * 2;
		if (!isTouch) $stub.height(scrollHeight);
		$wrappers.css({'height': lineHeight + 'px'})
		$lines.css({'line-height': (lineHeight * 0.85) + 'px', 'font-size': (lineHeight * 0.8) + 'px'})

		if (is3d) {
			var perspectiveDimensions = calcPerspectiveDimensions(STOPANGLE);
			crumplesTotalHeightOnStopAngle = (perspectiveDimensions[1] - perspectiveDimensions[0] - 2) * $lines.length + 1;
		} else {
			crumplesTotalHeightOnStopAngle = lineHeight * $lines.length;
		}

		oldAngle = undefined;
		onScroll();

		var mt = ($window.height() - 672) / 2;
		mt = Math.min(Math.max(mt, 0), 108);
		$('.homepage-content-center-block-txt').css('margin-top', mt + 'px');
	}

	function onScroll(e) {
		var scrollTop = $window.scrollTop();

		if (isTouch) {
			var dY = 0;
			if (e) dY = e.deltaY;
			scrollTop = Math.max(Math.min(touchScrollTop - dY, scrollHeight / 2), 0);
		}

		var percent = 2 * scrollTop / scrollHeight;
		if (is3d) {
			curAngle = 2 * STOPANGLE * percent;
			if (curAngle >= STOPANGLE) {
				curAngle = STOPANGLE;
				var topOffset = -crumplesTotalHeightOnStopAngle * (percent - 0.5) * 2;
				applyTransform($box, 'translateY(' + topOffset + 'px)');
			} else {
				applyTransform($box, 'translateY(0px)');
			}
			applyRotation();
		} else {
			var topOffset = -crumplesTotalHeightOnStopAngle * percent;
			$box.css('top', topOffset + 'px');
		}
	}

	function onScrollEnd(e) {
		var dY = 0;
		if (e) dY = e.deltaY;
		touchScrollTop -= dY;
		touchScrollTop = Math.max(Math.min(touchScrollTop, scrollHeight / 2), 0);
	}


	function fullScrollStep() {
		console.log(scrollTimerCurPos);
		if (isTouch) {
			scrollTimerCurPos -= 30;
			if (scrollTimerCurPos <= scrollTimerTargetPos) {
				scrollTimerCurPos = scrollTimerTargetPos;
				clearInterval(scrollTimer);
			}
			onScroll({deltaY: scrollTimerCurPos });
			onScrollEnd({deltaY: scrollTimerCurPos});
		} else {
			scrollTimerCurPos += 30;
			if (scrollTimerCurPos >= scrollTimerTargetPos) {
				scrollTimerCurPos = scrollTimerTargetPos;
				clearInterval(scrollTimer);
			}
			$window.scrollTop(scrollTimerCurPos);
		}
	}

	function fullScroll() {
		if (isTouch) {
			scrollTimerCurPos = -touchScrollTop;
			scrollTimerTargetPos = touchScrollTop - scrollHeight / 2;
		} else {
			scrollTimerCurPos = $window.scrollTop();
			scrollTimerTargetPos = scrollHeight / 2;
		}
		scrollTimer = setInterval(fullScrollStep, 30);
	}

	function checkEmail() {

		function isValidEmail(email, strict) {
			if (!strict) email = email.replace(/^\s+|\s+$/g, '');
			return (/^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i).test(email);
		}

		$form.toggleClass('homepage-content-bottom-block-mail-input-valid', isValidEmail($input.val()) && !$form.hasClass("homepage-content-bottom-block-mail-input-empty"));
	}

	function onSubmit(e) {
		if (!$form.hasClass('homepage-content-bottom-block-mail-input-valid')) return;

		$.post('/api/emailme/', {'email': $input.val()}, function(response) {
			if (response == 'ok') {
				$form.addClass('homepage-content-bottom-block-mail-input-submitted');
				$input.remove();
			} else {
				console.error(response);
			}
		});
	}



	function galleryStep() {
		var nextGalleryInd = curGalleryInd - 1;
		if (nextGalleryInd < 0) {
			nextGalleryInd = maxGalleryInd;
			$('.homepage-content-center-block-ipad-gallery-image').eq(nextGalleryInd).fadeIn(500);
		} else
			$('.homepage-content-center-block-ipad-gallery-image').eq(nextGalleryInd).fadeIn(0);
		$('.homepage-content-center-block-ipad-gallery-image').eq(curGalleryInd).fadeOut(500);
		curGalleryInd--;
		if (curGalleryInd < 0) curGalleryInd = maxGalleryInd;
	}

	function startMag() {
		var $layer = $('.homepage-content-center-block-ipad-gallery-open');
		var x = $layer.offset().left;
		var y = $layer.offset().top - $(window).scrollTop();
		var w = $layer.width();
		var h = $layer.height();

		$layer.appendTo('body')
			.empty()
			.css({
				position: 'fixed',
				left: x + 'px',
				top: y + 'px',
				width: w + 'px',
				height: h + 'px',
				background: '#000',
				opacity: 0.8

			});

		$layer
			.animate({
				left: 0,
				top: 0,
				width: $(window).width(),
				height: $(window).height(),
				opacity: 1
			}, 500, function() {
				window.location.href = '/mag/1/';
			});
	}

}