Hi Couch!
I use flipInX (animate.less). It will flip the row in if you reach the page, great animation.
The problem is, i have repeatable regions :
I want to generate 4 repeatable items, so it will looks like this picture :
So when scroll down, the 1st 2 cols will flip in, and scroll again, the next 2 cols will flip in, it will need a code like i paste above.
My question is, how to show my 4 repeatable items, but separate in 2 rows? ( 1st 2 items in 1st row, last 2 items in the 2nd row ) because if i only use 1 row, all 4 repeatable items will flip in together.
Thx!
I use flipInX (animate.less). It will flip the row in if you reach the page, great animation.
- Code: Select all
<div class="row wow flipInX">
<div class="col-md-6 col-sm-6">
<div class="about-row">
<div class="about-icon">
<i class="icon fa fa-facebook ion-3x highlight"></i>
<i class="icon fa fa-facebook back-icon"></i>
</div>
<div class="about-info">
<h4>We're Creative<br><small>Crafting With Love</small></h4>
<p class="about-description">We work collaboratively as a team of strategists, creatives and technologists to understand opportunities, define solutions and transform businesses.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="about-row">
<div class="about-icon">
<i class="icon ion-paper-airplane ion-3x highlight"></i>
<i class="icon ion-paper-airplane back-icon"></i>
</div>
<div class="about-info">
<h4>We're Cool People<br><small>Coding With Fun</small></h4>
<p class="about-description">Our vision is to create visually stunning, technically advanced and future-proof code for our clients.</p>
</div>
</div>
</div>
</div>
<div class="row wow flipInX">
<div class="col-md-6 col-sm-6">
<div class="about-row">
<div class="about-icon">
<i class="icon ion-ios7-heart ion-3x highlight"></i>
<i class="icon ion-ios7-heart back-icon"></i>
</div>
<div class="about-info">
<h4>We're Passionate<br><small>Available When You Need Us</small></h4>
<p class="about-description">When we bring a number of perspectives together, the results can be quite amazing. Especially if the process is fuelled by good coffee and an open and honest atmosphere.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="about-row">
<div class="about-icon">
<i class="icon ion-speakerphone ion-3x highlight"></i>
<i class="icon ion-speakerphone back-icon"></i>
</div>
<div class="about-info">
<h4>We're Professional<br><small>Try Us</small></h4>
<p class="about-description">We believe communication should be fun for everyone involved, and original ideas need a fresh environment to take seed and grow.</p>
</div>
</div>
</div>
</div>
The problem is, i have repeatable regions :
- Code: Select all
<cms:repeatable
name='about_alt'
label='Alt About Us'
group='section_2'
order='1'
>
<cms:editable
name='fa_icon'
label='Icon'
width='50'
type='dropdown'
opt_values=''
/>
<cms:editable
name='alt_about_title'
label='Alt About Title'
type='text'
/>
<cms:editable
name='alt_about_subtitle'
label='Alt About Subtitle'
type='text'
/>
<cms:editable
name='alt_about_desc'
label='Alt About Description'
type='text'
/>
</cms:repeatable>
I want to generate 4 repeatable items, so it will looks like this picture :
- Capture.PNG (27.46 KiB) Viewed 1375 times
So when scroll down, the 1st 2 cols will flip in, and scroll again, the next 2 cols will flip in, it will need a code like i paste above.
My question is, how to show my 4 repeatable items, but separate in 2 rows? ( 1st 2 items in 1st row, last 2 items in the 2nd row ) because if i only use 1 row, all 4 repeatable items will flip in together.
Thx!
