CODEWITHSUNDEEP
javascriptjqueryhtmlcss
markyeoj
markyeoj

Reputation: 369

Rotating Div from bottom to top

Hello I want to change the transition of my sliding texts. The current effect is a fade in and fade out, but I would like the .quotes to slide or scroll to top then the next block of .quotes will follow. Something like a rotating div but the transition is to top. I tried slideTop() but it loos different from what I want. Here's my current code and jsfiddle

HTML:

<div class="quotes">
<h3 class="heading green">GoScRUB orks Much Faster than a scrub brush on tough build-up</h3>
<h3 class="heading green">GoScRUB aves Money – it is about 1/10 the cost of a scrub rush</h3>
</div>

<div class="quotes">
<h3>GoScRUB s Better for the Environment than a scrub brush – less waste</h3>
<h3>GoScRUB s More Effective than a scrub brush – it lifts and peels off the debris</h3>
</div>

<div class="quotes">
<h3 class="heading green">GoScRUB Cleans Easily and is much more sanitary than a scrub brush</h3>
<h3 class="heading green">GoScRUB Lasts 10x Longer than a scrub brush (or more)</h3>
<h3 class="heading green">GoScRUB llows your Scrub Pads to Last Much Longer</h3>
</div>

Javascript:

(function() {
    var quotes = jQuery(".quotes");
    var quoteIndex = -1;
    function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
    .fadeIn(2000)
    .delay(2000)
    .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

    })();

CSS:

.quotes h3{
padding-left:20px;
line-height: 52px;
margin-bottom: 13px;
}

.quotes {display: none;}

.heading-slide h3{
font-size:34px;
}

Upvotes: 1

Views: 366

Answers (3)

Mihnea Belcin
Mihnea Belcin

Reputation: 554

basically what you need is a vertical carousel .

there are many ways in witch you can achieve what you want . one them is: http://getbootstrap.com/javascript/#carousel

this should be done in 2 steps:

  1. cycle between items - done in JS
  2. add the scrolling animation - done in CSS

first part you can take as is from twitter bootstrap (or any other cycle-ing plugin)

for the second part . you will need to change some of the CSS . 

.carousel-inner > .active {
    left: 0;
}
.carousel-inner > .next {
    left: 100%;
}
.carousel-inner > .prev {
    left: -100%;
}

into 

.carousel-inner > .active {
    top: 0;
}
.carousel-inner > .next {
    top: 100%;
}
.carousel-inner > .prev {
    top: -100%;
}

what i did was to take all references to left/right and change them to top/bottom

Upvotes: 0

otinanai
otinanai

Reputation: 4025

Like I said in my comment, the approach I'd take is to use a parent div that will hide the bottom children and will only show one quote at a time. When a quote is displayed and animates to top (outside of parent), it is appended at the end of the parent.

Here's the demo. (It's not optimized but you get the basic idea)

Upvotes: 1

Richa
Richa

Reputation: 4270

is this you want :

(function() {
    var quotes = jQuery(".quotes");
    var quoteIndex = -1;
    function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
    .slideDown(1000)
    .delay(4000)
    .slideUp(1000, showNextQuote);
    }

    showNextQuote();

    })();

Upvotes: 0

Related Questions