-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtutorial-03.html
More file actions
140 lines (119 loc) · 6.69 KB
/
tutorial-03.html
File metadata and controls
140 lines (119 loc) · 6.69 KB
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
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>JavaScript / jQuery</title>
<!-- <link rel="icon" type="image/x-icon" href="favicon.ico" /> favicon -->
<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Open+Sans:400,700" rel="stylesheet"> <!-- fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <!-- font-awesome -->
<link rel="stylesheet" text="text/css" href="styles/styles.css"> <!-- style page -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<button class="menu">menu</button>
<h1>JAVASCRIPT / JQUERY</h1>
<nav class="site-nav-bar">
<ul>
<li><a href="index.html">Google Maps</a></li>
<li><a href="tutorial-02.html">Slide Show</a></li>
<li class="slide-out"><a class="slide-btn" href="#">Snap to click<i class="fa fa-chevron-right" aria-hidden="true" style="font-size: 16px; padding-left: 5px;"></i></a>
<ul class="step-menu">
<li><a class="scroll-step-01" href="#scroll-step-01">Step 01</a></li>
<li><a class="scroll-step-02" href="#scroll-step-02">Step 02</a></li>
<li><a class="scroll-step-03" href="#scroll-step-03">Step 03</a></li>
</ul>
</li>
</ul>
</nav>
</header> <!-- end header -->
<main class="tutorial-03-wrapper">
<section class="tutorial-03-show" id="click-surface">
<h1>DEMO</h1>
<h2>click anywhere in the green box to move the SUN.</h2>
<div id="sun" class="sun-transform"></div>
<div class="land-scape">
<img src="images/cactus-01.svg" alt="Desert Landscape">
</div>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</section>
<section class="tutorial-03-tell">
<article class="tell-01 tell">
<h1><span id="scroll-step-01"> </span>step 01</h1>
<h2>Creating the Sun</h2>
<p>Let's begin with adding the HTML.</p>
<p>First, you'll need to create two divs, a parent and child. Assign a class or an id to both divs.</p>
<pre><code class="language-css"><div id="background">
<div id="cirlce"></div>
</div>
</code></pre>
<p>This tutorial will deal with animating a circle, but you could easily insert an image into the child div if you want.</p>
</article> <!-- tell-01 end -->
<article class="tell-02 tell">
<h1><span id="scroll-step-02"> </span>step 02</h1>
<h2>Style it!</h2>
<p>Next, let's get our CSS going.</p>
<p>First, we'll style the parent div, or the 'background'. Set the width and height to your desired size. Add a cursor property to indicate that your parent div is 'click-able'</p>
<pre><code class="language-css">#background {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background-color: burlywood;
cursor: pointer;
}
</code></pre>
<p>Next up, is the the child div. Let's style up our 'circle.'<p>
<p>In this case I've shaped the circle using 'border-radius'. We've also positioned the cirlce relatively, and added a left: -50% and a transform: translate (-50%, 0); to center the circle horizontally. <p>
<pre><code class="language-css">#cirlce {
position: relative;
left: 50%;
top: 175px;
transform: translate (-50%, 0);
width:60px;
height:60px;
background-color: cadetblue;
border: 4px solid burlywood;
transition: left .5s cubic-bezier(.59,-0.8,.45,1.69),
top .5s cubic-bezier(.59,-0.8,.45,1.69);
}
</code></pre>
</article> <!-- tell-02 end -->
<article class="tell-03 tell">
<h1><span id="scroll-step-03"> </span>step 03</h1>
<h2>Adding the magic</h2>
<p>Next step, add the javaScript.</p>
<p>Alright, let's put it all together and flush out a total re-style. Check out the code below to familiarize yourself with the different 'featureType' and 'elementType' selectors.</p>
<pre><code class="language-css">var circle = document.querySelector("#cirlce");
var background = document.querySelector("#background");
background.addEventListener("click", function(event) {
var xPosition = event.clientX - background.getBoundingClientRect().left - (circle.clientWidth / 2);
var yPosition = event.clientY - background.getBoundingClientRect().top - (circle.clientHeight / 2);
// in case of a wide border, the boarder-width needs to be considered in the formula above
circle.style.left = xPosition + "px";
circle.style.top = yPosition + "px";
}
);
</code></pre>
<p>As you can see, we've passed our id's into two corresponding variables with the same name.</p>
<p>Next, we add an eventlistener which triggers a function when the 'background' is clicked.</p>
<p>With in the function two variables are declared, and X and Y position. These variables contain an equation. Let's break it down.</p>
<p><span>event.clientX</span> - get the X coordinates of the event (the click)</p>
<p><span>background.getBoundingClientRect().left</span> - return the width of the 'background' and its position relative to the viewport.</p>
<p><span>circle.clientWidth / 2</span> - divide the width of the circle in half to find it's center along the x-axis</p>
<p><span>circle.style.left = xPosition + "px";</span> - pass the coordinates of 'xPosition' into cirlce and update the 'left' position of the element.</p>
</article> <!-- tell-03 end -->
</section>
</main> <!-- end main -->
<footer></footer> <!-- end footer -->
<!-- scripts -->
<script src="scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="scripts/prism.js" type="text/javascript"></script>
<script src="scripts/follow-scroll-tut-03.js" type="text/javascript"></script>
<script src="scripts/nav-effects.js" type="text/javascript"></script>
<script src="scripts/tutorial-03-follow-click.js" type="text/javascript"></script>
</body>
</html>