Campaign

Ready

HTML
View
Assets
Context
Info
Notes


        
        <article class="o-campaign">
    <div class="o-campaign__image-wrapper">
        <div class="o-campaign__image">
            <figure class="a-image a-image--cover">

                <img src="/img/wheat_ratio.jpg" alt="Some many things on this image" title="This is a linked image" class="a-image__image a-image__image--fp a-image__image--fp-">

                <figcaption>

                    <small class="a-image__copy">&copy; Photographer xy</small>
                </figcaption>
            </figure>
        </div>
        <div class="o-campaign__bars">
            <div class="m-bars m-bars--right">
                <div class="m-bars__rotator">
                    <div class="m-bars__positioner">
                        <div class="m-bars__bar">
                            <div class="a-bar a-bar--green a-bar--right a-bar--no-sanuk">Engagiere dich</div>
                        </div>
                        <div class="m-bars__bar">
                            <div class="a-bar a-bar--magenta a-bar--right a-bar--no-sanuk">für Fair-Food</div>
                        </div>
                        <div class="m-bars__bar">
                            <div class="a-bar a-bar--white a-bar--right a-bar--subline a-bar--no-sanuk">zusammen die Welt verändern</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="o-campaign__spacer" aria-hidden="true">
        <div class="o-campaign__image">
        </div>
    </div>
    <div class="o-campaign__cta-wrapper">
        <div class="o-campaign__desc">
            <div class="m-campaign-desc">
                <h2 class="m-campaign-desc__title" id="main-content">
                    <a href="" class="m-campaign-desc__link">Fair schmeckt besser!</a>
                </h2>
                <p class="m-campaign-desc__desc">Die Fair-Food Initiative verlangt, was für alle selbstverständlich ist: Lebensmittel aus einer naturnahen, umwelt- und tierfreundlichen Landwirtschaft mit fairen Arbeitsbedingungen fördern. Dabei soll es keine Rolle spielen, ob die Lebensmittel aus der Schweiz stammen oder importiert sind.</p>
                <div class="m-campaign-desc__more">
                    <a href="#" class="a-link-button ">
                        Mehr über die Fair-Food Initiative
                    </a>
                </div>
            </div>

        </div>
        <div class="o-campaign__cta">
            <div class="m-campaign-cta">
                <h3 class="m-campaign-cta__title">Ich will zum Erfolg beitragen!</h3>
                <p class="m-campaign-cta__text">Hiermit abonniere ich den Newsletter, der mich laufend über alle Aktivitäten und Mitmachmöglichkeiten informiert.</p>
                <form class="m-campaign-cta__grid">
                    <div class="m-campaign-cta__postal-code">
                        <div class="a-input">
                            <label for="plz" class="a-input__label a-input__label--required">
                                PLZ
                            </label>
                            <input id="plz" class="a-input__field  is-required" type="text" pattern="(\w{0,3}(?&lt;&#x3D;\w)-)?\d{4,6}" name="plz" value="" required>
                        </div>
                    </div>
                    <div class="m-campaign-cta__email">
                        <div class="a-input">
                            <label for="email" class="a-input__label a-input__label--required">
                                E-Mail
                            </label>
                            <input id="email" class="a-input__field  is-required" type="email" name="email" value="" required>
                        </div>
                    </div>
                    <div class="m-campaign-cta__consent">
                        <div class="a-checkoption">
                            <input type="hidden" name="datenschutz" value="0">
                            <input id="datenschutz" class="a-checkoption__field" type="checkbox" name="datenschutz" required>
                            <label for="datenschutz" class="a-checkoption__label a-checkoption--legal">
                                Ich akzeptiere die Datenschutzbestimmungen.
                            </label>
                        </div>
                    </div>
                    <div class="m-campaign-cta__button"> <button type="button" class="a-button a-button--secondary">Mitmachen</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</article>


        <article class="o-campaign">
	<div class="o-campaign__image-wrapper">
		<div class="o-campaign__image">
			{{> @a-image image-src="/img/wheat_ratio.jpg"
				alt="Some many things on this image"
				title="This is a linked image"
				copy="Photographer xy"}}
		</div>
		<div class="o-campaign__bars">
			{{render '@m-bars'}}
		</div>
	</div>
	<div class="o-campaign__spacer" aria-hidden="true">
		<div class="o-campaign__image">
		</div>
	</div>
	<div class="o-campaign__cta-wrapper">
		<div class="o-campaign__desc">
			{{render '@m-campaign-desc'}}
		</div>
		<div class="o-campaign__cta">
			{{render '@m-campaign-cta'}}
		</div>
	</div>
</article>

File:

