File tree Expand file tree Collapse file tree 8 files changed +195
-0
lines changed Expand file tree Collapse file tree 8 files changed +195
-0
lines changed Original file line number Diff line number Diff line change
1
+ const slider = document . querySelector ( ".container" ) ;
2
+ let isDown = false ;
3
+ let startX ;
4
+ let scrollLeft ;
5
+
6
+ for ( let i = 1 ; i <= 31 ; i ++ ) {
7
+ let div = document . createElement ( "div" ) ;
8
+ div . classList . add ( "slide" ) ;
9
+ div . innerHTML = `
10
+ <img src="/SwipperJs/images/1 (${ i } ).jpg" />
11
+ ` ;
12
+ slider . appendChild ( div ) ;
13
+ }
14
+ document . querySelector ( "body" ) . addEventListener ( "mousedown" , ( e ) => {
15
+ e . preventDefault ( ) ;
16
+ } ) ;
17
+
18
+ slider . addEventListener ( "mousedown" , ( e ) => {
19
+ e . preventDefault ( ) ;
20
+
21
+ isDown = true ;
22
+ startX = e . pageX - slider . offsetLeft ;
23
+ scrollLeft = slider . scrollLeft ;
24
+ slider . style . cursor = "grabbing" ;
25
+ slider . addEventListener ( "mousemove" , ( e ) => {
26
+ if ( ! isDown ) return ; // stop the fn from running
27
+ e . preventDefault ( ) ;
28
+ const x = e . pageX - slider . offsetLeft ;
29
+ const walk = x - startX ;
30
+ slider . scrollLeft = scrollLeft - walk / 2 ;
31
+ } ) ;
32
+ } ) ;
33
+ slider . addEventListener ( "mouseup" , ( e ) => {
34
+ e . preventDefault ( ) ;
35
+ slider . style . cursor = "pointer" ;
36
+ isDown = false ;
37
+ } ) ;
38
+
39
+ document . querySelector ( ".slide" ) . addEventListener ( "click" , ( e ) => {
40
+ e . preventDefault ( ) ;
41
+ } ) ;
Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 " />
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6
+ < title > Click And Drag</ title >
7
+ < link rel ="stylesheet " href ="style.css " />
8
+ </ head >
9
+ < body >
10
+ < div class ="container ">
11
+
12
+ </ div >
13
+ < script src ="app.js "> </ script >
14
+ </ body >
15
+ </ html >
16
+
Original file line number Diff line number Diff line change
1
+ * {
2
+ margin : 0 ;
3
+ padding : 0 ;
4
+ box-sizing : border-box;
5
+ }
6
+ body {
7
+ height : 100vh ;
8
+ display : flex;
9
+ justify-content : center;
10
+ align-items : center;
11
+ }
12
+ .container {
13
+ width : 98% ;
14
+ height : 80% ;
15
+ display : flex;
16
+ flex-wrap : wrap;
17
+ overflow-y : scroll;
18
+ flex-direction : column;
19
+ justify-content : center;
20
+ align-items : center;
21
+ gap : 3% ;
22
+ border : 2px solid black;
23
+ transition : 0.3s ;
24
+ cursor : pointer;
25
+ }
26
+ /* .container:nth-child(1) {
27
+ padding-left: 30%;
28
+ } */
29
+
30
+ .slide {
31
+ height : 50% ;
32
+ width : 25vmin ;
33
+ transition : 0.3s ;
34
+ }
35
+ .slide img {
36
+ height : 100% ;
37
+ width : 100% ;
38
+ }
39
+ .slide : hover {
40
+ transform : scale (1.2 );
41
+ }
Original file line number Diff line number Diff line change
1
+ console . log ( "hello" ) ;
2
+ let btn = document . querySelectorAll ( ".btn" ) ;
3
+ btn . forEach ( ( el ) => {
4
+ el . addEventListener ( "mousemove" , ( e ) => {
5
+ let rect = el . getBoundingClientRect ( ) ;
6
+
7
+ let x = e . clientX - ( rect . left + rect . width / 2 ) ;
8
+ let y = e . clientY - ( rect . top + rect . height / 2 ) ;
9
+ console . log ( x , y ) ;
10
+ if ( Math . abs ( x ) < 90 && Math . abs ( y ) < 50 ) {
11
+ el . style . transform = `translate(${ x } px, ${ y } px)` ;
12
+ } else {
13
+ el . style . transform = `translate(0,0)` ;
14
+ }
15
+ } ) ;
16
+ el . addEventListener ( "mouseleave" , ( ) => {
17
+ el . style . transform = `translate(0,0)` ;
18
+ } ) ;
19
+ } ) ;
Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 " />
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6
+ < title > Magnetic Button</ title >
7
+ < link rel ="stylesheet " href ="style.css " />
8
+ < link rel ="shortcut icon " href ="/time-management.ico " type ="image/x-icon " />
9
+ </ head >
10
+ < body >
11
+ < section >
12
+ < button class ="btn btn1 "> Hover</ button >
13
+ </ section >
14
+ < section class ="second ">
15
+ < button class =" btn btn2 "> Hover</ button >
16
+ </ section >
17
+ < script src ="app.js "> </ script >
18
+ </ body >
19
+ </ html >
Original file line number Diff line number Diff line change
1
+ * {
2
+ margin : 0 ;
3
+ padding : 0 ;
4
+ box-sizing : border-box;
5
+ }
6
+ body {
7
+ height : 100vh ;
8
+ width : 100vw ;
9
+ background-color : # 291f1e ;
10
+ display : flex;
11
+ justify-content : center;
12
+ align-items : center;
13
+ flex-direction : column;
14
+ gap : 10px ;
15
+ }
16
+ section {
17
+ height : 20vmin ;
18
+ width : 40vmin ;
19
+ display : flex;
20
+ justify-content : center;
21
+ align-items : center;
22
+ }
23
+ .btn {
24
+ background-color : # 5aa9e6 ;
25
+ height : 7vmin ;
26
+ width : 15vmin ;
27
+ border : none;
28
+ border-radius : 30px ;
29
+ color : # 000 ;
30
+ cursor : pointer;
31
+ transition : 0.1s ;
32
+ position : absolute;
33
+ }
34
+ .btn1 {
35
+ background : linear-gradient (90deg , blue 50% , # fc0fc0 );
36
+ color : white;
37
+ }
38
+ .btn : hover {
39
+ font-size : 1.2vw ;
40
+ }
Original file line number Diff line number Diff line change 58
58
<td><a href="SwipperJs">Image Crousel using Swipper.js</a></td>
59
59
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/SwipperJs/">Link</a></td>
60
60
</tr>
61
+ <tr>
62
+ <td>10</td>
63
+ <td><a href="SwipperJs">Magnetic Button</a></td>
64
+ <td><a href="https://glistening-cajeta-a6b4ef.netlify.app/MagneticButton/">Link</a></td>
65
+ </tr>
61
66
</tbody>
62
67
</table>
Original file line number Diff line number Diff line change 83
83
< a href ="/SwipperJs/ " target ="_blank "> Link</ a >
84
84
</ td >
85
85
</ tr >
86
+ < tr >
87
+ < td > 9</ td >
88
+ < td > Image Crousel using Swipper.js</ td >
89
+ < td >
90
+ < a href ="/SwipperJs/ " target ="_blank "> Link</ a >
91
+ </ td >
92
+ </ tr >
93
+ < tr >
94
+ < td > 10</ td >
95
+ < td > Magnetic Button</ td >
96
+ < td >
97
+ < a href ="/MagneticButton/index.html " target ="_blank "> Link</ a >
98
+ </ td >
99
+ </ tr >
86
100
</ tbody >
87
101
</ table >
88
102
</ body >
You can’t perform that action at this time.
0 commit comments