COMPONENT

C-SLIDE-FOX

Each variation will be presented in the following sections.

Slide Fox (Default)

We need some demo text to see the slide fox in action!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.

11/16/2016

Article Headline

Article Subline

This is an intro text which can be used in every article component.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto atque cupiditate dicta earum ex facilis harum incidunt, laboriosam officiis placeat quas recusandae, rerum, sit tempore tenetur. Impedit, velit.

Slide Fox

Description

Represents an element that slides into view when it’s scrolled into viewport.

Requirements

Veams >= v5.0.0 - Veams Framework.

Installation

Installation with Veams

veams install vc slide-fox

Installation with Bower

bower install veams-component-slide-fox --save

Fields

`c-slide-fox.hbs`

The partial is a wrapWith partial.

Settings

settings.slideFoxContextClass {String} [default] - Context class of component.
settings.slideFoxClasses {String} - Modifier classes for component.
settings.slideFoxJsOptions {Object} - JavaScript options which gets stringified.

JavaScript Options

The module gives you the possibility to override default options:

visibleClass {String} [‘is-visible’] - Class to be set when Slide Fox becomes visible.

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Slide Fox (Default)",
				"sectionCenter": true
			},
			"settings": {
				"slideFoxContextClass": "default",
				"slideFoxClasses": false
			}
		}
	}
}

c-slide-fox-usage

<h2>We need some demo text to see the slide fox in action!</h2>
{{#times 20}}
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi
		nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore
		nobis odit.</p>
{{/times}}

{{#wrapWith "c-slide-fox" settings=this.settings}}
	{{#with @root.article-bp.variations.default}}
		{{#wrapWith "c-article" settings=this.settings content=this.content}}
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto atque cupiditate dicta earum ex facilis harum incidunt, laboriosam officiis placeat quas recusandae, rerum, sit tempore tenetur. Impedit, velit.
		{{/wrapWith}}
	{{/with}}
{{/wrapWith}}

c-slide-fox.hbs

<div class="c-slide-fox{{#if
		options.settings.slideFoxContextClass}}--{{options.settings.slideFoxContextClass}}{{else}}--default{{/if}}{{#if
		options.settings.slideFoxClasses}} {{options.settings.slideFoxClasses}}{{/if}}"
     data-css="c-slide-fox"
     data-js-module="slide-fox"
	{{#if options.settings.slideFoxJsOptions}}
	 data-js-options='{{stringify options.settings.slideFoxJsOptions}}'{{/if}}>
	{{{yield}}}
</div>

_c-slide-fox.scss

/* ===================================================
COMPONENT: SLIDE FOX
=================================================== */

/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */

// Animation Variables
$slide-fox-duration: 1000ms !default;
$slide-fox-ease-method: ease !default;

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */

[data-css="c-slide-fox"] {
	transition: transform $slide-fox-duration $slide-fox-ease-method, opacity $slide-fox-duration $slide-fox-ease-method;
	transform: translate3d(0, 100%, 0);
	opacity: 0;

	&.is-visible {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

slide-fox.js

/**
 * Represents an element that slides into view when it's scrolled into viewport.
 *
 * @module SlideFox
 * @version v3.0.1
 *
 * @author Andy Gutsche
 * @refactoring Sebastian Fitzner
 */

import { Veams } from 'app';
import VeamsComponent from 'veams/src/js/common/component';
import isInViewport from 'veams/src/js/utils/helpers/is-in-viewport';

const $ = Veams.$;
const Helpers = Veams.helpers;

class SlideFox extends VeamsComponent {
	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			visibleClass: 'is-visible'
		};

		super(obj, options);
	}

	/** =================================================
	 * GETTER & SETTER
	 * ================================================ */

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '3.0.1',
			vc: true,
			mod: false // set to true if source was modified in project
		};
	}

	/** =================================================
	 * EVENTS
	 * ================================================ */

	get subscribe() {
		return {
			'{{Veams.EVENTS.scroll}}': 'render'
		};
	}

	/** =================================================
	 * STANDARD METHODS
	 * ================================================= */

	render() {
		isInViewport(this.el) ? this.showSlideFox() : this.hideSlideFox();
	}

	/** =================================================
	 * CUSTOM SLIDEFOX METHODS
	 * ================================================= */

	showSlideFox() {
		this.$el.addClass(this.options.visibleClass);
	}

	hideSlideFox() {
		this.$el.removeClass(this.options.visibleClass);
	}


}

// Returns the constructor
export default SlideFox;

Slide Fox (Default)

<h2>We need some demo text to see the slide fox in action!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum explicabo facilis, ipsum itaque necessitatibus nisi nulla ut veniam veritatis voluptate. Blanditiis consectetur, error excepturi exercitationem facilis ipsum labore nobis odit.</p>
<div class="c-slide-fox--default" data-css="c-slide-fox" data-js-module="slide-fox">
	<article class="c-article--default is-bg-higlight-1" data-css="c-article">
		<header class="article__header is-header">
			<time class="article__header-time" datetime="">11/16/2016</time>
			<h1 class="article__header-headline">Article Headline</h1>
			<h2 class="article__header-subline">Article Subline</h2>
			<p class="article__header-intro">This is an intro text which can be used in every article component.</p>
		</header>
		<div class="article__content is-visible">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto atque cupiditate dicta earum ex facilis harum incidunt, laboriosam officiis placeat quas recusandae, rerum, sit tempore tenetur. Impedit, velit.
		</div>
		<footer class="article__footer is-margin">
			<a class="article__footer-link" href="#">
	Footer Link in Article
</a> </footer>
	</article>
</div>

Veams

Go To Github

COMPONENT

C-SLIDE-FOX

Demo Section

Slide Fox (Default)

We need some demo text to see the slide fox in action!

Article Headline

Article Subline

Technical Details

Slide Fox

Description

Requirements

Installation

Installation with Veams

Installation with Bower

Fields

`c-slide-fox.hbs`

Settings

JavaScript Options

c-slide-fox-usage

c-slide-fox.hbs

_c-slide-fox.scss

slide-fox.js

Slide Fox (Default)