Content:


                                .o-campaign {
	position: relative;

	&__image-wrapper {
		position: fixed;
		width: 100%;
		z-index: -1;
	}

	&__image {
		width: 100%;
		height: 60vh;
	}

	&__bars {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		@include fluid-props(font-size, $fluid-min, $fluid-max, 20px, 72px);

		@include media($size-large) {
			font-size: 72px;
		}

		.m-bars {
			position: absolute;
			@include fluid-props(bottom, $fluid-min, $size-medium, 15px, 40px);
			@include media($_DESKTOP) {
				bottom: 60px;
			}
			@include media($size-large) {
				bottom: 40px;
			}
		}
	}

	&__spacer {
		position: relative;
		z-index: -1;
		visibility: hidden;
	}

	&__cta-wrapper {
		margin-left: 10px;
		margin-right: 10px;
		@include fluid-props(margin-top, $fluid-min, $fluid-max, -10px, -60px);

		@include media($_DESKTOP) {
			width: calc(100% - 2 * #{$grid-min-side-margin});
			margin: -4em $grid-min-side-margin;
			display: grid;
			grid-template-columns: 1fr 60px 16px 16px 60px 1fr;
			grid-template-rows: repeat(12, 1fr);
		}

		@include media($grid-max-width-max + 2 * $grid-min-side-margin) {
			margin-left: auto;
			margin-right: auto;
			width: $grid-max-width-max;
		}
	}

	&__desc {
		grid-column: 1 / 6;
		grid-row: 1 / 12;
		align-self: start;
	}

	&__cta {
		grid-column: 4 / 7;
		grid-row: 2 / 13;
		align-self: end;
	}
}

URL: /components/raw/o-campaign/_o-campaign.scss
Filesystem Path: styleguide/src/components/organisms/o-campaign/_o-campaign.scss
Size: 1.3 KB

Content:


                                import throttle from 'lodash.throttle';

import BaseView from './../../../js/base-view';

const IMAGE_SELECTOR = '.o-campaign__image';
const IMAGE_WRAPPER_SELECTOR = '.o-campaign__image-wrapper';
const BARS_SELECTOR = '.o-campaign__bars';

const SCROLL_SPEED = 0.1;
const RESIZE_THROTTLING_MS = 100;

export default class OCampaign extends BaseView {
	initialize() {
		this.image = this.getScopedElement( IMAGE_SELECTOR );
		this.imageWrapper = this.getScopedElement( IMAGE_WRAPPER_SELECTOR );
		this.bars = this.getScopedElement( BARS_SELECTOR );

		this.header = this.getComponent( 'OHeader0' );
		this.branding = this.header.getBranding();

		this.ticking = false;

		this.setBarPosition();
	}

	bind() {
		super.bind();

		this.scrollHandler = () => this.requestTick();
		this.resizeHandler = throttle( () => this.onResize(), RESIZE_THROTTLING_MS, { leading: false, trailing: true } );

		window.addEventListener( 'resize', this.resizeHandler );
		window.addEventListener( 'scroll', this.scrollHandler, false );

		this.scrollHandler();
		this.resizeHandler();
	}

	requestTick() {
		if (! this.ticking) {
			this.ticking = true;
			window.requestAnimationFrame( this.onScroll.bind( this ) );
		}
	}

	onResize() {
		this.setBrandingHeight();
		this.setScrollStop();
		this.setBarPosition();
	}

	onScroll() {
		if (! this.header.getFixed()) {
			this.imageWrapper.style.transform = this.translate( - this.getScrollTop() );
		} else {
			if (this.getScrollTop() < this.scrollStop) {
				let delta = this.getScrollTop() - this.brandingHeight;
				this.imageWrapper.style.transform = this.translate( - this.brandingHeight - delta * SCROLL_SPEED );
			}
		}

		this.ticking = false;
	}

	setBrandingHeight() {
		if (this.branding){
			this.brandingHeight = this.branding.clientHeight;
		} else {
			this.brandingHeight = 0;
		}
	}

	setScrollStop() {
		this.scrollStop = this.brandingHeight + this.element.clientHeight;
	}

	translate( y ) {
		return `translate3d(0px, ${y}px, 0px)`;
	}

	setBarPosition() {
		if (! this.bars) {
			return;
		}

		let barsBottom = this.bars.getBoundingClientRect().bottom;
		let viewportHeight = Math.max( document.documentElement.clientHeight, window.innerHeight || 0 );
		let scrollTop = this.getScrollTop();
		let viewportBottom = viewportHeight + scrollTop;

		if (barsBottom > viewportBottom) {
			this.bars.style.height = ( viewportHeight - this.header.element.clientHeight + scrollTop ) + 'px';
		} else {
			this.bars.style.height = this.image.clientHeight + 'px';
		}
	}

	destroy() {
		super.destroy();

		window.removeEventListener( 'scroll', this.scrollHandler );
		window.removeEventListener( 'resize', this.resizeHandler );
	}
}

URL: /components/raw/o-campaign/o-campaign.js
Filesystem Path: styleguide/src/components/organisms/o-campaign/o-campaign.js
Size: 2.7 KB


        
            
            /* No context defined. */

Handle: @o-campaign
Preview:
- With layout
- Component only
Filesystem Path: styleguide/src/components/organisms/o-campaign/o-campaign.hbs
References (4): @a-image, @m-bars, @m-campaign-desc, @m-campaign-cta
Referenced by (1): @front

No notes defined.