Skip to content

Instantly share code, notes, and snippets.

@MikSDigital

MikSDigital/index.html

Created June 5, 2015 16:05
Show Gist options
  • Save MikSDigital/95a4d75fea41a568ba03 to your computer and use it in GitHub Desktop.
Save MikSDigital/95a4d75fea41a568ba03 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Word Rotate</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css" media="screen">
h2 {
line-height: 45px;
}
span {
display: inline-block;
text-align: left;
}
span.word-rotate {
display: inline-block;
overflow: hidden;
text-align: center;
position: relative;
margin-bottom: -15px;
height: 45px;
}
span.word-rotate-items {
position: relative;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<!--
<header class="header" role="banner">
<h1>Word Rotation</h1>
<span class="word-rotate active">
<span class="word-rotate-items">
<span><h1>Experiment</h1></span>
<span><h1>Study</h1></span>
<span><h1>Exercise</h1></span>
<span><h1>Operation</h1></span>
</span>
</span>
</header>
-->
<h2>Text
<strong>
<span class="word-rotate">
<span class="word-rotate-items">
<span>удобный</span>
<span>быстрый</span>
<span>легкий</span>
<span>удобный</span></span>
</span>
</strong>
continue...
</h2>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="word-rotate.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>
Raw
word-rotate.js
(function() {
"use strict";
var Core = {
initialized: false,
initialize: function() {
if (this.initialized) return;
this.initialized = true;
this.build();
},
build: function() {
this.wordRotate();
},
wordRotate: function() {
$(".word-rotate").each(function() {
var $this = $(this),
itemsWrapper = $(this).find(".word-rotate-items"),
items = itemsWrapper.find("> span"),
firstItem = items.eq(0),
firstItemClone = firstItem.clone(),
maxWidth = 0,
itemHeight = 0,
currentItem = 1,
currentTop = 0;
// set the width of each span containing the words
items.each(function() {
if($(this).width() > maxWidth) {
maxWidth = $(this).width();
}
});
itemHeight = firstItem.height();
itemsWrapper.append(firstItemClone);
$this
.width(maxWidth)
.height(itemHeight);
console.log(maxWidth + ' ' + itemHeight);
setInterval(function() {
currentTop = (currentItem * itemHeight);
itemsWrapper.animate({
top: -(currentTop) + "px"
}, 300, function() {
currentItem++;
if(currentItem > items.length) {
itemsWrapper.css("top", 0);
currentItem = 1;
}
});
}, 2000);
});
}
};
Core.initialize();
})();
@MikSDigital
Copy link
Author

Word rotate script

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment