A Pen by Lucas Motta

Developer
Lucas Motta
Size
4,076 Kb
Views
24,288
  1. A Pen by Lucas Motta Previews
  2. A Pen by Lucas Motta HTML Codes
  3. A Pen by Lucas Motta CSS Codes
  4. A Pen by Lucas Motta JS Codes

How do I make an a pen by lucas motta?

What is a a pen by lucas motta? How do you make a a pen by lucas motta? This script and codes were developed by Lucas Motta on 22 September 2022, Thursday.

A Pen by Lucas Motta Previews
IQ Test

A Pen by Lucas Motta - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Lucas Motta</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script type="text/javascript" src="//use.typekit.net/kei2cfp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { font-family: "europa-1","europa-2", sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; width: 100%; height: 100%; min-height: 100%; padding: 0; margin: 0; overflow: hidden;
}
/** * Content */
.container { width: 100%; height: 100%; overflow: hidden; position: relative;
}
.list { width: 100%; height: 10000%; position: absolute; transition: top .5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.list li { background: linear-gradient(45deg, #B4DCC0, #FAB8A3); width: 100%; height: 1%; display: block;
}
.list li p { color: #FFF; font-size: 48px; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, .2); padding: 20px 0 0 0;
}
/** * Scroll */
.scroll { position: absolute; top: 0; right: 0; width: 5px; height: 100%;
}
.scroll__track { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .2);
}
.scroll__scrub { position: absolute; width: 30px; height: 30px; border-radius: 15px; background: #FFF; top: 0; right: 15px; cursor: pointer; text-align: center; transition: all .25s cubic-bezier(0.175, 0.885, 0.320, 1.275); transform-origin: 100% 50%;
}
.scroll__scrub span { text-align: center; display: block; top: 50%; margin-top: -6px; position: relative; font-size: 12px; color: #E98187;
}
.scroll__scrub:hover,
.scroll__scrub:active { width: 50px; height: 50px; border-radius: 25px; margin-top: -10px;
}
.scroll__scrub:after {	left: 100%;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;
}
.scroll__scrub:after {	border-color: rgba(255, 255, 255, 0);	border-left-color: #FFF;	border-width: 10px;	top: 50%;	margin-top: -10px; margin-left: -4px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <ul class="list"> <li> <p>Recipe 1</p> </li> <li> <p>Recipe 2</p> </li> <li> <p>Recipe 3</p> </li> <li> <p>Recipe 4</p> </li> <li> <p>Recipe 5</p> </li> <li> <p>Recipe 6</p> </li> <li> <p>Recipe 7</p> </li> <li> <p>Recipe 8</p> </li> <li> <p>Recipe 9</p> </li> <li> <p>Recipe 10</p> </li> <li> <p>Recipe 11</p> </li> <li> <p>Recipe 12</p> </li> <li> <p>Recipe 13</p> </li> <li> <p>Recipe 14</p> </li> <li> <p>Recipe 15</p> </li> <li> <p>Recipe 16</p> </li> <li> <p>Recipe 17</p> </li> <li> <p>Recipe 18</p> </li> <li> <p>Recipe 19</p> </li> <li> <p>Recipe 20</p> </li> <li> <p>Recipe 21</p> </li> <li> <p>Recipe 22</p> </li> <li> <p>Recipe 23</p> </li> <li> <p>Recipe 24</p> </li> <li> <p>Recipe 25</p> </li> <li> <p>Recipe 26</p> </li> <li> <p>Recipe 27</p> </li> <li> <p>Recipe 28</p> </li> <li> <p>Recipe 29</p> </li> <li> <p>Recipe 30</p> </li> <li> <p>Recipe 31</p> </li> <li> <p>Recipe 32</p> </li> <li> <p>Recipe 33</p> </li> <li> <p>Recipe 34</p> </li> <li> <p>Recipe 35</p> </li> <li> <p>Recipe 36</p> </li> <li> <p>Recipe 37</p> </li> <li> <p>Recipe 38</p> </li> <li> <p>Recipe 39</p> </li> <li> <p>Recipe 40</p> </li> <li> <p>Recipe 41</p> </li> <li> <p>Recipe 42</p> </li> <li> <p>Recipe 43</p> </li> <li> <p>Recipe 44</p> </li> <li> <p>Recipe 45</p> </li> <li> <p>Recipe 46</p> </li> <li> <p>Recipe 47</p> </li> <li> <p>Recipe 48</p> </li> <li> <p>Recipe 49</p> </li> <li> <p>Recipe 50</p> </li> <li> <p>Recipe 51</p> </li> <li> <p>Recipe 52</p> </li> <li> <p>Recipe 53</p> </li> <li> <p>Recipe 54</p> </li> <li> <p>Recipe 55</p> </li> <li> <p>Recipe 56</p> </li> <li> <p>Recipe 57</p> </li> <li> <p>Recipe 58</p> </li> <li> <p>Recipe 59</p> </li> <li> <p>Recipe 60</p> </li> <li> <p>Recipe 61</p> </li> <li> <p>Recipe 62</p> </li> <li> <p>Recipe 63</p> </li> <li> <p>Recipe 64</p> </li> <li> <p>Recipe 65</p> </li> <li> <p>Recipe 66</p> </li> <li> <p>Recipe 67</p> </li> <li> <p>Recipe 68</p> </li> <li> <p>Recipe 69</p> </li> <li> <p>Recipe 70</p> </li> <li> <p>Recipe 71</p> </li> <li> <p>Recipe 72</p> </li> <li> <p>Recipe 73</p> </li> <li> <p>Recipe 74</p> </li> <li> <p>Recipe 75</p> </li> <li> <p>Recipe 76</p> </li> <li> <p>Recipe 77</p> </li> <li> <p>Recipe 78</p> </li> <li> <p>Recipe 79</p> </li> <li> <p>Recipe 80</p> </li> <li> <p>Recipe 81</p> </li> <li> <p>Recipe 82</p> </li> <li> <p>Recipe 83</p> </li> <li> <p>Recipe 84</p> </li> <li> <p>Recipe 85</p> </li> <li> <p>Recipe 86</p> </li> <li> <p>Recipe 87</p> </li> <li> <p>Recipe 88</p> </li> <li> <p>Recipe 89</p> </li> <li> <p>Recipe 90</p> </li> <li> <p>Recipe 91</p> </li> <li> <p>Recipe 92</p> </li> <li> <p>Recipe 93</p> </li> <li> <p>Recipe 94</p> </li> <li> <p>Recipe 95</p> </li> <li> <p>Recipe 96</p> </li> <li> <p>Recipe 97</p> </li> <li> <p>Recipe 98</p> </li> <li> <p>Recipe 99</p> </li> <li> <p>Recipe 100</p> </li> </ul>
</div>
<div class="scroll"> <div class="scroll__track"></div> <div class="scroll__scrub"><span>1</span></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Lucas Motta - Script Codes CSS Codes

body, html { font-family: "europa-1","europa-2", sans-serif; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; width: 100%; height: 100%; min-height: 100%; padding: 0; margin: 0; overflow: hidden;
}
/** * Content */
.container { width: 100%; height: 100%; overflow: hidden; position: relative;
}
.list { width: 100%; height: 10000%; position: absolute; transition: top .5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.list li { background: linear-gradient(45deg, #B4DCC0, #FAB8A3); width: 100%; height: 1%; display: block;
}
.list li p { color: #FFF; font-size: 48px; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, .2); padding: 20px 0 0 0;
}
/** * Scroll */
.scroll { position: absolute; top: 0; right: 0; width: 5px; height: 100%;
}
.scroll__track { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .2);
}
.scroll__scrub { position: absolute; width: 30px; height: 30px; border-radius: 15px; background: #FFF; top: 0; right: 15px; cursor: pointer; text-align: center; transition: all .25s cubic-bezier(0.175, 0.885, 0.320, 1.275); transform-origin: 100% 50%;
}
.scroll__scrub span { text-align: center; display: block; top: 50%; margin-top: -6px; position: relative; font-size: 12px; color: #E98187;
}
.scroll__scrub:hover,
.scroll__scrub:active { width: 50px; height: 50px; border-radius: 25px; margin-top: -10px;
}
.scroll__scrub:after {	left: 100%;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;
}
.scroll__scrub:after {	border-color: rgba(255, 255, 255, 0);	border-left-color: #FFF;	border-width: 10px;	top: 50%;	margin-top: -10px; margin-left: -4px;
}

A Pen by Lucas Motta - Script Codes JS Codes

var _list = $(".list");
var _scrub = $(".scroll__scrub");
var _numItems = $(".list").children().length;
var _window = $(window);
var _body = $("body");
_scrub.on("mousedown", function(e) { e.preventDefault(); var clickedPos = parseFloat($(this).css("top")) - e.pageY; var maxHeight = _window.height() - 30; var prevPos = e.pageY; _window.on("mouseup", function() { _window.off("mouseup mousemove"); _body.off("mouseleave"); rotate(_scrub, 0); }); _body.on("mouseleave", function() { _window.off("mouseup mousemove"); _body.off("mouseleave"); rotate(_scrub, 0); }); _window.on("mousemove", function(e) { var pos = Math.max(0, Math.min(maxHeight, e.pageY + clickedPos)); var pct = pos / maxHeight; var rot = prevPos - pos; _scrub.css("top", pos); rotate(_scrub, rot); prevPos = pos; changePage(Math.round(pct * (_numItems - 1))); });
});
_window.on("mousewheel", function(e) { e.preventDefault(); var maxHeight = _window.height() - 30; var delta = e.originalEvent.wheelDeltaY; delta = Math.max(-8, Math.min(8, delta)); var pos = parseFloat(_scrub.css("top")) - delta; pos = Math.max(0, Math.min(maxHeight, pos)); var pct = pos / maxHeight; _scrub.css("top", pos); changePage(Math.round(pct * (_numItems - 1)));
});
function changePage(id) { _list.css("top", -id * 100 + "%"); _scrub.find("span").empty().append(id + 1);
}
function rotate(object, degrees) { object.css({ '-webkit-transform' : 'rotateZ('+degrees+'deg)', '-moz-transform' : 'rotateZ('+degrees+'deg)', '-ms-transform' : 'rotateZ('+degrees+'deg)', '-o-transform' : 'rotateZ('+degrees+'deg)', 'transform' : 'rotateZ('+degrees+'deg)', });
}
A Pen by Lucas Motta - Script Codes
A Pen by Lucas Motta - Script Codes
Home Page Home
Developer Lucas Motta
Username lucasmotta
Uploaded September 22, 2022
Rating 3
Size 4,076 Kb
Views 24,288
Do you need developer help for A Pen by Lucas Motta?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lucas Motta (lucasmotta) Script Codes
Name
CSS Grid Example
Medium Menu
3D Kitty Grid
Follow the kitty
CSS Triangles with shadow
Responsive Infinite Carousel
Flying Particles
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!