2
먼저 내 첫 번째 게시물입니다. 나는 그것을 잘하고 있기를 바란다.부드러운 유형 효과를 만드는 방법은 무엇입니까? JS
나는 내 h1 태그에서이 웹 사이트와 비슷한 "유형"효과를 얻으려는 프로젝트를 진행하고 있습니다. http://preview.themeforest.net/item/resumi-responsive-resume-personal-portfolio-template/full_screen_preview/19298361 매우 부드럽고 깨끗하며 무한 루프가 있습니다.
코드를 탐색하면서 어떻게 작동하는지 또는 예제 코드에서 잘못된 점을 이해할 수 없습니다.
누군가가 있다면 JS (적어도 나보다 더)를 이해하고 나에게이 효과를 줄 수있는 사람이 있다면 매우 감사하겠습니다.
감사 M
나는 그들의 웹 사이트에서 얻을 코드 HTML JS와 CSS를 검색 할 수 있습니다.
업데이트 누군가 내 스 니펫에이 행을 추가 했으므로 올바르게 작동합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
jQuery(document).ready(function($) {
//set animation timing
var animationDelay = 2500,
//loading bar effect
barAnimationDelay = 3800,
barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
//letters effect
lettersDelay = 50,
//type effect
typeLettersDelay = 150,
selectionDuration = 500,
typeAnimationDelay = selectionDuration + 800,
//clip effect
revealDuration = 600,
revealAnimationDelay = 1500;
initHeadline();
function initHeadline() {
//insert <i> element for each letter of a changing word
singleLetters($('.cd-headline.letters').find('b'));
//initialise headline animation
animateHeadline($('.cd-headline'));
}
function singleLetters($words) {
$words.each(function() {
var word = $(this),
letters = word.text().split(''),
selected = word.hasClass('is-visible');
for (i in letters) {
if (word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>' : '<i>' + letters[i] + '</i>';
}
var newLetters = letters.join('');
word.html(newLetters).css('opacity', 1);
});
}
function animateHeadline($headlines) {
var duration = animationDelay;
$headlines.each(function() {
var headline = $(this);
if (headline.hasClass('loading-bar')) {
duration = barAnimationDelay;
setTimeout(function() {
headline.find('.cd-words-wrapper').addClass('is-loading')
}, barWaiting);
} else if (headline.hasClass('clip')) {
var spanWrapper = headline.find('.cd-words-wrapper'),
newWidth = spanWrapper.width() + 10
spanWrapper.css('width', newWidth);
} else if (!headline.hasClass('type')) {
//assign to .cd-words-wrapper the width of its longest word
var words = headline.find('.cd-words-wrapper b'),
width = 0;
words.each(function() {
var wordWidth = $(this).width();
if (wordWidth > width) width = wordWidth;
});
headline.find('.cd-words-wrapper').css('width', width);
};
//trigger animation
setTimeout(function() {
hideWord(headline.find('.is-visible').eq(0))
}, duration);
});
}
function hideWord($word) {
var nextWord = takeNext($word);
if ($word.parents('.cd-headline').hasClass('type')) {
var parentSpan = $word.parent('.cd-words-wrapper');
parentSpan.addClass('selected').removeClass('waiting');
setTimeout(function() {
parentSpan.removeClass('selected');
$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
}, selectionDuration);
setTimeout(function() {
showWord(nextWord, typeLettersDelay)
}, typeAnimationDelay);
} else if ($word.parents('.cd-headline').hasClass('letters')) {
var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
} else if ($word.parents('.cd-headline').hasClass('clip')) {
$word.parents('.cd-words-wrapper').animate({
width: '2px'
}, revealDuration, function() {
switchWord($word, nextWord);
showWord(nextWord);
});
} else if ($word.parents('.cd-headline').hasClass('loading-bar')) {
$word.parents('.cd-words-wrapper').removeClass('is-loading');
switchWord($word, nextWord);
setTimeout(function() {
hideWord(nextWord)
}, barAnimationDelay);
setTimeout(function() {
$word.parents('.cd-words-wrapper').addClass('is-loading')
}, barWaiting);
} else {
switchWord($word, nextWord);
setTimeout(function() {
hideWord(nextWord)
}, animationDelay);
}
}
function showWord($word, $duration) {
if ($word.parents('.cd-headline').hasClass('type')) {
showLetter($word.find('i').eq(0), $word, false, $duration);
$word.addClass('is-visible').removeClass('is-hidden');
} else if ($word.parents('.cd-headline').hasClass('clip')) {
$word.parents('.cd-words-wrapper').animate({
'width': $word.width() + 10
}, revealDuration, function() {
setTimeout(function() {
hideWord($word)
}, revealAnimationDelay);
});
}
}
function hideLetter($letter, $word, $bool, $duration) {
$letter.removeClass('in').addClass('out');
if (!$letter.is(':last-child')) {
setTimeout(function() {
hideLetter($letter.next(), $word, $bool, $duration);
}, $duration);
} else if ($bool) {
setTimeout(function() {
hideWord(takeNext($word))
}, animationDelay);
}
if ($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
var nextWord = takeNext($word);
switchWord($word, nextWord);
}
}
function showLetter($letter, $word, $bool, $duration) {
$letter.addClass('in').removeClass('out');
if (!$letter.is(':last-child')) {
setTimeout(function() {
showLetter($letter.next(), $word, $bool, $duration);
}, $duration);
} else {
if ($word.parents('.cd-headline').hasClass('type')) {
setTimeout(function() {
$word.parents('.cd-words-wrapper').addClass('waiting');
}, 200);
}
if (!$bool) {
setTimeout(function() {
hideWord($word)
}, animationDelay)
}
}
}
function takeNext($word) {
return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}
function takePrev($word) {
return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
}
function switchWord($oldWord, $newWord) {
$oldWord.removeClass('is-visible').addClass('is-hidden');
$newWord.removeClass('is-hidden').addClass('is-visible');
}
});.cd-intro {
margin: 4em auto;
}
@media only screen and (min-width: 768px) {
.cd-intro {
margin: 5em auto;
}
}
@media only screen and (min-width: 1170px) {
.cd-intro {
margin: 6em auto;
}
}
.cd-headline {
font-size: 3rem;
line-height: 1.2;
}
@media only screen and (min-width: 768px) {
.cd-headline {
font-size: 4.4rem;
font-weight: 300;
}
}
@media only screen and (min-width: 1170px) {
.cd-headline {
font-size: 6rem;
}
}
.cd-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
}
.cd-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
}
.cd-words-wrapper b.is-visible {
position: relative;
}
.no-js .cd-words-wrapper b {
opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
opacity: 1;
}
/* --------------------------------
xclip
-------------------------------- */
.cd-headline.clip span {
display: inline-block;
padding: .2em 0;
}
.cd-headline.clip .cd-words-wrapper {
overflow: hidden;
vertical-align: top;
}
.cd-headline.clip .cd-words-wrapper::after {
/* line */
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background-color: #aebcb9;
}
.cd-headline.clip b {
opacity: 0;
}
.cd-headline.clip b.is-visible {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-caption" id="page-top">
<!-- type headline start-->
<h3 class="cd-headline clip is-full-width">
<span>I'm </span>
<span class="cd-words-wrapper" style="width: 178px;">
<b class="is-visible">David.</b>
<b class="is-hidden"> Professional Designer.</b>
<b class="is-hidden">Admin Assistant .</b>
</span>
</h3>
<!-- type headline end -->
</div>덕분에 지금 작동하고 위의 내 exemple에서 볼 수 있듯이 M
어쩌면 http://textillate.js.org/과 같은 라이브러리를 사용해 볼 수 있습니다. Google 텍스트 애니메이션 자바 스크립트 라이브러리 – lopezi
http://www.mattboldt.com/demos/typed-js/ 다른 하나 –