Jump to content
Please Use CODE Tags

How would one achieve this?

Zach's Tech Tips
By Zach's Tech Tips
in Programming
 Share
Posted

Hey linus community i am wondering if any of you know how to make something follow your mouse cursor on your own website, kinda like something that is featured in the void

 

i need it to work in dreamweaver

 

Could you post a code of this plz 

 

 

Thanks

 

Zach

Its when dragons have so much sex that the cpu cant handle it

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Hey linus community i am wondering if any of you know how to make something follow your mouse cursor on your own website, kinda like something that is featured in http://thevoid.com/

 

Could you post a code of this plz 

 

 

Thanks

 

Zach

Bad link. Remove the last "/" please.

FX-8350 | GA-990FXA-UD3 | G.SKILL 2x8GB 1600MHz | 1TB WD RE4 | CM Hyper 212 EVO | MSI R9 290x Lightning | Corsair AX860i | Silverstone FT05B-W

Pentium G3258 | MSI Z97 PC Mate | G.SKILL 4x4GB 1066MHz | 500GB Samsung 2.5" | Stock cooler | Pending GPU | EVGA 500B | Antec DF-35

GoPro Hero 3 Silver | Netgear R7000 Nighthawk with DD-WRT | HP Officejet Pro 8610 | Canon iP110 | AudioTechnica ATR2500 USB

Downdraft cooler for mITX board (new build) | Desk mount mic stand | Pop filter | Anti-vibration mount for microphone | mITX case | 3rd monitor (matching existing 23.1" | Intel Core i7-4790K (for mITX build)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I gave you the link to the tutorial in your how to extract this gif post. Also dreamweaver is just an editor, if your code is valid it works, dreamweaver has nothing to do with that.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I have seen many websites before that has this thing, but on the site you have shared-I think that the animation is not following the cursor, but they are hidden all over the page and a javascript/jquery code is checking the mouse location and based on that the animation is made visible.

Desktop:

CPU : i5 4440 | Motherboard : Gigabyte B85M-D3H | RAM : Kingstone HyperX blu 4GB x2 | GPU : Asus R9 280X DC II Top [RIP 2017] | PSU : Corsair VS 550W | Display(s) : Dell S2240L | Mouse : Logitech G400s | Operating System : Windows 7 64bit

 

Laptop:

Acer Predator Helios 300 (CPU: Intel Core i5 7300HQ | GPU: GTX 1050ti | RAM: 16GB RAM | Operating System: Windows 10 64bit)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

I have seen many websites before that has this thing, but on the site you have shared-I think that the animation is not following the cursor, but they are hidden all over the page and a javascript/jquery code is checking the mouse location and based on that the animation is made visible.

is that prettyhard to code?

Its when dragons have so much sex that the cpu cant handle it

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

is that prettyhard to code?

 

It's not beginner level. I don't even have an idea about the animation but I would imagine that it is not trivial to do something like that.

Audio Reference • Cutting the Crap • 7.1 Headphones? • Audio Interference Troubleshooting Guide
REVIEWS • HiFiMan HE-560 • Beyerdynamic T1 2. Generation • Schiit Bifrost 4490 • Schiit Valhalla 2
RECOMMENDATIONS • The Audio Board's Recommended Gear

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

The funny thing is that it is just made to look fancy.

 

They are using Wordpress as a CMS and then editing it from there.

 

The actual background of the site is just a youtube video:

 

 

The overlay looks like a modified version of this: http://codepen.io/koca/pen/eNJVKQ (Try changing the Value and the colors in the JS)

 

IMO this one is cooler...

http://codepen.io/technovore/pen/aOdGjY

 

-------

 

Here is a bunch of similar libraries to those used on the site: http://codepen.io/

 

-------

 

The majority of client sided tasks online can be found easily, if you are curious in the future the only thing I used was View Source and Ctrl + F. Once opened it was a straight forward path to how it was done.

 

Hope this helps.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

is that prettyhard to code?

i dont think so, you can easily get the location of mouse location like this - http://api.jquery.com/event.pagex/

difficulty will be regarding placing the gifs and detecting when the mouse gets on it.

 

Other way without mouse move thing will be to make a table with cell for each of that gif.

Then add an mouse over event to each table cell to show the gif inside that particular cell

Desktop:

CPU : i5 4440 | Motherboard : Gigabyte B85M-D3H | RAM : Kingstone HyperX blu 4GB x2 | GPU : Asus R9 280X DC II Top [RIP 2017] | PSU : Corsair VS 550W | Display(s) : Dell S2240L | Mouse : Logitech G400s | Operating System : Windows 7 64bit

 

Laptop:

Acer Predator Helios 300 (CPU: Intel Core i5 7300HQ | GPU: GTX 1050ti | RAM: 16GB RAM | Operating System: Windows 10 64bit)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

i dont think so, you can easily get the location of mouse location like this - http://api.jquery.com/event.pagex/

difficulty will be regarding placing the gifs and detecting when the mouse gets on it.

 

Other way without mouse move thing will be to make a table with cell for each of that gif.

Then add an mouse over event to each table cell to show the gif inside that particular cell

 

You obviously completely missed my post above  :P

 

It's just made to look fancy, in all reality it is just an existing library with at most 10 lines of modification...

 

Cool design but not very complex.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You obviously completely missed my post above  :P

 

It's just made to look fancy, in all reality it is just an existing library with at most 10 lines of modification...

 

Cool design but not very complex.

Sorry if i misunderstood your requirement.

 

Check this- https://jsfiddle.net/anikkket/xy3o6mo6/

Select jquery 2.1.3 in framework & extensions (1st dropdown)

& no wrap - in <head> (2nd dropdown)

then run it and hover in the generated table cells

 

I just created it as illustration

hope that helps

Desktop:

CPU : i5 4440 | Motherboard : Gigabyte B85M-D3H | RAM : Kingstone HyperX blu 4GB x2 | GPU : Asus R9 280X DC II Top [RIP 2017] | PSU : Corsair VS 550W | Display(s) : Dell S2240L | Mouse : Logitech G400s | Operating System : Windows 7 64bit

 

Laptop:

Acer Predator Helios 300 (CPU: Intel Core i5 7300HQ | GPU: GTX 1050ti | RAM: 16GB RAM | Operating System: Windows 10 64bit)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Sorry if i misunderstood your requirement.

 

Check this- https://jsfiddle.net/anikkket/xy3o6mo6/

Select jquery 2.1.3 in framework & extensions (1st dropdown)

& no wrap - in <head> (2nd dropdown)

then run it and hover in the generated table cells

 

I just created it as illustration

hope that helps

it does not work

Its when dragons have so much sex that the cpu cant handle it

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

it does not work

did you follow this? 

Select jquery 2.1.3 in framework & extensions (1st dropdown)

& no wrap - in <head> (2nd dropdown)

then run it and hover in the generated table cells

Desktop:

CPU : i5 4440 | Motherboard : Gigabyte B85M-D3H | RAM : Kingstone HyperX blu 4GB x2 | GPU : Asus R9 280X DC II Top [RIP 2017] | PSU : Corsair VS 550W | Display(s) : Dell S2240L | Mouse : Logitech G400s | Operating System : Windows 7 64bit

 

Laptop:

Acer Predator Helios 300 (CPU: Intel Core i5 7300HQ | GPU: GTX 1050ti | RAM: 16GB RAM | Operating System: Windows 10 64bit)

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×