Tagged in
Icon

Outdoor adventurous activities are typically undertaken for the purposes of recreation or excitement: examples are adventure racing and adventure tourism.

The term also broadly refers to any enterprise that is potentially fraught with physical, financial or psychological risk, such as a business venture, or other major life undertakings. Adventurous experiences create psychological arousal, which can be interpreted as negative (e.g. fear) or positive (e.g. flow).

“Life is an adventure in forgiveness.”

An adventure is an exciting or unusual experience. It may also be a bold, usually risky undertaking, with an uncertain outcome. Adventures may be activities with some potential for physical danger such as exploring, skydiving, mountain climbing, river rafting or participating in extreme sports.

day one.
When was the last time you said yes to Adventure?
Written by James Norris on February 27, 2015.
Slider

Layer Events

Creating something spectacular and catching the visitors attention is a valid goal for each website owner. In most cases, these eye-candies are not really interactive. They usually happen when there is no user interaction at all, therefore the user just sits there when things happen in their browser. But that doesn’t mean those effects are bad.

Adventure Block

Description: Animation offers the opportunity to surprise, making websites more enjoyable and engaging.

Tags: , , ,

However, some people want more than that. They want their users to reach contents on their own, probably to monitor these events, to get feedback on what parts of their site were “worth making” and what parts are just “taking valuable space” and could be replaced with a better content. For example, you can place a beautifully designed banner to the left side of your site, while your menu and other important parts are on the right, the users probably won’t even notice the other content, let alone interact with it.

You might want to have a clean, simple slider but you want it to have more textual content. Let’s say, you have a slider that shows a simple image when the user doesn’t interact with it. But once their mouse reaches the slider (so you get their attention) additional information pops up for them to read.

The events are tightly bounded with the Layer animations, as in reality, the layer animations can be triggered via the events. If you check the second slide of our Company demo, and hover over each person, you’ll see their names, their position and contact info appearing, and all of them uses the set layer animation for that specific layer.

Default events

Smart Slider 3 offers a variety of very useful default events to handle situations when the user’s mouse enters or leaves the slider, the slide or event the layer itself, when the slider, slide or layer was clicked.

Default events in Smart Slider 3
Default events in Smart Slider 3

These events are perfect for creating simple events that are triggered when the user interacts with the slider or the slide. For example, you can show layers when the user hovers over the slide, and hide them again when their mouse leaves the area of the slide.

Slide mouse enter and Slide mouse leave events in action
Slide mouse enter and Slide mouse leave events in action

Custom events

While the default events are awesome, they can’t really cover all use cases. For example, if you would like to tell your story only when the user clicks on a button or on an image, like the sample slider at the top of this page. In reality, you aren’t limited to use only our default events but you can create you own – better yet, you can create as many of them as you would like to. Any specific layer animation can be triggered by any number of events.

Custom event example

Let’s see an example on how to use the custom events. First, create a read more button, which, when clicked will show the text layer (in my example, the text layer reads “I’m a Wedding and Family Portrait Photographer based in Oslo.”) and hide it on the second click.

In the Slide editor, you can see all layers, even if the text layer is shown and hidden using events
In the Slide editor, you can see all layers, even if the text layer is shown and hidden using events

The first thing needed to do is to add a layer animation on the text layer. Then simply give a name to your event for both your IN and OUT animation, for example, readmore and readless, and make sure you remember these event names, as you’ll need them later.

Naming the IN (top) and OUT (bottom) animations trigger event
Naming the IN (top) and OUT (bottom) animations trigger event Naming the IN (top) and OUT (bottom) animations trigger event

When you’re done with the animations, then simply select your button layer, and at its onclick event, type your newly created events separated by comma but without space: readmore,readless.

Triggering events on mouse click
Triggering events on mouse click

The result can be tried in the live preview. It will look and work just like on your live site.

Hiding and showing the text layer when a button is clicked
Hiding and showing the text layer when a button is clicked

In our documentation, there are plenty of event tutorials which you can check out for additional ideas.

Special zero

Have you ever wondered what would happen if you were able to rotate your images or buttons? Wonder no more, as you can achieve exactly this using the Special zero. When enabled, it will make the last animation step act like a “zero point”, making it possible to rotate or scale the layers.

Special zero as seen in Slide editor
Special zero as seen in Live PreviewSpecial zero as seen in Slide editor (top) and in Live Preview (bottom)

Version Overview

Pro only
  • Events
  • Layer animation

Similar Sliders -

Slider typography – Use font manager to create astonishing typographyCreate a stunning testimonial sliderCreate layer animation in Smart SliderStatic testimonial

Related pages