zhenyanevis.github.io/index.html at master · zhenyanevis/zhenyanevis.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Skroll lending</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
	<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#nav').localScroll(800);
			$('#intro').parallax("50%", 0.1);
			$('#second').parallax("50%", 0.1);
			$('.bg').parallax("50%", 0.4);
			$('#third').parallax("50%", 0.3);
		});
		(function($){
			var $window = $(window);
			var windowHeight = $window.height();

			$window.resize(function(){
				windowHeight = $window.height();
			});

			$.fn.parallax = function(xpos, speedFactor, outerHeight){
				var $this = $(this);
				var getHeight;
				var firstTop;
				var paddingTop = 0;

				$this.each(function(){
					firstTop = $this.offset().top;
				});

				if(outerHeight) {
					getHeight = function(jqo) {
						return jqo.outerHeight(true);
					};
				} else {
					getHeight = function(jqo) {
						return jqo.outerHeight(false);
					};
				}
				if(arguments.length < 1 || xpos === null) xpos = "50%";
				if(arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
				if(arguments.length < 3 || outerHeight === null) outerHeight = true;

				function update(){
					var pos = $window.scrollTop();

					$this.each(function(){
						var $element = $(this);
						var top = $element.offset().top;
						var height = getHeight($element);

						if(top + height < pos || top > pos + windowHeight) return;
						$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos)*speedFactor) + "px");
					});
				}
				$window.bind('scroll', update).resize(update);
				update();
			};
		})(jQuery);
		$(document).ready(function(){
        $(".slowly").on("click", function(event){
          event.preventDefault();
          var id = $(this).attr('href'),
              top = $(id).offset().top;
          $('body, html').animate({scrollTop: top}, 700);
        });
      });
	</script>
</head>
<body>
	<div class="menu">
		<ul id="nav">
			<li><a href="#intro"></a></li>
			<li><a href="#second"></a></li>
			<li><a href="#third"></a></li>
			<li><a href="#fifth"></a></li>
		</ul>
	</div>
	<div id="intro">
		<div class="story">
	    	<div class="header">
			<h1>Дешевле,<br>чем смартфон</h1>
	        <p>Стоит всего 300$, запас хода от 20 км, скорость от 10 км/ч</p>
	        </div>
	    </div> <!--.story-->
	</div> <!--#intro-->

	<div id="second">
		<div class="story"><div class="bg"></div>
	    	<div class="float-right">
	            <h2 class="box-collor-2">Стиль</h2>
	            <p class="box-collor-2">Выделись из толпы.</p>
	            <p class="box-collor-2">Самая стильная и неповторимая форма сигвея Lambo LED Music подойдет каждому кто хочет выделиться. Напоминает форму спорткара</p>
	        </div>
	    </div> <!--.story-->

	</div> <!--#second-->

	<div id="third">
		<div class="story">
	    	<div class="float-left">
	        	<h2 class="box-collor-3">Для всей семьи</h2>
	            <p class="box-collor-3">У нас вы можете купить гироскутеры как для детей, так и для взрослых</p>
	        </div>
	    </div> <!--.story-->
	</div> <!--#third-->

	<div id="fifth">
		<div class="story">

       <h2>Форма заказа</h2>
       <form name="order" onsubmit="return validate_form ( );">
       <input type="hidden" name="product" value="">
       <p>ФИО: <input type="text" name="fio">
       <p>E-mail: <input type="text" name="email">
       <p>Телефон: <input type="text" name="phone">
       <p>Адрес: <input type="text" name="address">
       <p><input class="btn" type="submit" value="Отправить">
       </form>
	    </div> <!--.story-->
	</div> <!--#fifth-->
</body>
</html>