first commit

This commit is contained in:
2025-05-30 03:09:08 -06:00
parent 99d54737de
commit 1932509066
6221 changed files with 298434 additions and 212 deletions

View File

@ -0,0 +1,10 @@
Animated Headlines
=========
A collection of animated headlines, with interchangeable words that replace one another through CSS transitions.
[Article on CodyHouse](http://codyhouse.co/gem/css-animated-headlines/)
[Demo](http://codyhouse.co/demo/animated-headlines/)
[Terms](http://codyhouse.co/terms/)

View File

@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,123 @@
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Animated Headlines | CodyHouse</title>
</head>
<body>
<section class="cd-title">
<h1>Animated Headlines</h1>
</section>
<section class="cd-intro">
<h1 class="cd-headline rotate-1">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline letters type">
<span>My favourite food is</span>
<span class="cd-words-wrapper waiting">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline letters rotate-2">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline loading-bar">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline slide">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline clip is-full-width">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline zoom">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline letters rotate-3">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline letters scale">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<section class="cd-intro">
<h1 class="cd-headline push">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,221 @@
/*
Plugin Name: Animated Headlines
Written by: Codyhouse - (https://codyhouse.co/demo/animated-headlines/index.html)
*/
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() {
//initialise headline animation
animateHeadline('.word-rotator', '.word-rotator.letters');
}
function animateHeadline($selector) {
var duration = animationDelay;
theme.fn.intObs($selector, function(){
// Single Letters - Insert <i> element for each letter of a changing word
if( $(this).hasClass('letters') ) {
$(this).find('b').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);
});
}
// Animate the Headline
var headline = $(this);
if (headline.hasClass('loading-bar')) {
duration = barAnimationDelay;
setTimeout(function() {
headline.find('.word-rotator-words').addClass('is-loading')
}, barWaiting);
} else if (headline.hasClass('clip')) {
var spanWrapper = headline.find('.word-rotator-words'),
newWidth = spanWrapper.outerWidth() + 10
spanWrapper.css('width', newWidth);
} else if (!headline.hasClass('type')) {
//assign to .word-rotator-words the width of its longest word
var words = headline.find('.word-rotator-words b'),
width = 0;
words.each(function() {
var wordWidth = $(this).outerWidth();
if (wordWidth > width) width = wordWidth;
});
headline.find('.word-rotator-words').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('.word-rotator').hasClass('type')) {
var parentSpan = $word.parent('.word-rotator-words');
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('.word-rotator').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('.word-rotator').hasClass('clip')) {
$word.parents('.word-rotator-words').stop( true, true ).animate({
width: '2px'
}, revealDuration, function() {
switchWord($word, nextWord);
showWord(nextWord);
});
} else if ($word.parents('.word-rotator').hasClass('loading-bar')) {
$word.parents('.word-rotator-words').removeClass('is-loading');
switchWord($word, nextWord);
setTimeout(function() {
hideWord(nextWord)
}, barAnimationDelay);
setTimeout(function() {
$word.parents('.word-rotator-words').addClass('is-loading')
}, barWaiting);
} else {
switchWord($word, nextWord);
setTimeout(function() {
hideWord(nextWord)
}, animationDelay);
}
}
function showWord($word, $duration) {
if ($word.parents('.word-rotator').hasClass('type')) {
showLetter($word.find('i').eq(0), $word, false, $duration);
$word.addClass('is-visible').removeClass('is-hidden');
} else if ($word.parents('.word-rotator').hasClass('clip')) {
if (document.hasFocus()) {
$word.parents('.word-rotator-words').stop( true, true ).animate({
'width': $word.outerWidth() + 10
}, revealDuration, function() {
setTimeout(function() {
hideWord($word)
}, revealAnimationDelay);
});
} else {
$word.parents('.word-rotator-words').stop( true, true ).animate({
width: $word.outerWidth() + 10
});
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('.word-rotator').hasClass('type')) {
setTimeout(function() {
$word.parents('.word-rotator-words').addClass('waiting');
}, 200);
}
if (!$bool) {
setTimeout(function() {
hideWord($word)
}, animationDelay)
}
if (!$word.closest('.word-rotator').hasClass('type')) {
$word.closest('.word-rotator-words').stop( true, true ).animate({
width: $word.outerWidth()
});
}
}
}
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');
if (!$newWord.closest('.word-rotator').hasClass('clip')) {
var space = 0,
delay = ($newWord.outerWidth() > $oldWord.outerWidth()) ? 0 : 600;
if ($newWord.closest('.word-rotator').hasClass('loading-bar') || $newWord.closest('.word-rotator').hasClass('slide')) {
space = 3;
delay = 0;
}
setTimeout(function() {
$newWord.closest('.word-rotator-words').stop( true, true ).animate({
width: $newWord.outerWidth() + space
});
}, delay);
}
}
});

File diff suppressed because one or more lines are too long