Data Inview

Create fixed position content panels that are conditionally displayed as the web page is scrolled and resized.

Conditional bar example

Section with a conditional bottom bar

A bar will be displayed at the bottom when this section is partially out of the viewport.

View state:

View code 
<section class="wb-inview bar-demo" data-inview="bottom-bar">
	<h3 class="no-gutter">Section with a conditional bottom bar</h3>
	...
</section>

<section id="bottom-bar" class="wb-overlay modal-content overlay-def wb-bar-b">
	<header>
		<h2 class="modal-title">Bottom bar</h2>
	</header>
	...
</section>

Section with a conditional top bar

A bar will be displayed at the top when this section is fully out of the viewport (with class="show-none").

View state:

View code 
<section class="wb-inview show-none bar-demo" data-inview="top-bar">
	<h3 class="no-gutter">Section with a conditional top bar</h3>
	...
</section>

<section id="top-bar" class="wb-overlay modal-content overlay-def wb-bar-t">
	<header>
		<h2 class="modal-title">Top bar</h2>
	</header>
	...
</section>

CSS transition example

List of supported CSS transition

  • class="pop"
  • class="fade"
  • class="slide"
  • class="slidefade"
  • class="slidevert"

Reverse the transition by adding the reverse class with the CSS transition.

Section that triggers a fade in or out effect for the next section

The next section will fade in when this section is partially out of the viewport.

View state:

View code 
<section class="wb-inview bar-demo" data-inview="fade-effect">
	<h3 class="no-gutter">Section that triggers a fade in or out effect for the next section</h3>
	...
</section>

<section id="fade-effect" class="fade bar-demo">
	<h3 class="no-gutter">Section that fades in/out</h3>
	...
</section>

Section that fades in/out id="fade-effect"

This section fades in or out based upon the view state of the previous section.

Section that fades in/out id="fade-effect2"

This section fades in or out based upon the view state of the next section.

Section that triggers a fade in or out effect for the previous section

The previous section will fade in when this section is partially out of the viewport (with class="show-none").

View state:

View code 
<section id="fade-effect2" class="fade bar-demo">
	<h3 class="no-gutter">Section that fades in/out</h3>
	...
</section>

<section class="wb-inview show-none bar-demo" data-inview="fade-effect2">
	<h3 class="no-gutter">Section that triggers a fade in or out effect for the previous section</h3>
	...
</section>

Section that slides in only id="slide-effect1"

This section slides in based upon the view state of the next section.

Section that triggers a slide for the previous section

The previous section will slide in when this section is partially out of the viewport (with class="show-none"), then stay in place.

View state:

View code 
<section id="slide-effect1" class="slide in-only bar-demo">
	<h3 class="no-gutter">Section that slides in</h3>
	...
</section>

<section class="wb-inview show-none bar-demo" data-inview="slide-effect1">
	<h3 class="no-gutter">Section that triggers a slide effect for the previous section</h3>
	...
</section>

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Top bar

Bottom bar

Date modified: