More than 5 years have passed since last update.

横からスライドイン

jQuery

Posted at 2014-12-19

横からページがスライドインしてくる。
iPhoneのメールだとかグノシーだとか、何か詳細を見ようとすると右のほうからスルスルって出てくるやつ。

なんかかっこいいじゃないですか。

ということで書いてみた。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Slide in</title>
	<style type="text/css">
	.template {
		display: none;
	}

	#slidebase {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: #c0c0c0;
		text-align: center;
	}
	#slide1 {
		background-color: red;
	}
	#slide2 {
		background-color: green;
	}
	#slide3 {
		background-color: blue;
	}
	</style>
</head>
<body>
	<div id="slidebase"></div>

	<div id="slide1" class="slide template">
		page 1
		<button slide_id="#slide2" class="slidein">&gt;</button>
	</div>
	<div id="slide2" class="slide template">
		<button class="back" slide_id="#slide2">&lt;</button>
		page 2
		<button slide_id="#slide3" class="slidein">&gt;</button>
	</div>
	<div id="slide3" class="slide template">
		<button class="back" slide_id="#slide3">&lt;</button>
		page 3
	</div>

	 
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>
	$(function () {
		$('#slidebase').setslides('#slide1', '#slide2');
		$('#slidebase').setslides('#slide2', '#slide3');

		$('.slidein').click(function () {
			var slideId = $(this).attr('slide_id');
			$(slideId).slidein();
		});

		$('.back').click(function () {
			var slideId = $(this).attr('slide_id');
			$(slideId).slideout();
		});
	});
	</script>

	<script>
	(function ($) {
		var defaults = {
			duration: 1000,
			dur_div: 3
		};

		$.fn.setslides = function (top, slides) {
			var base = this;

			base.css({
				overflow: 'hidden'
			});

			$(top).css({
				position: 'absolute',
				width: base.css('width'),
				height: base.css('height'),
				display: 'block'
			});
			base.append($(top));

			slides.split(/\s*,\s*/).forEach(function (slide) {
				$(slide)[0].slide_topslide = top;
				$(slide)[0].slide_offset = base.width();
				$(slide).css({
					left: $(slide)[0].slide_offset + 'px',
					position: 'absolute',
					width: base.css('width'),
					height: base.css('height'),
					display: 'block'
				});
				base.append($(slide));
			});
		};

	 	$.fn.slidein = function (options, easing, callback) {
	 		var settings = $.extend(defaults, options);

			this.animate({
				left: "-=" + this[0].slide_offset + "px"
			}, settings.duration, easing, callback);

	 		this[0].slide_dur_div = settings.dur_div;
			$(this[0].slide_topslide).animate({
				left: "-=" + this[0].slide_offset /
						this[0].slide_dur_div + "px"
			}, settings.duration, easing);
		};

		$.fn.slideout = function (options, easing, callback) {
	 		var settings = $.extend(defaults, options);

			this.animate({
				left: "+=" + this[0].slide_offset + "px"
			}, settings.duration, easing, callback);

			$(this[0].slide_topslide).animate({
				left: "+=" + this[0].slide_offset /
						this[0].slide_dur_div + "px"
			}, settings.duration, easing);
		};
	})(jQuery);
	</script>
</body>
</html>

まだまだ練習中なので、意味もなくjQueryのプラグインぽくしてみました。
画面のresizeされるとおかしなことになりますw

animate()ってので上下のシートを適当な速さで動かしてみただけ。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up