Summary:
This project is work in progress. Adobe CMO was built to be implemented with AEM 6.4 and the new Adobe CMO website. These components were specially designed to house multiple different languages, so their content creators weren't confined to producing English content. By having limited text, rich media, mp4's and interactive components, the authors can display multiple different types of content without running into issues during translation.
View DemojQuery / JavaScript
$( function() {
var storyCard = $( '.story-card' ),
wrapperCount = $( '.story-card .storycard-wrap' ).length,
cardWrapper = $( '.story-card > .storycard-wrap.active' ),
nextWrapper = cardWrapper.next( '.storycard-wrap' ),
prevWrapper = cardWrapper.prev( '.storycard-wrap' ),
activeContent = $( '.storycard-wrap.active > .storycard-content' ),
contentContainer = $( '.storycard-wrap > .storycard-content' ),
nextContent = cardWrapper.next( '.storycard-wrap' ),
prevContent = cardWrapper.prev( '.storycard-wrap' ),
navItem = $( '.nav-item.-story-card' ),
activeNav = $( '.nav-item.-story-card.active' ),
nextNav = activeNav.next( '.nav-item.-story-card' ),
prevNav = activeNav.prev( '.nav-item.-story-card' ),
navLength = $( '.nav-item.-story-card' ).length,
socialCard = storyCard.find( '.social-container' ),
bubbleImg = contentContainer.find( '.bubbleImg' ),
quickStat = $( '.quickStatLink' ),
nextArrow = $( '.storycard-navigation > .right-arrow' ),
prevArrow = $( '.storycard-navigation > .left-arrow' );
nextArrow.on( 'click', function() {
var cardWrapper = $( '.story-card > .storycard-wrap.active' ),
nextWrapper = cardWrapper.next( '.storycard-wrap' ),
prevWrapper = cardWrapper.prev( '.storycard-wrap' );
if( cardWrapper.index() >= wrapperCount -1 ) {
return;
} else {
if( nextWrapper.index() > 0 && nextWrapper.index() < wrapperCount -1 ) {
storyCard.addClass( 'is-animating' );
} else if( nextWrapper.index() >= wrapperCount -1 ) {
storyCard.addClass( 'is-animated' )
.removeClass( 'is-animating' );
}
cardWrapper.addClass( 'prev' )
.removeClass( 'active' );
nextWrapper.addClass( 'active' )
.removeClass( 'next' );
if( socialCard.hasClass( 'hidden' ) && nextWrapper.index() !== 0 ) {
socialCard.removeClass( 'hidden' )
.addClass( 'visible' );
}
var marketingBubbleImages = $( '.storycard-wrap.active > .storycard-content .marketingstats-container' ).children( '.bubbleImg' );
if( marketingBubbleImages.length > 0 ) {
setTimeout( function() {
marketingBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
marketingBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.marketingstats-container > .bubbleImg' ).length > 0 && marketingBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.marketingstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var itstatsBubbleImages = $( '.storycard-wrap.active > .storycard-content .itstats-container' ).children( '.bubbleImg' );
if( itstatsBubbleImages.length > 0 ) {
setTimeout( function() {
itstatsBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
itstatsBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.itstats-container > .bubbleImg' ).length > 0 && itstatsBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.itstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var activeNav = $('.nav-item.-story-card.active');
var nextNav = activeNav.next().length ? activeNav.next()
: null;
var prevNav = activeNav.prev().length ? activeNav.prev()
: null;
if( nextNav === null ) {
return;
} else {
nextNav.addClass('active');
activeNav.removeClass('active');
}
}
} );
prevArrow.on( 'click', function() {
var cardWrapper = $( '.story-card > .storycard-wrap.active' ),
nextWrapper = cardWrapper.next( '.storycard-wrap' ),
prevWrapper = cardWrapper.prev( '.storycard-wrap' );
if( cardWrapper.index() === 0 ) {
return;
} else {
if( prevWrapper.index() > 0 ) {
storyCard.removeClass( 'is-animated' )
.addClass( 'is-animating' );
} else if( prevWrapper.index() < 1 ) {
storyCard.removeClass( 'is-animating' );
}
cardWrapper.addClass( 'next' )
.removeClass( 'active' );
prevWrapper.addClass( 'active' )
.removeClass( 'prev' );
if( socialCard.hasClass( 'visible' ) && prevWrapper.index() === 0 ) {
socialCard.removeClass( 'visible' )
.addClass( 'hidden' );
}
var marketingBubbleImages = $( '.storycard-wrap.active > .storycard-content .marketingstats-container' ).children( '.bubbleImg' );
if( marketingBubbleImages.length > 0 ) {
setTimeout( function() {
marketingBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
marketingBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.marketingstats-container > .bubbleImg' ).length > 0 && marketingBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.marketingstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var itstatsBubbleImages = $( '.storycard-wrap.active > .storycard-content .itstats-container' ).children( '.bubbleImg' );
if( itstatsBubbleImages.length > 0 ) {
setTimeout( function() {
itstatsBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
itstatsBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.itstats-container > .bubbleImg' ).length > 0 && itstatsBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.itstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var activeNav = $('.nav-item.-story-card.active');
var nextNav = activeNav.next().length ? activeNav.next()
: null;
var prevNav = activeNav.prev().length ? activeNav.prev()
: null;
if( prevNav === null ) {
return;
} else {
prevNav.addClass('active');
activeNav.removeClass('active');
}
}
} );
storyCard.on( 'swipeleft', function() {
var cardWrapper = $( '.story-card > .storycard-wrap.active' ),
nextWrapper = cardWrapper.next( '.storycard-wrap' ),
prevWrapper = cardWrapper.prev( '.storycard-wrap' );
if( cardWrapper.index() >= 2 ) {
return;
} else {
if( nextWrapper.index() > 0 && nextWrapper.index() < wrapperCount -1 ) {
storyCard.addClass( 'is-animating' );
} else if( nextWrapper.index() >= wrapperCount -1 ) {
storyCard.addClass( 'is-animated' )
.removeClass( 'is-animating' );
}
cardWrapper.addClass( 'prev' )
.removeClass( 'active' );
nextWrapper.addClass( 'active' )
.removeClass( 'next' );
if( socialCard.hasClass( 'hidden' ) && nextWrapper.index() !== 0 ) {
socialCard.removeClass( 'hidden' )
.addClass( 'visible' );
}
var marketingBubbleImages = $( '.storycard-wrap.active > .storycard-content .marketingstats-container' ).children( '.bubbleImg' );
if( marketingBubbleImages.length > 0 ) {
setTimeout( function() {
marketingBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
marketingBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.marketingstats-container > .bubbleImg' ).length > 0 && marketingBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.marketingstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var itstatsBubbleImages = $( '.storycard-wrap.active > .storycard-content .itstats-container' ).children( '.bubbleImg' );
if( itstatsBubbleImages.length > 0 ) {
setTimeout( function() {
itstatsBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
itstatsBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.itstats-container > .bubbleImg' ).length > 0 && itstatsBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.itstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var activeNav = $('.nav-item.-story-card.active');
var nextNav = activeNav.next().length ? activeNav.next()
: null;
var prevNav = activeNav.prev().length ? activeNav.prev()
: null;
if( nextNav === null ) {
return;
} else {
nextNav.addClass('active');
activeNav.removeClass('active');
}
}
} );
storyCard.on( 'swiperight', function() {
var cardWrapper = $( '.story-card > .storycard-wrap.active' ),
nextWrapper = cardWrapper.next( '.storycard-wrap' ),
prevWrapper = cardWrapper.prev( '.storycard-wrap' );
if( cardWrapper.index() === 0 ) {
return;
} else {
if( prevWrapper.index() > 0 ) {
storyCard.removeClass( 'is-animated' )
.addClass( 'is-animating' );
} else if( prevWrapper.index() < 1 ) {
storyCard.removeClass( 'is-animating' );
}
cardWrapper.addClass( 'next' )
.removeClass( 'active' );
prevWrapper.addClass( 'active' )
.removeClass( 'prev' );
if( socialCard.hasClass( 'visible' ) && prevWrapper.index() === 0 ) {
socialCard.removeClass( 'visible' )
.addClass( 'hidden' );
}
var marketingBubbleImages = $( '.storycard-wrap.active > .storycard-content .marketingstats-container' ).children( '.bubbleImg' );
if( marketingBubbleImages.length > 0 ) {
setTimeout( function() {
marketingBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
marketingBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.marketingstats-container > .bubbleImg' ).length > 0 && marketingBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.marketingstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var itstatsBubbleImages = $( '.storycard-wrap.active > .storycard-content .itstats-container' ).children( '.bubbleImg' );
if( itstatsBubbleImages.length > 0 ) {
setTimeout( function() {
itstatsBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
itstatsBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.itstats-container > .bubbleImg' ).length > 0 && itstatsBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.itstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var activeNav = $('.nav-item.-story-card.active');
var nextNav = activeNav.next().length ? activeNav.next()
: null;
var prevNav = activeNav.prev().length ? activeNav.prev()
: null;
if( prevNav === null ) {
return;
} else {
prevNav.addClass('active');
activeNav.removeClass('active');
}
}
} );
navItem.on( 'click', function() {
var navIndex = $( this ).index(),
$this = $( this ),
activeNav = $( '.nav-item.-story-card.active' ),
navParent = $this.parent( '.slider-nav.-story-card' ).parent( '.storycard-navigation' ),
activeWrapper = navParent.siblings( '.storycard-wrap.active' ),
nextWrapper = navParent.siblings( '.storycard-wrap:nth-child(' + ( navIndex + 1 ) + ')' ),
prevWrapper = navParent.siblings( '.storycard-wrap:nth-child(' + ( navIndex + 1 ) + ')' );
if( navIndex > activeWrapper.index() ) {
activeWrapper.removeClass( 'active' )
.addClass( 'prev' );
nextWrapper.addClass( 'active' )
.removeClass( 'next' );
if( socialCard.hasClass( 'hidden' ) && nextWrapper.index() !== 0 ) {
socialCard.removeClass( 'hidden' )
.addClass( 'visible' );
}
if( storyCard.hasClass( 'is-animating' ) ) {
storyCard.addClass( 'is-animated' )
.removeClass( 'is-animating' );
} else if( ! storyCard.hasClass( 'is-animating' ) || ! storyCard.hasClass( 'is-animated' ) ) {
storyCard.addClass( 'is-animating' );
}
} else if( navIndex < activeWrapper.index() ) {
if( storyCard.hasClass( 'is-animated' ) ) {
storyCard.removeClass( 'is-animated' )
.addClass( 'is-animating' );
} else if( storyCard.hasClass( 'is-animating' ) ) {
storyCard.removeClass( 'is-animating' );
}
activeWrapper.removeClass( 'active' )
.addClass( 'next' );
prevWrapper.removeAttr( 'class' )
.addClass( 'storycard-wrap active' );
if( socialCard.hasClass( 'visible' ) && prevWrapper.index() === 0 ) {
socialCard.removeClass( 'visible' )
.addClass( 'hidden' );
}
}
var marketingBubbleImages = $( '.storycard-wrap.active > .storycard-content .marketingstats-container' ).children( '.bubbleImg' );
if( marketingBubbleImages.length > 0 ) {
setTimeout( function() {
marketingBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
marketingBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.marketingstats-container > .bubbleImg' ).length > 0 && marketingBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.marketingstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
var itstatsBubbleImages = $( '.storycard-wrap.active > .storycard-content .itstats-container' ).children( '.bubbleImg' );
if( itstatsBubbleImages.length > 0 ) {
setTimeout( function() {
itstatsBubbleImages.each( function() {
$( this ).addClass( 'is-animated' );
} );
}, 350);
itstatsBubbleImages.find( '.-percent' ).each( function () {
$( this ).prop( 'Counter', 0 ).animate( {
Counter: $( this ).text()
}, {
duration: 2000,
easing: 'linear',
step: function ( now ) {
$( this ).text( Math.ceil( now ) );
}
} );
} );
} else if( $( '.itstats-container > .bubbleImg' ).length > 0 && itstatsBubbleImages.length < 1 ) {
setTimeout( function() {
$( '.itstats-container > .bubbleImg' ).removeClass( 'is-animated' );
}, 300 );
}
activeNav.removeClass( 'active' );
$this.addClass( 'active' );
} );
} );
SCSS / CSS
.bubbleImg {
&.is-animated {
transition: transform 7s ease;
-webkit-animation: float 7s infinite linear;
animation: float 7s infinite linear;
}
&.marketingstats-halfcircle {
&.is-animated {
transition: transform 7s ease;
-webkit-animation: float-reverse 7s infinite linear;
animation: float-reverse 7s infinite linear;
}
}
&.itstats-halfcircle {
transition: transform 9s ease;
-webkit-animation: float 9s infinite linear;
animation: float 9s infinite linear;
}
&.it-stats {
&.is-animated {
transition: transform 9s ease, height .5s ease, width .5s ease;
-webkit-animation: float-reverse 9s infinite linear;
animation: float-reverse 9s infinite linear;
}
&.-it {
@include adobeCleanBlack(100px, normal);
}
> .perc {
@include adobeClean(30px, normal);
}
}
> .title {
@include adobeCleanBlack(70px, normal);
color: $white;
margin: 0;
line-height: .5em;
&.-it {
@include adobeCleanBlack(100px, normal);
}
> .perc {
@include adobeClean(30px, normal);
}
}
> .subtitle {
@include adobeCleanBold(16px, normal);
color: $white;
margin: 0;
}
}
@keyframes float {
from {
transform: rotate(0deg) translate3d(3px, 0, 0) rotate(0deg) scale(1.03);
}
to {
transform: rotate(-360deg) translate3d(3px, 0, 0) rotate(360deg) scale(1);
}
}
@keyframes float-reverse {
from {
transform: rotate(0deg) translate3d(3px, 0, 0) rotate(0deg);
}
to {
transform: rotate(360deg) translate3d(3px, 0, 0) rotate(-360deg);
}
}
.storycard-navigation {
> .nav-list {
background-color: transparent;
max-width: 47px;
width: 100%;
}
> .swipeGesture {
opacity: 0.0;
overflow: visible;
height: 29px;
width: 32px;
margin-left: 13px;
&.animate-in {
-webkit-animation: swipe-gesture 2s 3;
-moz-animation: swipe-gesture 2s 3;
-o-animation: swipe-gesture 2s 3;
animation: swipe-gesture 2s 3;
}
}
> .social-container {
display: flex;
justify-content: flex-start;
align-items: center;
opacity: 0.0;
transition: opacity .8s ease,
transform .8s ease;
&.hidden {
transform: translateX(-35px);
}
&.visible {
opacity: 1.0;
transform: translateX(0px);
}
.-poll {
justify-content: flex-start;
}
}
> .left-arrow {
cursor: pointer;
opacity: 0.0;
position: absolute;
left: 25px;
top: -131px;
height: 25px;
width: 25px;
border: solid rgba( 255,255,255,.3 );
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
z-index: 2;
transition: opacity .15s ease-in-out;
@media( max-width: 1024px ) {
display: none;
}
}
> .right-arrow {
cursor: pointer;
opacity: 0.0;
position: absolute;
right: 25px;
top: -131px;
height: 25px;
width: 25px;
border: solid rgba( 255,255,255,.3 );
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
z-index: 2;
transition: opacity .15s ease-in-out;
@media( max-width: 1024px ) {
display: none;
}
}
}
@keyframes swipe-gesture {
0% {
opacity: 1.0;
transform: translateX(10px);
}
50% {
opacity: 1.0;
transform: translateX(-10px);
}
100% {
opacity: 0.0;
transform: translateX(0px);
}
}