direction aware pointer - Free Download Direction-aware Pointer For Call To Action Button

Free Download Direction-aware Pointer For Call To Action Button

By Posted on

This time I will share jQuery Plugin and tutorial about Direction-aware Pointer For Call To Action Button, hope it will help you in programming stack.

direction aware pointer - Free Download Direction-aware Pointer For Call To Action Button
File Size: 6.96 KB
Views Total: 380
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A jQuery/CSS/SVG based direction-aware pointer that makes the custom cursor always be facing a call to action button no matter how you move the mouse on the page.

Great for promoting your users to take some specified actions on your web application.

How to use it:

1. Create a call to action button on the page.

view source
1 <a href="" class="btn">Call to action</a>

2. Include the necessary jQuery JavaScript library on the page.

view source
1 <script src="/path/to/jquery.min.js"></script>

3. Create a SVG based custom cursor.

view source
01 let container = $('body'),
02 element = $('.btn');
03  
04 let pointerHTML = <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
05  viewBox="0 0 485.632 485.632" style="enable-background:new 0 0 485.632 485.632;" xml:space="preserve">
06     <g>
07     <g>
08       <g>
09         <path style="fill:#010002;" d="M242.816,0C148.699,0,72.396,76.303,72.396,170.419c0,7.205,0.578,14.227,1.459,21.188
10           C88.417,324.727,231.75,478.153,231.75,478.153c2.554,2.858,5.016,4.621,7.387,5.897l0.122,0.061l4.773,1.52l4.773-1.52
11           l0.122-0.061c2.371-1.277,4.834-3.131,7.387-5.897c0,0,141.266-153.7,155.493-286.849c0.851-6.87,1.429-13.832,1.429-20.915
12           C413.205,76.303,336.933,0,242.816,0z M242.816,280.04c-60.434,0-109.62-49.186-109.62-109.62s49.186-109.62,109.62-109.62
13           s109.59,49.186,109.59,109.62S303.25,280.04,242.816,280.04z"/>
14       </g>
15     </g>
16     <g>
17     </g>
18     <g>
19     </g>
20     <g>
21     </g>
22     <g>
23     </g>
24     <g>
25     </g>
26     <g>
27     </g>
28     <g>
29     </g>
30     <g>
31     </g>
32     <g>
33     </g>
34     <g>
35     </g>
36     <g>
37     </g>
38     <g>
39     </g>
40     <g>
41     </g>
42     <g>
43     </g>
44     <g>
45     </g>
46     </g>
47     <g>
48     </g>
49     <g>
50     </g>
51     <g>
52     </g>
53     <g>
54     </g>
55     <g>
56     </g>
57     <g>
58     </g>
59     <g>
60     </g>
61     <g>
62     </g>
63     <g>
64     </g>
65     <g>
66     </g>
67     <g>
68     </g>
69     <g>
70     </g>
71     <g>
72     </g>
73     <g>
74     </g>
75     <g>
76     </g>
77 </svg>;
78  
79 let cursorHTML = '<svg version="1.1" id="Layer_1" http://www.w3.org/2000/svg">http://www.w3.org/2000/svg" viewBox="0 0 28 28"><polygon fill="#FFFFFF" points="8.2,20.9 8.2,4.9 19.8,16.5 13,16.5 12.6,16.6 "/><polygon fill="#FFFFFF" points="17.3,21.6 13.7,23.1 9,12 12.7,10.5 "/><rect x="12.5" y="13.6" transform="matrix(0.9221 -0.3871 0.3871 0.9221 -5.7605 6.5909)" width="2" height="8"/><polygon points="9.2,7.3 9.2,18.5 12.2,15.6 12.6,15.5 17.4,15.5 "/></svg>';
80  
81 let cursor = $('<div />').addClass('cursor').html(pointerHTML).appendTo(container);

4. The required CSS styles for the cursor.

view source
01 .cursor {
02   --r: 0deg;
03   position: fixed;
04   left: -10px;
05   top: -10px;
06   pointer-events: none;
07   -webkit-user-select: none;
08      -moz-user-select: none;
09       -ms-user-select: none;
10           user-select: none;
11   display: none;
12   -webkit-transform: translate(var(--x), var(--y));
13           transform: translate(var(--x), var(--y));
14   -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
15           filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
16 }
17  
18 .cursor svg {
19   display: block;
20   width: 50px;
21   height: 50px;
22   -webkit-transform: rotate(var(--r));
23           

Share this:

Related posts: