1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=5327c96f-d7b0-43ce-84be-80ccd99268f3 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <link href='https://d33wubrfki0l68.cloudfront.net/bundles/c8af725f88d2441d0a325afc84fdd06eea84db4d.css' rel='stylesheet'/> 10 11 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> 12 13 <title>Sarah Shelley - UX Designer/Developer</title> 14 <link rel="icon" href="./imgs/spiralLogo.png"> 15 <link href="https://fonts.googleapis.com/css2?family=Aguafina+Script&family=Anton&family=Montserrat:wght@200&display=swap" rel="stylesheet"> 16 <link href='https://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'> 17 <link href="https://fonts.googleapis.com/css2?family=Antic+Slab&family=Cardo&family=Codystar&family=Great+Vibes&family=Jacques+Francois+Shadow&family=Junge&family=Nanum+Myeongjo&family=Old+Standard+TT&family=Open+Sans+Condensed:wght@300&family=Playfair+Display:ital@1&family=Ruthie&family=Tenor+Sans&family=Vast+Shadow&display=swap" rel="stylesheet"> 18 19 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css"> 20 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 21 22 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 65 bytes, lines 22-23
22 23<script async src="https://www.googletagmanager.com/gtag/js?id=
23UA-130596685-2
vendor: 13 bytes, line 23
23"></script>
24<script> 25
vendor: 138 bytes, lines 25-29
25window.dataLayer = window.dataLayer || []; 26 function gtag(){dataLayer.push(arguments);} 27 gtag('js', new Date()); 28 29 gtag('config', '
29UA-130596685-2
vendor: 5 bytes, line 29
29');
30</script>
30 31 32 </head> 33<body> 34 <header> 35 <nav> 36 <div class="hamburger"> 37 <div class="line"></div> 38 <div class="line"></div> 39 <div class="line"></div> 40 </div> 41 <ul class="nav-links"> 42 <a href='/'><li class="active" placeholder="">Sarah Shelley</li></a> 43 <a href='/about'><li class="active" onclick="$('html, body').animate({scrollTop: $('.container').offset().top}, 100);" placeholder="">About</li></a> 44 <div class="dropdown"> 45 <li class="active" id="work" onclick="$('html, body').animate({scrollTop: $('.container').offset().top}, 100);" placeholder=""> 46 Work 47 <ul> 48 <li class="active"><a class='pre' href='/work'>ShirtsByMike</a></li> 49 <li class="active"><a href='/whooshmail'>WhooshMail</a></li> 50 </ul> 51 </li> 52 </div> 53 <a href="#links_2" class="toggle"><li class="active" placeholder="">Contact</li></a> 54 </ul> 55 <a href="https://www.behance.net/sarahshelleyuxdesign" target="_blank" class="fa fab fa-behance"></a> 56 <a href="https://www.linkedin.com/in/sarah-shelley-a50010160/" target="_blank" class="fa fa-linkedin"></a> 57 <a href="https://github.com/sargef" target="_blank" class="fa fa-github"></a> 58 </nav> 59 </header> 60 61 <!-- Top container banner --> 62 <section class="container_1"> 63 </section> 64 <div class="top_img" style="background-image:url('./imgs/ppic_min2.jpg')" alt="Image of Sarah Shelleys mobile landing collage and water background"> 65 <div class="ripples_text">Lowest Lane - Super Store</div> 66 </div> 67 68<!-- Case study 1 --> 69 <div class="container_wrapper_2" id="mikes">
70 <section class="container_case_list_1"> 71 <div class="case_1"> 72 <h1></h1> 73 <div class="block_1"> 74 <ul> 75 <li><pre>Client: Lowest Lane</pre></li> 76 <li><pre>Role: UX Designer</pre></li> 77 <li><pre>Task: Mobile App Design</pre></li> 78 </ul> 79 </div> 80 81 <div class="block_3" id="overview"> 82 <h1>Overview</h1> 83 <p> 84 The goal of this case study was to produce a prototype of a <span class="highlight">grocery shopping app</span> which addresses pain points to grocery shoppers and helps to combat these pain points. 85 <br><br> 86 Initial research by interviewing participants is conducted in order to get an idea of the majority of pain points that users face. 87 </p> 88 </div> 89 90 <div class="video-content"> 91 <video style="max-width: 100%" style="max-height: 100%" controls poster="./imgs/groceryResearch.png"> 92 <source src="https://d33wubrfki0l68.cloudfront.net/0e12807e2cc01d52f26de1e7e1f5a37864bab38e/5e9fa/imgs/groceryresearch.mp4" type="video/mp4"> 93 Your browser does not support the video tag. 94 </video> 95 </div> 96 97 <div class="block_3" id="painpoints"> 98 <h1>Approach</h1> 99 <p> 100 101 In trying to determine an approach to my grocery shopping app, i needed to include <span class="highlight">conducting interviews</span> with a group of users who will most likely use this app or benefit from the app. 102 <br><br> 103 I want to discover the types of customers they are, by asking questions about how their normal days activities would pan out also by asking about their hobbies. <br> 104 This information will help me better understand their main goals when doing shopping or reasons for shopping at a store or via an app. 105 <br><br> 106 In conducting these interviews, i am aiming to discover what their goals are that would benefit from the app and <span class="highlight">pain points</span> they have from shopping in order to use this information to structure the app to suit their needs. 107 <br><br> 108 109 <h1>Target Audience</h1> 110 111 I aim to find different age brackets in order to cover a wider audience but not specifically. 112 <br><br> 113 The target audience in my opinion is very broad in age bracket but begins to close when the words <strong><em>âtech savvy shoppingâ</em></strong> is targeted. 114 <br><br> 115 The app will most likely be used by those that already use technology to do shopping or those that like the idea of modern technology and also do the shopping for their household already. 116 <br><br> 117 I have decided to filter out candidates by using a <span class="highlight">short survey first</span> to target my intended audience via social media, then select a group to survey based on the variety of the audience, for example, different age brackets and times they shop per week. 118 <br><br> 119 I want to capture as many different answers as possible to filter out the most obvious pain points when shopping and hope to capture shopping pleasers for my next part of the process of my shopping app design. 120 </p> 121 122 <div class="scroll-animation revealedBox goRight"> 123 <img class="frogy contentBox" src="https://d33wubrfki0l68.cloudfront.net/b50af18a8f241d092105b673fe379d44bb4729fa/cc771/imgs/herolady.png" alt="Photo of designed website hero, Hero lady!" style="width:340px;height:480px;"/> 124 </div> 125 </div> 126 127 <div class="block_3" id="goals"> 128 <h1>Link to Survey</h1> 129 130 <h5> 131 <a href="https://surveyfrontend38.herokuapp.com/join_course_survey" crossorigin="anonymous" target="_blank">https://surveyfrontend38.herokuapp.com/join_course_survey</a> 132 </h5> 133 </div> 134 135 <div class="block_3" id="affinity"> 136 <h1>Affinity Diagram</h1> 137 <img src="https://d33wubrfki0l68.cloudfront.net/0d72016ebbf5e884fd5d9a7fa6ad2644bc0a0f39/9d3aa/imgs/shopping-affinity-diagram.png"> 138 </div> 139 140 <div class="block_4" id="problemanalysis"> 141 <h1>User Research Analysis</h1> 142 <p> 143 After completing the research phase and looking over the affinity diagram. I discovered that participants and potential users to the grocery shopping app found the following issues within their current grocery shopping experiences; 144 <br><br> 145 <p></p> 146 <ol> 147 <li class="no_animate"><span class="highlight">Finding products</span> is an issue.</li> 148 <br> 149 <li class="no_animate">Not only are <span class="highlight">product sizes</span> of the same product <span class="highlight">
149not grouped together</span> in most shopping apps sizing of products against any type of chart is missing.</li> 150 <br> 151 </ol> 152 <p>In bringing the product size variety to the same page, this knocks out two pain points. It will show a difference in product size against one another and also stops the unnecessary scrolling to find the correct size. 153 </p> 154 <br> 155 <ol> 156 <li class="no_animate"><span class="highlight">Meal pairing</span> is also something that a couple of users wished that shopping apps contained.</li> 157 <br> 158 </ol> 159 <p> 160 Being able to find a meal that they want to cook and then have the items for that meal provided within the same page to add to the shopping cart. 161 </p> 162 <ol> 163 <li class="no_animate"><span class="highlight">Delivery substitutes</span> was an issue amongst participants.</li> 164 <br> 165 </ol> 166 <p> 167 <span class="highlight">Creating a substitute messenger feature</span> within the app prior to delivery to confirm that customers are happy with their substitutes picked out for them before they are delivered. 168 <br><br> 169 This could be designed so that there is a <span class="highlight">snapshot or list of items</span> that were substituted <span class="highlight">sent to the customer prior to delivery.</span> <br><br>Giving the customer a time limit to reply if they are ok with it. 170 <br><br>The customer would know ahead of time that this snapshot will be sent if needed, so they are still given the control of what is going to be the delivered end result. 171 <br><br> 172 </p> 173 I imagine this could bring in some time constraints to the store and may result in a new problem if customers were to decline on the substituted product. 174 <br><br> 175 To save that time constraint, <span class="highlight">if customers decline the substitution, then a full refund</span> of the item could be a good way to finalise a decline result. Giving customers 30 mins to reply with their decision could be an option also. <br> 176 <br>This would give the customer power over what their final delivered products would be, taking away the pain point and frustration they feel of getting items that were not previously consented to. 177 <br><br> 178 Substitution is a nice feature that current grocery apps have, but because Quality is so important to the users, the quality checking and final decision should lay in the hands of the customer. 179 </p> 180 </div> 181 182 <div class="block_7" id="summary"> 183 <h1>Solution for Design</h1> 184 <p> 185 I plan to make the <span class="highlight">product sizes in one page.</span> For instance, Coca-cola. Instead of finding a 6 pack of Coca-cola, then deciding after finding the product, that i want to buy a 12 pack. I can scroll down the same page to find it. Not have to go back and search through every soft drink product again. 186 <br><br> 187 For the <span class="highlight">meal pairing,</span> i plan to make products available for purchase within the meal recipe page. This would include a <span class="highlight">calender</span> where users can choose which day of the week they want to have that meal and at the end of the saving meals to the calender. They can print off a meal planner for the week, while also having all of their ingredients conveniently added to the shopping cart. 188 <br><br> 189 For <span class="highlight">delivery,</span> i plan to make a feature within the app for <span class="highlight">substitute confirmation,</span> sent to the customer prior to delivery but featuring a time limit for reply. 190 <br><br> 191 If a reply is not received within a half hour time limit, <span class="highlight">customers opt in for a refund</span> at the time of signing up to the app on this occasion. They will also have the option to change their mind within their settings to opt out of a refund, thus accepting the substitute picked for them, if the reply time expires. 192 </p> 193 </div> 194 195 <div class="block_8"> 196 <h2>Sketches</h2> 197 <div class="block_8_content"> 198 <div class="b_8_1"> 199 <img class="tshirt_sketch_1" src="https://d33wubrfki0l68.cloudfront.net/8ba8deb7acf50904b04b1198c1b4606ba84f4574/3e627/imgs/grocerysketchescollage.jpg" alt="T-shirt webite desktop sketches"/> 200 </div> 201 </div> 202 </div> 203 204 <div class="block_20"> 205 <h3>Wireframes</h3> 206 <div id="drag-container"> 207 <div id="spin-container"> 208 <!-- Add your images (or video) here --> 209 210 <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/bb6aa1128b773f54fde29fde45b7df5e3e29e435/6fe29/imgs/homescreenloggin2.jpg" alt=""> 211 <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/01f628ed2b72554dbb4aac24895154c6e80c19c4/cc5f8/imgs/signup2.jpg" alt=""> 212 <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/33d85b21f9
212045a9014ac8fbe2f984a69d7daa559/5ef3f/imgs/settings2.jpg" alt=""> 213 <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/ac4dbf7d9c5ec03c2b349a1732f3e0c553a40ac9/0ecb7/imgs/productpagehome2.jpg" alt=""> 214 <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/d54a31140f943b2d6c8732224a3f744e244b3ddd/3e185/imgs/productisle2.jpg" alt=""> 215 <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/79f6ecba354fc551ea4f94afe4b4c3e24edd2c73/db343/imgs/productdetail2.jpg" alt=""> 216 <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/d034f2cc40a7ffb6a08e87851cf6b6b5794b1ef2/16376/imgs/mealplanner2.jpg" alt=""> 217 <img class="spin-img" src="https://d33wubrfki0l68.cloudfront.net/a9e306d4b0846e7e2e0417f7a7165fc675d27339/eb637/imgs/homescreen2.jpg" alt=""> 218 219 <!-- Example add video --> 220 <!-- <video controls autoplay="autoplay" loop> 221 <source src="./imgs/groceryResearch.mp4" type="video/mp4"> 222 </video> --> 223 224 <!-- Text at center of ground --> 225 </div> 226 <div id="ground"></div> 227 </div> 228 </div> 229 230 231 <div class="block_10"> 232 <h1>Usability Testing</h1> 233 <a href="https://www.figma.com/proto/ZvznI61OQwGO4pXsOO7Wj5/GroceryApp?node-id=5%3A124&scaling=contain" crossorigin="anonymous" target="_blank"><h5 class="shrink"><span class="highlight">Link to Prototype:</span> https://www.figma.com/proto/ZvznI61OQwGO4pXsOO7Wj5/GroceryApp?node-id=5%3A124&scaling=contain</h5></a> 234 <h4><span class="highlight">Tasks</span></h4> 235 <h5> 236 How would you create an account? 237 <br><br> 238 How would you add a grocery item to the shopping cart? 239 <br><br> 240 How would you find a recipe and add a recipe item to your cart? 241 </h5> 242 <br> 243 <h4><span class="highlight">Questions for Participants</span></h4> 244 <h5> 245 Did you find the app easy to use? 246 <br><br> 247 What parts were most enjoyable to use? 248 <br><br> 249 Did you find the app frustrating to use in any areas? If so, why? 250 <br><br> 251 Do you have any other feedback? 252 </h5> 253 <br> 254 255 </div> 256 257 <div class="block_16" id="testanalysis"> 258 <h2>Usability Test Analysis</h2> 259 <h3>What went well?</h3> 260 <ul> 261 <li>The <span class="highlight">Navigation</span> was <span class="highlight">simple</span> to use.</li> 262 <br> 263 <li>The <span class="highlight">Meal Planner</span> section was <span class="highlight">enjoyable</span> to find</li> 264 <br> 265 <li><span class="highlight">Sizing choice</span> on the one page was appreciated</li> 266 </ul> 267 <br> 268 <h3>What needs to change?</h3> 269 <ul> 270 <li>The <span class="highlight">naming of the âSelect Sizingâ</span> in product section needs to change to âChooseâ to be more familiar.</li> 271 <br> 272 <li>Change <span class="highlight">layout of Signup page</span></li> 273 <br> 274 <li><span class="highlight">Meal Planner</span> could potentially be <span class="highlight">changed to âRecipesâ</span></li> 275 <br> 276 <li><span class="highlight">Better explanation on the substitution âopt inâ</span> with maybe a âmoreâ¦â section with a better and more detailed description.</li> 277 </ul> 278 </div> 279 280 <div class="block_16" id="learnings"> 281 <h2>Learnings</h2> 282 <p> 283 Overall i think the app was a success in the design. Users found it easy to navigate through in general and found the features useful. 284 <br><br> 285 There is still a little work to be done in refining the extra needed elements such as âopt inâ extended description and also the change of button label for the âSelect Sizingâ on the product page. Possibly also change the âMeal Plannerâ to âRecipesâ. 286 <br><br> 287 The next steps for the grocery app should be to add a fully functional product cart, product selections and Delivery setup. 288 <br><br> 289 The app should also have a choice before adding items to cart of choosing either, âDeliveryâ or âPick upâ. This could then navigate to Delivery times/options for the Delivery option and Pick up date/time for the Pick up option. 290 <br><br> 291 The Grocery app has all that it needs to gain user insights in the current pain points as gathered from the initial user reseach as it is and the next steps would be a fully functional prototype with all screens included. 292 <br><br> 293 This i suggest, would also need to be user tested again once it was completed/refined before sending the design to the Developer team to begin product development. 294 </p> 295</div> 296 297<div class="block_17"> 298 <h3 class="other_cases">Other Case Studies</h3> 299 <div class="block_17_content"> 300 <div class="b_17_1"> 301 <h5>Shirts By Mike</h5> 302 <div onclick='location.href="work.html#mikes"' class="item"> 303 <div class="feature_img_Container"> 304 <img class="image vh-fix" src="https://d33wubrfki0l68.cloudfront.net/87b945e1441900232b8885f98b902ab0e8559484/bc80b/imgs/shirtb_min2.jpg" alt="Picture of Shirts by Mike Case Study Landing Page Design"> 305 <div class="dtl"> 306 <h3>Case Study</h3> 307 <p>T-shirt website; 'Shirts by Mike'. Company objectives included giving the website a fresh new design, Increase sales and launch a featured t-shirt of the month. </p> 308 <a href='/work#mikes'>Read More</a> 309 </div> 310 </div> 311 </div> 312</div> 313 <div class="b_17_1"> 314 <h5>WhooshMail</h5> 315 <div class="item" onclick='location.href="whooshmail.html"'> 316 <div class="feature_img_Container"> 317 <img class="image vh-fix" src="https://d33wubrfki0l68.cloudfront.net/68d48f8f44e29f21480c84064fa7d5b661f3aa0e/f2a92/imgs/wmmain_min2.jpg" alt="Picture of Email Marketing Campaign Case Study Landing Page Design"> 318 <div class="dtl"> 319 <h3>Case Study</h3> 320 <p>Created for WhooshMail, An email Marketing Campaign. Company goals involved Increasing first month retention and campaigns sent by 20% ..</p> 321 <a href='/whooshmail'>Read More</a> 322 </div> 323 </div> 324 </div> 325 </div> 326 </div> 327</div> 328 329 330 </div> 331 </section> 332</div> 333 <footer id="links_2"> 334 <p class="links-byline_2">Let's Chat! Contact me via email below</p> 335 <a class="btn_2"onclick='location.href="mailto:[email protected]
335om"' href="#">[email protected]</a> 336 </footer> 337 338
338<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
338 339
339<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js" type="text/javascript"></script>
339 340
340<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
340 341 342
342<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
342 343
343<script type="text/javascript">var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="https://i1155.photobucket.com/albums/p559/scrolltotop/arrow54.png" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:!1,shouldvisible:!1},scrollup:function(){this.cssfixedsupport||this.$control.css({opacity:0});var t=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);t="string"==typeof t&&1==jQuery("#"+t).length?jQuery("#"+t).offset().top:0,this.$body.animate({scrollTop:t},this.setting.scrollduration)},keepfixed:function(){var t=jQuery(window),o=t.scrollLeft()+t.width()-this.$control.width()-this.controlattrs.offsetx,s=t.scrollTop()+t.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:o+"px",top:s+"px"})},togglecontrol:function(){var t=jQuery(window).scrollTop();this.cssfixedsupport||this.keepfixed(),this.state.shouldvisible=t>=this.setting.startline?!0:!1,this.state.shouldvisible&&!this.state.isvisible?(this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]),this.state.isvisible=!0):0==this.state.shouldvisible&&this.state.isvisible&&(this.$control.stop().animate({opacity:0}
343,this.setting.fadeduration[1]),this.state.isvisible=!1)},init:function(){jQuery(document).ready(function(t){var o=scrolltotop,s=document.all;o.cssfixedsupport=!s||s&&"CSS1Compat"==document.compatMode&&window.XMLHttpRequest,o.$body=t(window.opera?"CSS1Compat"==document.compatMode?"html":"body":"html,body"),o.$control=t('<div id="topcontrol">'+o.controlHTML+"</div>").css({position:o.cssfixedsupport?"fixed":"absolute",bottom:o.controlattrs.offsety,right:o.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"Scroll to Top"}).click(function(){return o.scrollup(),!1}).appendTo("body"),document.all&&!window.XMLHttpRequest&&""!=o.$control.text()&&o.$control.css({width:o.$control.width()}),o.togglecontrol(),t('a[href="'+o.anchorkeyword+'"]').click(function(){return o.scrollup(),!1}),t(window).bind("scroll resize",function(t){o.togglecontrol()})})}};scrolltotop.init();</script>
343 344
344<script type="text/javascript" src="//use.typekit.net/rws3een.js"></script>
344 345
345<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
345 346
346<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
346 347
347<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
347 348
348<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
348 349
349<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
349 350
350<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/js/jquery.ripples.js"></script>
350 351
351<script> 352 353//Navigation Hamburger control 354const hamburger = document.querySelector(".hamburger"); 355const navLinks = document.querySelector(".nav-links"); 356const links = document.querySelectorAll(".nav-links li"); 357const contact = document.querySelector(".toggle"); 358 359hamburger.addEventListener("click", () => { 360 navLinks.classList.toggle("open"); 361 links.forEach(link => { 362 link.classList.toggle("fade"); 363 }); 364}); 365 366contact.addEventListener("click", () => { 367 navLinks.classList.remove("open"); 368 links.style.opacity = "1,!important"; 369}); 370 371// hamburger.addEventListener("touchend", () => { 372// navLinks.classList.toggle("open"); 373// links.forEach(link => { 374// link.classList.toggle("fade"); 375// }); 376// }); 377 378 379//Magnify heading text 380$(".landing_body_text").hover(function(){ 381 $(this).animate({fontSize: "32px"}, 300) 382 }, function() { 383 $(this).animate({fontSize: "20"}, 300) 384 }); 385 386//ripples 387 $(document).ready(function() { 388 try { 389 $('.top_img').ripples({ 390 resolution: 256, 391 perturbance: 0.04 392 }); 393 } 394 catch (e) { 395 $('.error').show().text(e); 396 } 397}); 398 399 400// You can change global variables here: 401var radius = 240; // how big of the radius 402var autoRotate = true; // auto rotate or not 403var rotateSpeed = -60; // unit: seconds/360 degrees 404var imgWidth = 120; // width of images (unit: px) 405var imgHeight = 170; // height of images (unit: px) 406 407// Link of background music - set 'null' if you dont want to play background music 408var bgMusicURL = 'https://api.soundcloud.com/tracks/143041228/stream?client_id=587aa2d384f7333a886010d5f52f302a'; 409var bgMusicControls = true; // Show UI music control 410 411/* 412 NOTE: 413 + imgWidth, imgHeight will work for video 414 + if imgWidth, imgHeight too small, play/pause button in <video> will be hidden 415 + Music link are taken from: https://hoangtran0410.github.io/Visualyze-design-your-own-/?theme=HauMaster&playlist=1&song=1&background=28 416 + Custom from code in tiktok video https://www.facebook.com/J2TEAM.ManhTuan/videos/1353367338135935/ 417*/ 418 419 420// ===================== start ======================= 421// animation start after 1000 miliseconds 422setTimeout(init, 1000); 423 424var odrag = document.getElementById('drag-container'); 425var ospin = document.getElementById('spin-container'); 426var aImg = ospin.getElementsByTagName('img'); 427var aVid = ospin.getElementsByTagName('video'); 428var aEle = [...aImg, ...aVid]; // combine 2 arrays 429 430// Size of images 431ospin.style.width = imgWidth + "px"; 432ospin.style.height = imgHeight + "px"; 433 434// Size of ground - depend on radius 435var ground = document.getElementById('ground'); 436ground.style.width = radius * 3 + "px"; 437ground.style.height = radius * 3 + "px"; 438 439function init(delayTime) { 440 for (var i = 0; i < aEle.length; i++) { 441 aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"; 442 aEle[i].style.transition = "transform 1s"; 443 aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s"; 444 } 445} 446 447function applyTranform(obj) { 448 // Constrain the angle of camera (between 0 and 180) 449 if(tY > 180) tY = 180; 450 if(tY < 0) tY = 0; 451 452 // Apply the angle 453 obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)"; 454} 455 456function playSpin(yes) { 457 ospin.style.animationPlayState = (yes?'running':'paused'); 458} 459 460var sX, sY, nX, nY, desX = 0, 461 desY = 0, 462 tX = 0, 463 tY = 10; 464 465// auto spin 466if (autoRotate) { 467 var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert'); 468 ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`; 469} 470 471// add background music 472// if (bgMusicURL) { 473// document.getElementById('music-container').innerHTML += ` 474// <audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop> 475// <p>If you are reading this, it is because your browser does not support the audio element.</p> 476// </audio> 477// `; 478// } 479 480// setup events 481document.onpointerdown = function (e) { 482 clearInterval(odrag.timer); 483 e = e || window.event; 484 var sX = e.clientX, 485 sY = e.clientY; 486 487 this.onpointermove = function (e) { 488 e = e || window.event; 489 var nX = e.clientX, 490 nY = e.clientY; 491 desX = nX - sX; 492 desY = nY - sY; 493 tX += desX * 0.1; 494 tY += desY * 0.1; 495 applyTranform(odrag); 496 sX = nX; 497 sY = nY; 498 }; 499 500 this.onpointerup = function (e) { 501 odrag.timer = setInterval(function () { 502 desX *= 0.95; 503 desY *= 0.95; 504 tX += desX * 0.1; 505 tY += desY * 0.1; 506 applyTranform(odrag); 507 playSpin(false); 508 if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { 509 clearInterval(odrag.timer); 510 playSpin(true); 511 } 512 }, 17); 513 this.onpointermove = this.onpointerup = null; 514 }; 515 516 return false; 517}; 518 519document.onmousewheel = function(e) { 520 e = e || window.event; 521 var d = e.wheelDelta / 20 || -e.detail; 522 radius += d; 523 init(1); 524}; 525 526 527//Scroll to next sections 528// $(document).on("click", "#about", function () { 529// window.scrollTo({ 530// top: 100, 531// left: 100, 532// behavior: 'smooth' 533// }); 534// }); 535 536// Hover shadows for nav links 537$(document).ready(function(){ 538 $(".active").on({ 539 540 click: function(){ 541 $(this).css("textShadow",'rgb(239,79,72) 7px -1px 2px'); 542 $(this).css("font-size", "50px"); 543 } 544 });
545 }); 546 547 548</script>
548 549</body> 550</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.