CODEWITHSUNDEEP
jquerycssanimation
DocMan
DocMan

Reputation: 11

Text animation whereby two words come together and create a single new word

My company's name is a contraction of two other words. In the past, I have created an animation in Flash whereby the two words "collide" resulting in the new word (the company name). Can a similar animation now be achieved using some combination of CSS and JQuery?

An example:

Kyocera (ostensibly known for their printers) arrived at its name by contracting two words - Kyoto and Ceramics. If this were my company, I would like to see Kyoto collide with Ceramics, with the to dropping off the end of Kyoto, the mics dropping off the end of Ceramics and the resultant Kyocera left displayed on the screen. Doable?

Thanks in advance for any-and-all assistance!

Upvotes: 1

Views: 2056

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Added effects with CSS3 http://jsfiddle.net/wRREe/2/ which would work only on modern browser. For a non-CSS3 simple effect see below,

JS

$('.kyoto').animate({
    left: $('.ceramics').position().left - 27
}, 1000, function () {
    $('.break_this').addClass('break_off');
});

CSS3:

.break_this {
    position: absolute;
    top: 0px;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.break_off {
    top: 50px;
    opacity:0;
    filter:alpha(opacity=0);
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

DEMO with CSS3: http://jsfiddle.net/wRREe/2/

DEMO without CSS3: http://jsfiddle.net/wRREe/1/

You could achieve almost any effects with some effort in javascript. See my approach below,

HTML

<span class="kyoto">Kyo<span class="break_this">to</span></span>
<span class="ceramics">Cera<span class="break_this">mics</span>

CSS:

.kyoto {
    position: absolute;
    left: 10px;
    top: 10px;
}
.ceramics {
    position: absolute;
    left: 200px;
    top: 10px;
}

.break_this { position: absolute; }

JS:

$('.kyoto').animate({
    left: $('.ceramics').position().left - 27
}, 1000, function () {
    $('.break_this').animate({
        top: '+=100',
        opacity: 0
    }, 2000, function () {
        $(this).remove();
    });
});

DEMO: http://jsfiddle.net/wRREe/1/

Upvotes: 1

AaronLS
AaronLS

Reputation: 38364

There is fade out. Probably break up Kyoto into two spans "Kyo" and "to", similar for other word, activate fade out for the "to" "mics" parts you want to fade out, at the same time do something like this so that you hide the items and the remaining items slide together:

$(".con .item").click(function() {
  $('.kill').hide("slow");    
});

Better results if no spaces between div's, and of course these could be a series of imiages composing your logo:

<div class="con">
    <div class="item keep">DIV 1</div><div class="item kill">DIV 2</div><div class="item kill">DIV 3</div><div class="item keep">DIV 4</div>
</div>

.item
{ 
    width:50px; 
    height:50px;
    margin:0;
    padding:0;
    display:inline-block;
    position:relative;            
    background:lime;
    cursor:pointer;        
}

Updated fiddle: http://jsfiddle.net/M8scf/31/

The space between the words would be included as a piece to fade out, so that as the items are fading out, the remaining items slide together. Of course any defaults styled margins/padding will need to be adjusted to make the final two pieces close enough, or you could have those final two pieces hidden instantly when they come together, and the complete word fade in.

Upvotes: 2

Related Questions