<!-- Created by Evren Akar-->
<head>
<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Önermeli Arama - Search Proposition</h1>
<p>
Arama kutusu tasarlarken son kullanıcılara biraz daha faydalı olacak örnek arama keywordleri içeren bir search box hazırladım. Sitenizin içeriğine göre ister statik isterseniz de dinamik bir liste oluşturup linklendirerek kullanabilirsiniz.
</p>
<div class="input-field col-md-6">
<span class="fa fa-search"></span>
<div class="cd-intro">
<div class="cd-headline letters type">
<span>Örn.: </span>
<span class="cd-words-wrapper waiting">
<a href="#" class="is-visible">Kiralık Daire</a>
<a href="#">En iyi mekan</a>
<a href="#">Hamburger</a>
<a href="#">Uygun Fiyat</a>
<a href="#">Ford Fiesta</a>
<a href="#">Ortaköy</a>
</span>
</div>
</div>
<input type="text" placeholder="Dilediğinizi Arayın" />
</div>
</body>
@import "compass/css3";
.input-field {
width: 600px;
position: relative;
font-family:'Roboto', sans-serif;
padding: 10px;
span{
&.fa-search{
position:absolute;
font-size:20px;
color: #888888;
top: 19px;
left: 20px;
}
}
.cd-intro{
margin: 0 !important;
display: inline !important;
position: absolute;
top: 22px;
right: 30px;
.cd-headline{
span{
float: left;
font-weight:bold;
font-size:13px;
color: #888888;
margin-left: 5px;
&.cd-words-wrapper{
vertical-align: top;
overflow: hidden;
&:after{
content: '';
position: absolute;
right: 0;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 90%;
width: 1px;
background-color: #aebcb9;
}
}
&.waiting{
&:after{
-webkit-animation: cd-pulse 1s infinite;
-moz-animation: cd-pulse 1s infinite;
animation: cd-pulse 1s infinite;
}
}
a{
font-weight:bold;
font-size:13px;
color: #888888;
text-decoration: underline;
text-decoration-color:#dfdfdf;
-moz-text-decoration-color:#dfdfdf;
-webkit-text-decoration-color:#dfdfdf;
font-style: normal !important;
&:hover{
color:#C22D26;
}
i{
font-style: normal !important;
}
}
}
}
}
input {
width: 443px;
border: 1px solid #e5e5e5;
font-size: 16px;
font-weight: normal;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04);
color: #888888;
padding: 10px 120px 10px 35px;
}
select {
width:100%;
border: 1px solid #e5e5e5;
font-size:16px;
font-weight:normal;
box-shadow: 0 2px 2px rgba(0,0,0,.04);
color: #888888;
padding: 9px 25px;
}
.location{
color: #c12d26;
font-size:13px;
font-weight:bold;
position:absolute;
top: 22px;
right: 35px;
text-decoration: underline
}
}
/* --------------------------------
xrotate-1
-------------------------------- */
.cd-headline.rotate-1 .cd-words-wrapper {
-webkit-perspective: 300px;
-moz-perspective: 300px;
perspective: 300px;
}
.cd-headline.rotate-1 b {
opacity: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.cd-headline.rotate-1 b.is-visible {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-animation: cd-rotate-1-in 1.2s;
-moz-animation: cd-rotate-1-in 1.2s;
animation: cd-rotate-1-in 1.2s;
}
.cd-headline.rotate-1 b.is-hidden {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-animation: cd-rotate-1-out 1.2s;
-moz-animation: cd-rotate-1-out 1.2s;
animation: cd-rotate-1-out 1.2s;
}
@-webkit-keyframes cd-rotate-1-in {
0% {
-webkit-transform: rotateX(180deg);
opacity: 0;
}
35% {
-webkit-transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(360deg);
opacity: 1;
}
}
@-moz-keyframes cd-rotate-1-in {
0% {
-moz-transform: rotateX(180deg);
opacity: 0;
}
35% {
-moz-transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
-moz-transform: rotateX(360deg);
opacity: 1;
}
}
@keyframes cd-rotate-1-in {
0% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
35% {
-webkit-transform: rotateX(120deg);
-moz-transform: rotateX(120deg);
-ms-transform: rotateX(120deg);
-o-transform: rotateX(120deg);
transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
transform: rotateX(360deg);
opacity: 1;
}
}
@-webkit-keyframes cd-rotate-1-out {
0% {
-webkit-transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(180deg);
opacity: 0;
}
}
@-moz-keyframes cd-rotate-1-out {
0% {
-moz-transform: rotateX(0deg);
opacity: 1;
}
35% {
-moz-transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-moz-transform: rotateX(180deg);
opacity: 0;
}
}
@keyframes cd-rotate-1-out {
0% {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
35% {
-webkit-transform: rotateX(-40deg);
-moz-transform: rotateX(-40deg);
-ms-transform: rotateX(-40deg);
-o-transform: rotateX(-40deg);
transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
opacity: 0;
}
}
/* --------------------------------
xtype
-------------------------------- */
.cd-headline.type .cd-words-wrapper {
vertical-align: top;
overflow: hidden;
}
.cd-headline.type .cd-words-wrapper::after {
/* vertical bar */
content: '';
position: absolute;
right: 0;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 90%;
width: 1px;
background-color: #328efe;
color: #ffffff;
}
.cd-headline.type .cd-words-wrapper.waiting::after {
-webkit-animation: cd-pulse 1s infinite;
-moz-animation: cd-pulse 1s infinite;
animation: cd-pulse 1s infinite;
}
.cd-headline.type .cd-words-wrapper.selected {
background-color: #328efe;
}
.input-field .cd-intro .cd-headline span.cd-words-wrapper.selected a{
text-decoration: none;
}
.input-field .cd-intro .cd-headline span.cd-words-wrapper.selected a i{
color: #ffffff !important;
}
.cd-headline.type .cd-words-wrapper.selected::after {
visibility: hidden;
}
.cd-headline.type .cd-words-wrapper.selected b {
color: #0d0d0d;
}
.cd-headline.type b {
visibility: hidden;
}
.cd-headline.type b.is-visible {
visibility: visible;
}
.cd-headline.type i {
position: absolute;
visibility: hidden;
}
.cd-headline.type i.in {
position: relative;
visibility: visible;
}
@-webkit-keyframes cd-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@-moz-keyframes cd-pulse {
0% {
-moz-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-moz-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-moz-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@keyframes cd-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1);
-ms-transform: translateY(-50%) scale(1);
-o-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
-moz-transform: translateY(-50%) scale(0.9);
-ms-transform: translateY(-50%) scale(0.9);
-o-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
-moz-transform: translateY(-50%) scale(0);
-ms-transform: translateY(-50%) scale(0);
-o-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
opacity: 0;
}
}
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 = 25,
selectionDuration = 1000,
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('a'));
//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');
}
});
External CSS
This Pen doesn't use any external CSS resources.