Предлагам ви го, защото при инсталирането му се използва чист JavaScript, а не отделни кадри от изображения, при което няма проблеми със съвместимостта в съвременните браузъри.
Описание
Това, което прави скриптът е да промени непрозрачността на изображенията на 0 и те няма да се скрият, а се преместват за кратко вляво, при което се появява ефекта "Слайд" на превъртане.
Това означава, че изображението ще бъде на страницата, но няма да се показва винаги, тъй като непрозрачността му е 0. Когато потребителите преглеждат страницата, веднага щом стигнат до изображението, то ще се плъзне и ще се появи. Щом потребителите не гледат изображението, а преминават по текста по-нататък, то отново ще изчезне, прибирайки се в ляво.
Този тип на анимационен ефект за някои потребители може да е дразнещо. За един блог с по-добър потребителски интерфейс тази анимация се извършва с помощта на JavaScript.
Ако в браузъра JavaScript е деактивиран, тогава тази слайд с анимационен ефект няма да се осъществи.
Вече ви информирах за всички предимства и недостатъци на днешното ми предложение. Който от вас иска да го пробва сега е време да го добави в блога си.
Добавяне на скрипта в темата
Добавянето на скрипта в темата ще осъществим в няколко стъпки.Стъпка 1: Преминете към темата на блога си, а от там минете към редактирате на HTML кода.
Стъпка 2: Сега търсете (търсене чрез натискане на CTRL + F) участъка от кода </ body>
Ако откриете този код 3 или повече пъти във вашата тема, то се спрете на 2-рия или 3-тия код </ body>.
Стъпка 3: Копирайте този по-долу посочен код преди </ body>
<b:if cond='data:blog.pageType == "item"'>
<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>
<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: Всичко е готово и запишете промените в темата. Отворете своята публикация с изображения и превъртете надолу, за да видите този ефект в действие.
Персонализиране
Ако искате да показвате изображенията винаги, когато ги превъртите, изтрийте в кода онова, което е оцветено в червен цвят.Заключение
По подразбиране скриптът ще се зарежда и пуска в страници на публикации с няколко изображения, които не се показват на главната страница.Благодаря за това, че проследихте моя урок за Анимиран слайд от изображения в публикация.
Ако имате затруднения моля, коментирайте и споделете вашето ценно мнение. И останете настроени за още уроци като този. Не забравяйте да споделете това с приятелите си.
Успех и доскоро.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Няма коментари:
Публикуване на коментар