image

A perfect fit for stylish sites

Lots of websites these days use interesting cursor effects to further enhance user interest and to complement the modern look and feel that they are striving to achieve. All of this is now available to you in your RapidWeaver / Stacks projects!

The cursor

There are 6 main states that you assign to the cursor based on different elements on the page. The options are endless though as you can add multiple variations of these on a single page.

Default

The default setup is the one that you see on all general areas of this page. In addition you can set the default mouse cursor to be hidden (which we have done on this page)

On buttons and links (or any other element that you wish) the cursor enters 'pointer' mode and can be styled in a particular way. Here we make the cursor bigger and largely transparent.

Hover over this link to see this in action.

Text

You can set the cursor to contain text over certain elements.

Hover over this box to see this in action.

Icon

You can set the cursor to contain an icon over certain elements.

Hover over this box to see this in action.

Image

You can set the cursor to contain an image over certain elements. The media can additionally be set to pick up any effects and styles (more information below).

Hover over this box to see this in action.

New

Video

You can set the cursor to contain a video over certain elements. The media can additionally be set to pick up any effects and styles (more information below).

Hover over this box to see this in action.

New

Icon set

Magic Mouse 2 comes with its own set of icons that can be used as cursor content.

Effects and styles

Each style has some default settings (that can be adapted). In addition to that though there are numerous in-built effects and styles that can be added.

Long story short: you have total control!

Inverse

A quick style that can be applied is to invert the cursor colours. Which is useful when the default wouldn't stand out enough.

Size and colour

You have full control over the size and colour of the cursor too at all times. In this box we have set for it to be big, purple and with 50% opacity!

Blend modes

A nice effect can be acheived by setting the cursor to use a blend mode like 'Exclusion' (used here). It can have a dramatic effect when the cursor moves over text or images.

Mouse cursor

We have opted to hide the default mouse cursor on this page but you can choose to show or hide it wherever you like. We show it if the mouse is in this box.

Hover over these boxes to see the different effects

Use cases

Magic Mouse really comes into its own when used in conjuction with areas of interaction on a web page - i.e. to view blog posts, to launch a pop-up to, to zoom in on an image, to drag a slider etc. All of these interactions can be made clear to the user by adapting the cursor and/or by adding relevant content to the cursor.

Check out the examples below

image

Image gallery

If an image gallery is displayed then often the user will be able to click on images to show them in full screen. Showing a relevant icon or text in the cursor can really transform this interaction. Hover the cursor over all of the galleries in this example (using InStack's Iconic gallery).

Source blog

Getting the visitor to view a blog post or an article can be improved by generating a cursor with a useful prompt. This example is the Source blog (and note that on this page we only use Magic Mouse in that single way. Other than linking to each post it is not visible on the page at all.).

image

Slider

Magic Mouse can offer a really nice way to navigate through slides - i.e. with icons or text in the cursor (e.g. Next/Previous slide) or to encourage the user to 'drag' the slider content etc.

You can see another live example in the FAQ section at the bottom of this page!


Get Index.php

You can get this stack on its own or as part of our hugely discounted stacks bundle.

Our stacks bundle includes Index.php and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:

  • Grid Enabler
  • Magic Mouse
  • Magic Mouse 2
  • Markdown Link
  • Parallaxer
  • Scroller Plus
  • Source Addons
  • Splider 2


Over 60% off!

image

Stacks bundle

Get ALL of our stacks in one incredible bundle deal!

March Special

Get an additional 20% off our Stack bundle!! Add discount code: STH_Mar24 during checkout!

FAQs

Below are some of the most common questions about this and our other stacks.

Stack FAQs

There are no specific FAQs for this stack at this time. See our general FAQs below. If you have a particular question about this stack then please get in touch.


General FAQs

Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.

All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.

We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.

The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.

Source Icon

Built with Source