MIGO Web-Development - разработка и cоздание сайтов в Киеве, Украине

Создание сайтов, поисковое продвижение в Google. Сопровождение, тех.поддержка


звонить: +38 (093) 636 78 08
писать: web@migo.com.ua


Блок 'Наши Партнеры' (или Клиенты) для сайта с приятной анимацией

Блок 'Наши Партнеры' (или Клиенты) для сайта с приятной анимацией

Блок «Партнеры» предназначен для создания списка логотипов ваших партнеров, доноров или спонсоров. Для вывода этого списка на отдельной и/или главной странице.

Зачастую данный блок выводится в виде горизонтальной карусели логотипов с ссылками или без на их сайты. Но что если хочется чего-то более изящного?

Приведу пример, который я нашел на просторах интернет и который мне очень сильно приглянулся и наверное будет взят “на вооружение” для следующих проектов:

See the Pen Multiple Swap Animations by Migo Userlife (@migo_userlife) on CodePen.

1. HTML разметка

<div class="company-logos">
  <div class="company-logo"></div>
  <div class="company-logo"></div>
  <div class="company-logo"></div>
  <div class="company-logo"></div>
</div>

2. CSS

body {
  background-color: #ededed;  
}
.company-logos {
  display: table;
  margin: 0px auto;
  width: 100%;
}

.company-logo {
  float: left;
  width: 25%;
  height: 100px;
  position: relative;
  margin-bottom: 30px;
  margin-top: 10px;
}

.company-logo > img {
  width: 100%;
  height: auto;
  position: absolute;
}

3. Немного JS

console.clear();

var baseUrl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/logo-";

var logos = [];
var names = ["google", "intel", "aol", "amazon", "ford", "cocacola", "mcdonalds", "samsung", "microsoft", "youtube", "nike", "fox", "motorola", "ea", "adobe"];

var companies = $(".company-logo").toArray().map(createCompany);
var current;

var interval = TweenLite.delayedCall(1.5, function () {
  swapLogo();
  interval.restart(true);
});

function createCompany(element) {

  var company = {
    animate: animate,
    element: element,
    logo: getLogo()
  };

  var leave,
      enter = getImage(company);

  function animate() {

    leave = enter;
    enter = getImage(company);

    TweenLite.from(enter, 0.75, { autoAlpha: 0, delay: 0.25 });
    TweenLite.to(leave, 0.75, { autoAlpha: 0, onComplete: removeImage });
  }

  function removeImage() {
    element.removeChild(leave);
  }

  return company;
}

function swapLogo() {
  var last = current;
  current = sample(companies.filter(function (company) {
    return company !== last;
  }));

  current.logo = getLogo(current);
  current.animate();
}

function getImage(company) {
  var image = new Image();
  image.src = baseUrl + company.logo + ".png";
  company.element.appendChild(image);
  return image;
}

function getLogo(company) {
  if (!logos.length) logos = shuffle(names.splice(0));
  if (company) names.push(company.logo);
  return logos.shift();
}

function sample(array) {
  var index = Math.floor(Math.random() * array.length);
  return array[index];
}

function shuffle(array) {
  for (var i = array.length - 1; i > 0; i--) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
	window.CP.exitedLoop(1);
	window.CP.exitedLoop(1);
	window.CP.exitedLoop(1);
	window.CP.exitedLoop(1);
	window.CP.exitedLoop(1);
  return array;
}

P.S. Для работоспособности нашего примера потребуется наличие двух внешних библиотек: jQuery и TweenMax (GSAP)

Также вы можете использовать этот блок для вывода на сайт любых других логотипов – например, список используемых вами технологий, баннеров мероприятий или список СМИ, которые о вас пишут.

проспект И.Мазепы 5 07300 Украина, Киевская обл., г. Вышгород, +38 (093) 636 78 08
Рассказать друзьям:

comments powered by Disqus