Анимиран слайд от изображения в публикация

Здравейте всички! За изображенията съм писала достатъчно, но все се появява нещо ново, което ми се иска да споделя. Ето друг вид анимиран слайд от изображения в публикация. Плъзгане на изображенията при превъртане на страницата на публикация е един малък, но много стилен анимиран ефект, който виждаме често в много блогове.

Предлагам ви го, защото при инсталирането му се използва чист JavaScript, а не отделни кадри от изображения, при което няма проблеми със съвместимостта в съвременните браузъри.

Описание

Това, което прави скриптът е да промени непрозрачността на изображенията на 0 и те няма да се скрият, а се преместват за кратко вляво, при което се появява ефекта "Слайд" на превъртане.

Това означава, че изображението ще бъде на страницата, но няма да се показва винаги, тъй като непрозрачността му е 0. Когато потребителите преглеждат страницата, веднага щом стигнат до изображението, то ще се плъзне и ще се появи. Щом потребителите не гледат изображението, а преминават по текста по-нататък, то отново ще изчезне, прибирайки се в ляво.

Този тип на анимационен ефект за някои потребители може да е дразнещо. За един блог с по-добър потребителски интерфейс тази анимация се извършва с помощта на JavaScript.

Ако в браузъра JavaScript е деактивиран, тогава тази слайд с анимационен ефект няма да се осъществи.

Вече ви информирах за всички предимства и недостатъци на днешното ми предложение. Който от вас иска да го пробва сега е време да го добави в блога си.

Добавяне на скрипта в темата

Добавянето на скрипта в темата ще осъществим в няколко стъпки.

Стъпка 1: Преминете към темата на блога си, а от там минете към редактирате на HTML кода.

Стъпка 2: Сега търсете (търсене чрез натискане на CTRL + F) участъка от кода </ body>

Ако откриете този код 3 или повече пъти във вашата тема, то се спрете на 2-рия или 3-тия код </ body>.

Стъпка 3: Копирайте този по-долу посочен код преди </ body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.post-body img {      opacity:0;      transition:all .5s;    }
    .post-body img {      transform:translateX(-50%) scale(0.95);    }
    .post-body .active {      opacity:1;      transform:translateX(0%) scale(1);    }
</style>
<script>
//<![CDATA[
 function debounce(func, wait = 20, immediate = true) {      var timeout;      return function() {        var context = this, args = arguments;        var later = function() {          timeout = null;          if (!immediate) func.apply(context, args);        };        var callNow = immediate && !timeout;        clearTimeout(timeout);        timeout = setTimeout(later, wait);        if (callNow) func.apply(context, args);      };    }         var post = document.querySelector(".post-body");   var sliderImages = post.querySelectorAll("img");
    function checkSlide() {      sliderImages.forEach(sliderImage => {        
const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;        const imageBottom = sliderImage.offsetTop + sliderImage.height + 100;        const isHalfShown = slideInAt > sliderImage.offsetTop;        const isNotScrolledPast = window.scrollY < imageBottom;        if (isHalfShown && isNotScrolledPast) {          sliderImage.classList.add('active');        } else {          sliderImage.classList.remove('active');        }      });    }
 window.addEventListener("scroll", debounce(checkSlide));                 
//]]>  </script></b:if>

Стъпка 4: Всичко е готово и запишете промените в темата. Отворете своята публикация с изображения и превъртете надолу, за да видите този ефект в действие.

Персонализиране

Ако искате да показвате изображенията винаги, когато ги превъртите, изтрийте в кода онова, което е оцветено в червен цвят.

Заключение

По подразбиране скриптът ще се зарежда и пуска в страници на публикации с няколко изображения, които не се показват на главната страница.

Благодаря за това, че проследихте моя урок за Анимиран слайд от изображения в публикация.
Ако имате затруднения моля, коментирайте и споделете вашето ценно мнение. И останете настроени за още уроци като този. Не забравяйте да споделете това с приятелите си.

Успех и доскоро.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: